Preflight

Resumen

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 facilitar 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);

Si bien la mayoría de los estilos en Preflight están destinados a pasar desapercibidos (simplemente hacen que las cosas se comporten más como esperarías), algunos tienen más opinión y pueden ser sorprendentes cuando te los encuentras por primera vez.

Para 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, incluidos encabezados, citas en bloque, párrafos, etc.:

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

Esto dificulta confiar accidentalmente en los valores de margen aplicados por la hoja de estilos del agente de usuario que no forman parte de tu escala de espaciado.

Se restablecen los estilos de borde

Para facilitar la adición de un borde simplemente agregando la clase border, Tailwind anula 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 use currentColor.

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

Cuando te encuentres con situaciones como esta, puedes solucionarlas anulando 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 están completamente sin estilo de forma predeterminada y tienen el mismo tamaño y peso de fuente 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 se garantiza que existan en tu propia escala tipográfica.
• En el desarrollo de interfaces de usuario, los encabezados a menudo deben restarse énfasis visualmente. Hacer que los encabezados no tengan estilo de forma predeterminada significa que cualquier estilo que apliques a los encabezados se realiza de forma consciente y deliberada.

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

Las listas no tienen estilo

Las listas ordenadas y no ordenadas no tienen estilo de forma predeterminada, sin viñetas ni números:

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

Si deseas diseñar 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 agregando tus propios estilos base.

Consideraciones de accesibilidad

Las listas sin estilo no son anunciadas como listas por VoiceOver. Si tu contenido es realmente una lista pero deseas mantenerlo 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 de nivel de bloque

Las imágenes y otros elementos reemplazados (como svg, video, canvas y otros) son display: block de forma predeterminada:

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

Esto ayuda a evitar problemas de alineación inesperados que a menudo 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 restringidas

Las imágenes y los videos están restringidos al ancho del padre de manera que preservan 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 anular este comportamiento, usa la utilidad max-w-none:

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

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 sobre cómo agregar 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 mientras mantienes 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);