Tailwind CSS v1.5.0

Esperaba guardar la v1.5.0 para algo realmente emocionante pero necesitábamos una nueva característica para soportar el nuevo plugin @tailwindcss/typography así que, ¡al diablo!, te traemos cosas nuevas antes de tiempo.

No hay cambios que rompan la compatibilidad, esta es una versión menor y somos profesionales, tontorrón.

Nuevas características

Soporte de variants para componentes

Hasta Tailwind CSS v1.5.0, solo las clases de "utilidad" estaban realmente destinadas a ser usadas con variants (como "responsive", "hover", "focus", etc.)

Aunque estas siguen siendo mucho más útiles para las utilidades que cualquier otro tipo de clase, ahora también soportamos la generación de variantes para clases de componentes, como las clases prose en el nuevo plugin @tailwindcss/typography:

<article class="prose md:prose-lg">
  <!-- Contenido -->
</article>

Puedes aprovechar esta característica en tus propias clases de componentes usando la nueva opción variants en el segundo argumento de la API del plugin addComponents:

plugin(function ({ addComponents })) {
  addComponents({
    '.card': {
      // ...
    }
  }, {
    variants: ['responsive']
  })
})

...o usando la abreviatura de array con la que quizás estés familiarizado de la API addUtilities:

plugin(function ({ addComponents })) {
  addComponents({
    '.card': {
      // ...
    }
  }, ['responsive'])
})

Para aprovechar estas características en tu CSS personalizado (en lugar de usar la API del plugin), puedes usar una nueva directiva @layer para decirle explícitamente a Tailwind que tus estilos pertenecen al grupo "components":

@layer components {
  @responsive {
    .card {
      /* ... */
    }
  }
}

Esto ayuda a Tailwind a purgar tu CSS no utilizado correctamente, asegurando que no elimine ninguna variante de componente Responsive cuando se usa el modo de purga "conservative" por defecto.

Variantes Responsive de container

Aprovechando el nuevo soporte de variants para componentes, ¡la clase container ahora soporta variantes!

<!-- Bloquear el ancho solo en tamaños `md` y superiores -->
<div class="md:container">
  <!-- ... -->
</div>

Hemos habilitado las variantes Responsive por defecto, pero si estás mal de la cabeza también puedes habilitar manualmente otras variantes como focus, group-hover, lo que sea:

module.exports = {
  // ...
  variants: {
    container: ["responsive", "focus", "group-hover"],
  },
};

Nueva variante focus-visible

Hemos añadido soporte para la pseudo-clase :focus-visible usando una nueva variante focus-visible.

Esto es súper útil para añadir estilos de foco que solo aparecen a los usuarios de teclado, y son ignorados por los usuarios de ratón:

<button class="focus-visible:shadow-outline focus-visible:outline-none ...">Haz clic aquí</button>

No está habilitado para nada por defecto, pero puedes habilitarlo en la sección variants de tu archivo de configuración:

module.exports = {
  // ...
  variants: {
    backgroundColor: ["responsive", "hover", "focus", "focus-visible"],
  },
};

El soporte de navegadores todavía es bastante débil en esto, pero está mejorando. Mientras tanto, echa un vistazo al polyfill y al plugin de PostCSS correspondiente si te gustaría usar esto en todos los navegadores de inmediato.

Nueva variante checked

Hemos añadido una nueva variante checked que puedes usar para aplicar estilos condicionalmente a cosas como casillas de verificación y botones de radio:

<input type="checkbox" class="bg-white checked:bg-blue-500" />

No está habilitado para nada por defecto, pero puedes habilitarlo en la sección variants de tu archivo de configuración:

module.exports = {
  // ...
  variants: {
    backgroundColor: ["responsive", "hover", "focus", "checked"],
  },
};

¿Quieres hablar sobre esta publicación? Discútelo en GitHub →