Tailwind CSS v4.0 abre el progreso de su desarrollo como código abierto

• Se está desarrollando Oxide, un nuevo motor de alto rendimiento, para Tailwind CSS v4.0.
• Fue diseñado para simplificar la experiencia de desarrollo y aprovechar la evolución más reciente de la plataforma web.
• Originalmente iba a lanzarse como una versión v3.x, pero se decidió publicarlo como v4.0 al considerarlo un framework de nueva generación.
• Aún está en una etapa temprana y queda mucho trabajo por hacer, pero ya se etiquetó una primera versión alfa pública para comenzar a experimentar.

Un nuevo motor, construido para la velocidad

• El nuevo motor fue reescrito desde cero y ofrece mayor velocidad con menos código.
• Ofrece velocidades de compilación de hasta 10 veces más rápidas; el sitio web de Tailwind CSS puede compilarse en 105 ms y el kit de UI Catalyst en solo 55 ms.
• El tamaño de instalación del nuevo motor se redujo en más de 35% e incluye paquetes nativos pesados como Rust y Lightning CSS.
• Usa Rust para encargarse de las partes más costosas del framework y mantiene el núcleo en TypeScript para ofrecer extensibilidad.
• El nuevo motor depende únicamente de Lightning CSS.
• Se escribió un parser de CSS propio y se diseñaron estructuras de datos que ofrecen una velocidad de análisis 2 veces mayor que PostCSS.

Toolchain integrada

• Tailwind CSS v4 ya no es solo un plugin, sino una herramienta todo en uno para procesar CSS.
• El procesamiento de @import, los vendor prefixes y el soporte para nesting vienen integrados, por lo que no se requiere configuración adicional.
• Convierte funciones modernas de CSS como oklch() y los rangos de media queries a una sintaxis con mejor compatibilidad entre navegadores.
• Seguirán ofreciendo el plugin de PostCSS, pero también están explorando plugins para bundlers, y junto con la primera versión alfa ofrecen un plugin oficial para Vite.

Diseñado para la web moderna

• Tailwind CSS v4 busca construir un framework que se sienta de vanguardia durante los próximos años.
• Usa reglas @layer reales para resolver problemas de especificidad que en el pasado causaban inconvenientes.
• Usa @property para definir con claridad propiedades personalizadas internas y habilitar efectos como degradados de fondo.
• Usa color-mix para facilitar cambios de opacidad en variables de color o ajustar la opacidad de currentColor.
• Incluye soporte directo para container queries en el núcleo, y soporta rangos de container queries mediante las nuevas variantes @min-* y @max-*.

Variantes componibles

• La nueva arquitectura permite componer entre sí variantes que actúan sobre distintos selectores.
• En versiones anteriores, variantes como group-has-* estaban definidas explícitamente en el framework, pero ahora group-* puede componerse con la variante existente has-*.

Detección de contenido sin configuración

• En la versión alfa inicial no se pueden configurar rutas de content, y en la mayoría de los proyectos no será necesario volver a hacerlo.
• Si se usa el plugin de PostCSS o el CLI, Tailwind recorrerá todo el proyecto para encontrar archivos de plantillas.
• Si se usa el plugin de Vite, se apoyará en el grafo de módulos para saber con precisión qué archivos se están usando realmente.

Configuración con prioridad en CSS

• Uno de los objetivos principales de Tailwind CSS v4.0 es que el framework se sienta nativo de CSS y no como una librería de JavaScript.
• Después de instalarlo, se agrega al proyecto usando una declaración @import normal de CSS.
• En lugar de definir toda la personalización en un archivo de configuración de JavaScript, se usan variables CSS.

Qué cambió

• No se toman a la ligera los cambios importantes, pero en v4 hay algunos puntos que ahora se manejan de forma distinta.
• Se eliminaron utilidades que ya no estaban documentadas.
• El plugin de PostCSS y el CLI se ofrecen como paquetes separados.
• Se eliminó el color de borde predeterminado.
• De forma predeterminada, la utilidad ring ahora es un anillo de 1 px que usa currentColor.

Hoja de ruta hacia v4.0

• El nuevo motor fue reescrito desde cero y está totalmente enfocado en la experiencia de desarrollo con un nuevo enfoque de configuración.
• La compatibilidad hacia atrás es considerada muy importante y es una tarea clave de cara a una versión estable de v4.0.
• Esto incluye soporte para archivos de configuración en JavaScript, configuración explícita de rutas de contenido, soporte para otros modos oscuros, soporte para plugins y utilidades personalizadas, configuración de prefijos de clase, soporte para safelists y blocklists, soporte para la configuración important, soporte para la función theme(), soporte para un CLI independiente, entre otros.

Probar la versión alfa

• Ya se etiquetaron algunas versiones alfa y desde hoy se puede empezar a experimentar con ellas en proyectos.
• Si usas la extensión Tailwind CSS IntelliSense, debes cambiar a la versión preliminar desde la página de extensiones de VS Code.
• Si encuentras problemas, piden que los reportes en GitHub.

Usar Vite

• Instala la alfa de Tailwind CSS v4 y el nuevo plugin para Vite.
• Agrega el plugin al archivo vite.config.ts.
• Importa Tailwind en el archivo CSS principal.

Usar PostCSS

• Instala la alfa de Tailwind CSS v4 y el paquete separado del plugin de PostCSS.
• Agrega el plugin al archivo postcss.config.js.
• Importa Tailwind en el archivo CSS principal.

Usar CLI

• Instala la alfa de Tailwind CSS v4 y el paquete separado de CLI.
• Importa Tailwind en el archivo CSS principal.
• Usa la herramienta CLI para compilar el CSS.

Opinión de GN⁺

• La publicación como código abierto de Tailwind CSS v4.0 da a la comunidad de desarrolladores la oportunidad de probar con anticipación nuevas funciones y mejoras. Esto significa que los desarrolladores pueden dar feedback sobre el framework y contribuir a una versión final más estable.
• La mejora de rendimiento del nuevo motor parece reducir de forma importante los tiempos de compilación, por lo que se espera que sea especialmente útil en proyectos grandes o en entornos donde los ciclos de desarrollo rápidos son clave.
• La combinación de Rust y TypeScript refleja un enfoque moderno que busca al mismo tiempo rendimiento y extensibilidad. Las partes escritas en Rust maximizan el rendimiento, mientras que TypeScript permite a los desarrolladores extender y mantener el sistema con mayor facilidad.
• El nuevo enfoque de configuración mediante variables CSS es más amigable con CSS que la configuración tradicional basada en JavaScript, y podría facilitar la integración con sistemas de diseño.
• Aunque estos cambios pueden requerir cierto trabajo de migración para los usuarios actuales, se espera que a largo plazo lleven a una base de código más simple y fácil de mantener.

[GN⁺]

Comentarios de Hacker News

• Tailwind CSS es lo segundo mejor que le ha pasado al frontend; solo Vue 3 lo supera.

  • No hay que batallar para nombrar clases CSS, ni hay CSS duplicado o problemas de clases en conflicto.
  • Todo el código está en un solo archivo, así que puedes visualizar el componente solo con ver el código.
  • No volvería a SCSS, y creo que la combinación de Vue 3, TailwindCSS y Vite es la mejor.

• Como fuerte crítico de Tailwind, todos los anuncios bajo la configuración CSS-first son muy bienvenidos.

  • Puedes aprovechar los design tokens, resets, etc. de Tailwind, y personalizar mediante CSS real.
  • Presenta una nueva forma de usar Tailwind de manera "ligera" sin desechar la arquitectura moderna de CSS, la cascada, e incluso el shadow DOM de los web components.

• CTRL+u muestra un buen ejemplo de la sintaxis.

  • Por ejemplo, se necesita una línea de código intuitiva para crear una caja con esquinas redondeadas y secciones superior e inferior.

• Aún no han trabajado en el CLI independiente, pero sin duda lo terminarán antes del lanzamiento de v4.0.

  • Considerando el resto del anuncio del lanzamiento, supongo que estará construido en Rust.
  • Prefiero que no incluya Node integrado, especialmente si depende de la ahora abandonada herramienta pkg de Vercel.

• Hay muchas mejoras prometedoras.

  • Lo que más me entusiasma es poder controlar el tema mediante CSS en lugar de extenderlo con JS.

• Ojalá Tailwind soporte attributify como unocss.

  • Es mucho más legible para layouts complejos.

• No soy desarrollador frontend, pero mantengo algunos sitios web y todos usan Tailwind.

  • Los mantenedores de Tailwind tienen muy buen instinto para priorizar y un gran sentido del diseño.
  • Tailwind no se entiende hasta que lo usas, pero con cada versión entregan un producto más refinado.
  • En esta versión no ha cambiado demasiado en términos de compatibilidad, pero puede haber más cambios cuando la versión 4 se formalice.
  • La perspectiva del nuevo motor se ve muy bien, y las mejoras en velocidad de compilación siempre son bienvenidas.

• Me pregunto si hay algún buen tutorial/guía sobre Tailwind.

• Me pregunto si alguien usa tailwindcss junto con htmx u otro enfoque hateoas.

  • El hypertext no debería estar relacionado con el estilo, pero algo como Tailwind podría entrar en conflicto con eso.
  • CSS y hateoas encajan perfectamente porque separan el marcado y el estilo, pero me pregunto cómo lo hacen en el caso de algo como tailwindcss.

• Quise usarlo en un proyecto demo, pero import from "node:@tailwindcss/postcss@latest" provoca un error relacionado con el campo exports de package.json.

  • Aun así, la publicación del blog menciona que no hace falta usar postcss-import, pero igual lo sigue incluyendo como dependencia.