Preflight

Descripción general

Construido sobre modern-normalize, Preflight es un conjunto de estilos base para proyectos de Tailwind que están diseñados para suavizar las inconsistencias entre navegadores y facilitarte el trabajo dentro de las restricciones de tu sistema de diseño.

Cuando importas tailwindcss en tu proyecto, Preflight se inyecta automáticamente en la capa base:

@layer theme, base, components, utilities;@import "tailwindcss/theme.css" layer(theme);@import "tailwindcss/preflight.css" layer(base);@import "tailwindcss/utilities.css" layer(utilities);

Aunque la mayoría de los estilos en Preflight están pensados para pasar desapercibidos (simplemente hacen que las cosas se comporten más como esperarías), algunos son más de opinión y pueden resultar sorprendentes la primera vez que los encuentras.

Para obtener una referencia completa de todos los estilos aplicados por Preflight, consulta la hoja de estilos.

Se eliminan los márgenes

Preflight elimina todos los márgenes predeterminados de todos los elementos, incluyendo encabezados, citas en bloque (blockquotes), párrafos, etc:

*,::after,::before,::backdrop,::file-selector-button {  margin: 0;  padding: 0;}

Esto hace que sea más difícil depender accidentalmente de los valores de margen aplicados por la hoja de estilos del agente de usuario que no forman parte de tu escala de espaciado.

Los estilos de borde se restablecen

Para facilitar la adición de un borde simplemente agregando la clase border, Tailwind sobrescribe los estilos de borde predeterminados para todos los elementos con las siguientes reglas:

*,::after,::before,::backdrop,::file-selector-button {  box-sizing: border-box;  border: 0 solid;}

Dado que la clase border solo establece la propiedad border-width, este restablecimiento garantiza que agregar esa clase siempre agregue un borde sólido de 1px que utiliza currentColor.

Esto puede causar algunos resultados inesperados al integrar ciertas librerías de terceros, como Google Maps, por ejemplo.

Cuando te encuentres con situaciones como esta, puedes solucionarlas sobrescribiendo los estilos de Preflight con tu propio CSS personalizado:

@layer base {  .google-map * {    border-style: none;  }}

Los encabezados no tienen estilo

Todos los elementos de encabezado no tienen ningún estilo por defecto y tienen el mismo tamaño de fuente y peso que el texto normal:

h1,h2,h3,h4,h5,h6 {  font-size: inherit;  font-weight: inherit;}

La razón de esto es doble:

• Te ayuda a evitar desviarte accidentalmente de tu escala tipográfica. De forma predeterminada, los navegadores asignan tamaños a los encabezados que no existen en la escala tipográfica predeterminada de Tailwind, y no está garantizado que existan en tu propia escala.
• En el desarrollo de interfaces de usuario, los encabezados a menudo deben perder énfasis visual. Hacer que los encabezados no tengan estilo por defecto significa que cualquier estilo que les apliques se hace de forma consciente y deliberada.

Siempre puedes agregar estilos de encabezado predeterminados a tu proyecto añadiendo tus propios estilos base.

Las listas no tienen estilo

Las listas ordenadas y desordenadas no tienen estilo por defecto, sin viñetas ni números:

ol,ul,menu {  list-style: none;}

Si deseas dar estilo a una lista, puedes hacerlo usando las utilidades list-style-type y list-style-position:

<ul class="list-inside list-disc">  <li>Uno</li>  <li>Dos</li>  <li>Tres</li></ul>

Siempre puedes agregar estilos de lista predeterminados a tu proyecto añadiendo tus propios estilos base.

Consideraciones de accesibilidad

Las listas sin estilo no son anunciadas como listas por VoiceOver. Si tu contenido es verdaderamente una lista pero deseas mantenerla sin estilo, agrega un rol "list" al elemento:

<ul role="list">  <li>Uno</li>  <li>Dos</li>  <li>Tres</li></ul>

Las imágenes son elementos a nivel de bloque

Las imágenes y otros elementos reemplazados (como svg, video, canvas y otros) son display: block por defecto:

img,svg,video,canvas,audio,iframe,embed,object {  display: block;  vertical-align: middle;}

Esto ayuda a evitar problemas inesperados de alineación con los que a menudo te encuentras al usar el valor predeterminado del navegador de display: inline.

Si alguna vez necesitas hacer que uno de estos elementos sea inline en lugar de block, simplemente usa la utilidad inline:

<img class="inline" src="..." alt="..." />

Las imágenes están limitadas

Las imágenes y los videos están limitados al ancho del padre de una manera que preserva su relación de aspecto intrínseca:

img,video {  max-width: 100%;  height: auto;}

Esto evita que se desborden de sus contenedores y los hace responsivos por defecto. Si alguna vez necesitas sobrescribir este comportamiento, utiliza la utilidad max-w-none:

<img class="max-w-none" src="..." alt="..." />

Los elementos con un atributo hidden permanecen ocultos

[hidden]:where(:not([hidden="until-found"])) {  display: none !important;}

Esto obliga a que los elementos con un atributo hidden permanezcan invisibles a menos que se use hidden="until-found". Elimina el atributo hidden si deseas que un elemento sea visible para el usuario.

Extender Preflight

Si deseas agregar tus propios estilos base sobre Preflight, agrégalos a la capa CSS base en tu CSS usando @layer base:

@layer base {  h1 {    font-size: var(--text-2xl);  }  h2 {    font-size: var(--text-xl);  }  h3 {    font-size: var(--text-lg);  }  a {    color: var(--color-blue-600);    text-decoration-line: underline;  }}

Obtén más información en la documentación para añadir estilos base.

Deshabilitar Preflight

Si deseas deshabilitar Preflight por completo —tal vez porque estás integrando Tailwind en un proyecto existente o prefieres definir tus propios estilos base— puedes hacerlo importando solo las partes de Tailwind que necesitas.

Por defecto, esto es lo que inyecta @import "tailwindcss";:

@layer theme, base, components, utilities;@import "tailwindcss/theme.css" layer(theme);@import "tailwindcss/preflight.css" layer(base);@import "tailwindcss/utilities.css" layer(utilities);

Para deshabilitar Preflight, simplemente omite su importación manteniendo todo lo demás:

@layer theme, base, components, utilities;@import "tailwindcss/theme.css" layer(theme);@import "tailwindcss/preflight.css" layer(base);@import "tailwindcss/utilities.css" layer(utilities);

Al importar los archivos de Tailwind CSS individualmente, las funciones como source(), theme() y prefix() deben ir en sus importaciones respectivas.

Por ejemplo, la detección de origen afecta a las utilidades generadas, por lo que se debe agregar source(…) a la importación de utilities.css:

@layer theme, base, components, utilities;@import "tailwindcss/theme.css" layer(theme);@import "tailwindcss/utilities.css" layer(utilities);@import "tailwindcss/utilities.css" layer(utilities) source(none);

Lo mismo ocurre con important, que también afecta a las utilidades:

@layer theme, base, components, utilities;@import "tailwindcss/theme.css" layer(theme);@import "tailwindcss/utilities.css" layer(utilities);@import "tailwindcss/utilities.css" layer(utilities) important;

De manera similar, theme(static) y theme(inline) afectan a las variables de tema generadas y deben colocarse en la importación de theme.css:

@layer theme, base, components, utilities;@import "tailwindcss/theme.css" layer(theme);@import "tailwindcss/theme.css" layer(theme) theme(static);@import "tailwindcss/utilities.css" layer(utilities);

Finalmente, usar un prefijo con prefix(tw) afecta a las utilidades y variables, por lo que debe ir en ambas importaciones:

@layer theme, base, components, utilities;@import "tailwindcss/theme.css" layer(theme);@import "tailwindcss/utilities.css" layer(utilities);@import "tailwindcss/theme.css" layer(theme) prefix(tw);@import "tailwindcss/utilities.css" layer(utilities) prefix(tw);