Tailwind CSS v2.1

¡La primera actualización de características desde Tailwind CSS v2.0 está aquí y cargada de cosas geniales! Hemos fusionado el nuevo motor JIT al core, agregado soporte de primera clase para filtros CSS componibles, agregado utilidades de modo de fusión y un montón más.

Aquí están algunos de los aspectos más destacados:

• Motor JIT en el core
• API de filtros CSS componibles
• Nuevas utilidades de modo de fusión
• Nuevas utilidades de aislamiento

Para todos los detalles, revisa las notas de la versión en GitHub.

Motor JIT en el core

El nuevo motor JIT que anunciamos en marzo ahora se ha fusionado al core y está disponible como una característica opcional usando una nueva opción mode en tu archivo tailwind.config.js:

module.exports = {
  mode: "jit",
  purge: [
    // ...
  ],
  // ...
};

Esta característica todavía está en vista previa lo que significa que algunos detalles pueden cambiar a medida que resolvemos los problemas, y no está sujeta al versionado semántico.

Si estabas usando @tailwindcss/jit antes, ahora puedes migrar a Tailwind CSS v2.1 en su lugar, ya que ahí es donde ocurrirá todo el nuevo desarrollo del motor.

Lee la documentación del Modo Just-in-Time para aprender más.

API de filtros CSS componibles

¡Esto es enorme! Finalmente hemos agregado soporte de primera clase para filtros CSS.

Funcionan de manera muy similar a nuestras utilidades transform, donde usas filter para habilitar filtros y lo combinas con utilidades como grayscale, blur-lg o saturate-200 para componer filtros sobre la marcha.

<div class="blur-md grayscale invert filter ...">
  <!-- ... -->
</div>

...y así es como se ve backdrop-filter:

<div class="backdrop-blur backdrop-brightness-50 backdrop-filter ...">
  <!-- ... -->
</div>

Revisa la documentación de filter y backdrop-filter para aprender más. ¡Pronto agregaremos un montón de ejemplos visuales útiles allí!

Nuevas utilidades de modo de fusión

Hemos agregado nuevas utilidades para mix-blend-mode y background-blend-mode:

<div class="mix-blend-multiply ...">
  <!-- ... -->
</div>

Revisa la documentación para aprender más.

Nuevas utilidades de aislamiento

Hemos agregado nuevas utilidades isolate y isolation-auto para trabajar con la propiedad isolation:

<div class="isolate ...">
  <!-- ... -->
</div>

Esto puede ser muy útil para delimitar el alcance de las características del modo de fusión o los ajustes de z-index y es súper poderoso.

Revisa la documentación para aprender más.

También recomiendo encarecidamente este gran artículo de Josh Comeau para verlo en acción.

Actualizando

Tailwind CSS v2.1 es una actualización incremental sin cambios disruptivos, así que para actualizar solo necesitas ejecutar:

npm install tailwindcss@latest

Si estabas usando @tailwindcss/jit previamente, ahora puedes volver a tailwindcss y actualizar tu configuración de PostCSS en consecuencia.

¿Listo para actualizar? Obtenlo de npm →

Esta migración asegura que el contenido se adhiera al nuevo formato v4, utilizando los componentes y códigos especificados para ejemplos, extractos y bloques de código.