Lanzamiento de Tailwind CSS v4.0

• Lanzamiento de Tailwind CSS v4.0

  • Una nueva versión optimizada para maximizar el rendimiento y la flexibilidad, aprovechando al máximo los avances de la plataforma web moderna
  • Con un nuevo motor de alto rendimiento, la velocidad de compilación completa es hasta 5 veces mayor y la de compilación incremental es más de 100 veces más rápida
  • Diseñado para la web moderna aprovechando las funciones más recientes de CSS

• Nuevo motor de alto rendimiento

  • Tailwind CSS v4.0 es una reescritura completa del framework, con una arquitectura optimizada para maximizar la velocidad
  • Las compilaciones incrementales son más de 100 veces más rápidas y se completan en microsegundos

• Diseñado para la web moderna

  • Aprovecha funciones modernas de CSS como native cascade layers, propiedades personalizadas registradas y color-mix()
  • Usa propiedades lógicas para simplificar el soporte RTL y reducir el tamaño del CSS generado

• Instalación simplificada

  • El proceso de instalación se simplificó, reduciendo dependencias, y solo requiere agregar una línea de código al archivo CSS
  • Incluye compatibilidad nativa con la regla @import sin necesidad de plugins externos

• Plugin de Vite

  • Los usuarios de Vite pueden integrar Tailwind usando @tailwindcss/vite
  • Usar el plugin de Vite mejora aún más el rendimiento

• Detección automática de contenido

  • Detecta automáticamente los archivos de plantillas, sin necesidad de configuración
  • Ignora automáticamente los elementos del archivo .gitignore para evitar escaneos innecesarios

• Compatibilidad integrada con import

  • Permite importar en línea otros archivos CSS usando @import
  • Un sistema de import optimizado para Tailwind CSS mejora aún más el rendimiento

• Configuración centrada en CSS

  • Permite configurar el proyecto en CSS en lugar de JavaScript
  • Es posible personalizar directamente desde el archivo CSS sin un archivo tailwind.config.js

• Variables de tema en CSS

  • Proporciona design tokens como variables CSS para poder referenciarlos fácilmente en tiempo de ejecución

• Valores utilitarios y variantes dinámicas

  • Se simplificó para que varias utilidades y variantes puedan aceptar valores arbitrarios
  • Permite configurar fácilmente tamaños de grid o atributos de datos personalizados

• Paleta de colores P3 modernizada

  • La paleta de colores predeterminada se actualizó de rgb a oklch para ofrecer colores más vivos

• Container queries

  • Incluye de forma nativa una API para aplicar estilos a elementos según el tamaño del contenedor

• Nuevas utilidades de transformación 3D

  • Se agregó una API para transformar elementos en un espacio 3D

• API de gradientes ampliada

  • Se agregaron utilidades para crear gradientes lineales, cónicos y radiales

• Compatibilidad con @starting-style

  • Se agregó una función para transicionar propiedades cuando un elemento se muestra por primera vez, sin JavaScript

• Variante not-*

  • Se agregó compatibilidad con la pseudoclase CSS :not()

• Nuevas utilidades y variantes adicionales

  • Se agregaron varias utilidades y variantes nuevas como inset-shadow-*, field-sizing y color-scheme

Tailwind CSS v4.0 es la versión más reciente, maximizada en rendimiento y flexibilidad, y ofrece una amplia variedad de nuevas funciones y mejoras.

[GN⁺]

Opiniones de Hacker News

• Valoran positivamente la evolución de Tailwind v4, y consideran una gran ventaja que admita variables de CSS y configuración solo con CSS. Ven que Tailwind ahora cumple bien su papel como utilidad

• CSS se ha vuelto más amigable para el usuario que antes, y usar propiedades de estilo directamente en HTML puede ser más simple. Sin embargo, algunos todavía prefieren evitar el atributo style

• Les gusta que, al usar Tailwind, los estilos se puedan leer en un solo lugar. Aunque los nombres de clase son largos, es útil porque permite modificar los estilos con facilidad

• Cuando conocieron Tailwind por primera vez, les resultó pesado tener que volver a aprender CSS. Pero entendieron que es útil para el trabajo en equipo y la escalabilidad. Aun así, siguen prefiriendo una hoja de estilos base

• En proyectos con Tailwind, les pareció intuitivo y bien documentado. Ayuda a ahorrar tiempo porque no hace falta pensar en nombres para los estilos

• Con la actualización más reciente de Tailwind, los tiempos de compilación se redujeron y ya no hace falta configuración en JS. Ahora CSS puede encargarse de la mayor parte del trabajo

• Intentaron usar Tailwind, pero el resultado no les pareció mejor que con Bootstrap. Están pensando cómo obtener resultados decentes sin convertirse en diseñadores

• El diseño limpio pero genérico de Tailwind está muy extendido. Esto muestra tanto las ventajas como las limitaciones de los estilos en línea de Tailwind

• La actualización a Tailwind v4 afectó aplicaciones existentes. Por problemas de compatibilidad, la situación obliga a seguir usando v3 o a modificar los scripts de build