Tailwind está preparando un nuevo motor de alto rendimiento para Tailwind CSS, diseñado para simplificar la experiencia del desarrollador y aprovechar cómo ha evolucionado la plataforma web en los últimos años.
Todavía es temprano y Tailwind tiene mucho trabajo por hacer, pero recientemente publicaron el progreso y etiquetaron la primera v4.0.0-alfa pública para que puedas comenzar a experimentar con ella..
Un nuevo motor, construido para la velocidad
El nuevo motor es una reescritura desde cero, que utiliza toda la experiencia hasta la fecha sobre el framework para modelar mejor las mejoras, haciendo las cosas más rápidas con mucho menos código.
- Hasta 10 veces más rápido: permitirá crear una compilación completa del sitio web Tailwind CSS en 105ms en lugar de 960ms, o con el kit Catalyst UI en 55ms en lugar de 341ms.
- Peso reducido: el nuevo motor es más de un 35 % más pequeño una vez instalado.
- Rust donde cuenta: se han migrado algunas de las partes más paralelizables del framework a Rust, manteniendo el núcleo del marco en TypeScript para mayor extensibilidad.
- Solo una dependencia: de lo único que depende el nuevo motor es Lightning CSS.
- Analizador personalizado: los desarrolladores del nuevo Tailwind escribieron su propio analizador CSS y diseñaron su propia estructura de datos adaptadas a las nuevas necesidades, lo que ha conseguido que el análisis fuera dos veces más rápido que con PostCSS.
Diseñado para la web moderna
Estamos mirando hacia el futuro con Tailwind CSS v4 y desde el equipo están tratando de construir un framework que se sienta de vanguardia en los próximos años.
- Capas en cascada nativas: ahora utilizamos @layerreglas reales, lo que resuelve un montón de problemas de especificidad con los que hemos luchado en el pasado.
- Propiedades personalizadas definidas explícitamente: utilizamos @property para definir propiedades personalizadas internas con tipos y restricciones adecuados, lo que permite hacer cosas como transición de gradientes de fondo.
- Usar color-mix para modificadores de opacidad: hace que sea más fácil que nunca usar la sintaxis de modificador de opacidad al usar variables CSS para colores, o incluso ajustar la opacidad de currentColor.
- Consultas de contenedores en el núcleo: se agregó soporte para consultas de contenedores directamente al núcleo, con variantes nuevas @min-*para @max-* para rangos de consultas de contenedores.
También se está trabajando para actualizar la paleta de colores con una amplia gama de colores e introducir compatibilidad con otras funciones CSS modernas como @starting-style posicionamiento de anclaje y más.
¿Qué ha cambiado en Tailwind 4.0?
- Se eliminaron utilidades obsoletas: eliminado utilidades que ya no están documentadas hace mucho tiempo, como text-opacity-*, flex-grow-*
- El complemento PostCSS y la CLI son paquetes separados: el paquete principal tailwindcss ya no los incluye porque no todos los necesitan, sino que deben instalarse por separado usando @tailwindcss/postcssy @tailwindcss/cli.
- Sin color de borde predeterminado: la border solía ser predeterminada gray-200, pero ahora tiene el mismo valor predeterminado currentColor que el navegador. Se ha realizado este cambio para que sea más difícil introducir accidentalmente un gris incorrecto en tu proyecto si está utilizando otro.
Hay algunos otros cambios detallados de implementación de muy bajo nivel que podrían surgir de alguna manera en tus proyectos, pero nada deliberado como estos cambios.
Hoja de ruta hacia la versión 4.0
Este nuevo motor es una reescritura desde cero, centrado completamente en esta experiencia de desarrollador reinventada utilizando el nuevo enfoque de configuración.
Le dan un enorme valor a la compatibilidad con versiones anteriores, y ahí es donde radica la mayor parte del trabajo antes de que podamos etiquetar una versión estable v4.0 a finales de este año.
Conclusiones
Tailwind CSS 4 es una herramienta poderosa y versátil para desarrolladores web que buscan optimizar su flujo de trabajo y crear sitios web atractivos y responsivos. Con su rendimiento mejorado, paleta de colores ampliada, personalización mejorada, nuevas clases de utilidades y un enfoque en la accesibilidad, Tailwind CSS 4 se convertirá en una herramienta esencial en el conjunto de herramientas del desarrollador. Ya sea que esté creando un proyecto pequeño o una aplicación a gran escala, Tailwind CSS 4 proporciona las funciones y la flexibilidad necesarias para darle vida a sus diseños web.
Referencia: