Tailwind Css a anunciado su nueva versión 4 del framework con muchas novedades, mejoras de rendimiento y mejor experiencia de desarrollo. En esta revisión veremos lo más relevante que han anunciado.
Si quieres leer en detalle todas las novedades te dejo el enlace al post oficial de los cambios.
https://tailwindcss.com/blog/tailwindcss-v4-alpha
Índice
- Nuevo motor más rápido y mejor
- No más plugins
- Componer Variantes
- Adiós tailwind.config.js
- Conclusión
Nuevo motor más rápido y mejor
Ahora tendrán un nuevo motor que estará escrito en Rust y Typescript de manera que usarán el primer lenguaje para las partes que requieran más velocidad. Gracias a esto, ahora Tailwind será 10 veces más rápido en esta versión. También el tamaño será un 35% más pequeño una vez instalado.
Por otra parte, el equipo de Tailwind ha creado un parseador propio de CSS, lo que ahora hace que sea más rápido que con PostCss.
Con todo esto ahora, lo único que depende del motor de Tailwind es de Lightning Css.
No más plugins
Como la integración de Lightning Css en el motor de Tailwind, ahora ya no hará falta añadir el paquete autoprefixer ni postcss-import, tampoco plugins para anidamientos, ya que lo tendrá incorporado.
Aparte de esto se incorpora la función OKLCH(), la nueva función de colores que incorporará CSS 4.
Componer Variantes
En esta nueva versión hay una mejora a la hora de manejar las variantes group-*, peer-*, has-* y una nueva not-*. Ahora será mucho más sencillo ya que antes, si queríamos usarlas, hacíamos algo como lo siguiente.
<div class="group"> <div class="group-has-[&:focus]:opacity-100"> </div>
Esto comprobaba si el grupo tiene un focus y, si está focus se le añade una opacidad. Pero ahora se ha mejorado a nivel de sintaxis, ya que no hará falta usar los corchetes y no tendremos límites para componer.
<div class="group"> <div class="group-has-focus:opacity-100"></div> </div>
Adiós tailwind.config.js
El equipo de Tailwind ha estado trabajando para que cada vez la experiencia de desarrollo sea más nativa, de manera que ahora las configuraciones las haremos directamente en nuestro fichero .css.
Simplemente, tendremos que importar Tailwindcss en nuestro fichero CSS principal.
@import "tailwindcss";
Y si queremos configurar colores, tamaños, breakpoints, etc., lo haremos usando variables CSS dentro de una directiva llamada @theme de manera que nos quedaría algo así:
@import "tailwindcss";
@theme {
--font-family-display: "Satoshi", "sans-serif";
--breakpoint-3xl: 1920px;
--color-neon-pink: oklch(71.7% 0.25 360);
--color-neon-lime: oklch(91.5% 0.258 129);
--color-neon-cyan: oklch(91.3% 0.139 195.8);
}
Ahora simplemente en nuestro código lo usaremos accediendo directamente de manera normal como hemos hecho siempre con las versiones anteriores.
<span class="text-neon-cyan">Tailwind CSS 4</span>
A pesar de este cambio Tailwind CSS 4 seguirá siendo compatible con el fichero de compatibilidad tailwind.config.js para facilitar la migración.
Conclusión
Con estas propuestas de Tailwind CSS 4 vemos que presenta mejoras significativas que optimizan tanto el rendimiento como la experiencia del desarrollador. Ahora dará la sensación de que estamos trabajando más directamente con CSS gracias a su nueva configuración nativa.
A día de hoy sigue habiendo mucho debate con Tailwind pero lo que está claro es que es un proyecto que busca seguir mejorando y centrándose en el desarrollo. Pero como cualquiera herramienta hay que saber cuando usarla y cuando no. No siempre usar Tailwind es lo mejor y tampoco es lo peor.
¡Muchas gracias! 🚀
