Este framework de trabajo para CSS que se ha convertido sin lugar a dudas en el preferido por programadores ya es muy bueno y muy rápido. Sin embargo el equipo no está conforme y han pasado varios años pensando en como hacerlo mejor.
Recientemente han publicado un artículo en inglés donde se comentan los avances que han tenido. Cuando lo leí me voló la cabeza y me vi en la necesidad de compartirlo con ustedes. Pueden ver el artículo original en este link. Pero a continuación menciono las cosas más importante de dicho artículo.
Tailwind V4.0 Alpha
El verano pasado en Tailwind Connect se compartió una vista previa de Oxide, un nuevo motor de alto rendimiento para Tailwind CSS en el que hemos estado trabajando, diseñado para simplificar la experiencia del desarrollador y aprovechar cómo ha evolucionado la plataforma web en los últimos años.
El nuevo motor originalmente iba a distribuirse como una versión v3.x, pero aunque estamos comprometidos con la compatibilidad con versiones anteriores, esto se siente tan claramente como una nueva generación del marco que merece ser v4.0.
Todavía es temprano y tenemos mucho trabajo por hacer, pero hoy estamos publicando nuestro progreso y etiquetando la primera v4.0.0-alfa pública para que puedas comenzar a experimentar con ella y ayudarnos a llegar a una versión estable. después en este año.
Intentaré ser breve para ahorrar algo de emoción por la versión estable, pero si te gusta jugar con cosas muy tempranas y experimentales, aquí debería haber mucha información para ayudarte.
Un nuevo motor, construido para la velocidad
El nuevo motor es una reescritura desde cero, que utiliza todo lo que sabemos ahora sobre el marco para modelar mejor el espacio del problema, haciendo las cosas más rápidas con mucho menos código.
Hasta 10 veces más rápido: podemos crear una compilación completa del sitio web Tailwind CSS en 105 ms en lugar de 960 ms, o nuestro kit Catalyst UI en 55 ms en lugar de 341 ms.
Tamaño más pequeño: el nuevo motor es más de un 35 % más pequeño instalado, incluso con los paquetes nativos más pesados que enviamos, como las piezas que hemos reescrito en Rust y Lightning CSS.
Rust donde cuenta: hemos migrado algunas de las partes más caras y paralelizables del marco a Rust, manteniendo el núcleo del marco en TypeScript para mayor extensibilidad.
Una dependencia: de lo único que depende el nuevo motor es Lightning CSS.
Analizador personalizado: escribimos nuestro propio analizador CSS y diseñamos nuestras propias estructuras de datos adaptadas a nuestras necesidades, lo que hace que el análisis sea dos veces más rápido que con PostCSS.
Cadena de herramientas unificada
Tailwind CSS v4 ya no es solo un complemento, es una herramienta todo en uno para procesar su CSS. Hemos integrado Lightning CSS directamente en el marco para que no tenga que configurar nada acerca de su canal de CSS.
Manejo de @import incorporado: no es necesario instalar ni configurar una herramienta como postcss-import.
Prefijo de proveedor integrado: ya no es necesario agregar prefijo automático a sus proyectos.
Soporte de anidamiento incorporado: no se necesitan complementos para aplanar CSS anidado, funciona de inmediato.
Transformaciones de sintaxis: las funciones CSS modernas, como los colores oklch() y los rangos de consulta de medios, se transpilan a la sintaxis con una mejor compatibilidad con el navegador.
Todavía estamos enviando un complemento PostCSS, pero también estamos explorando complementos de paquetes propios y estamos enviando un complemento oficial de Vite con esta primera versión alfa que puede probar hoy.
Diseñado para la web moderna
Estamos mirando hacia el futuro con Tailwind CSS v4 y tratando de construir un marco que se sienta de vanguardia en los próximos años.
Capas en cascada nativas: ahora utilizamos reglas @layer 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 nuestras propiedades personalizadas internas con tipos y restricciones adecuados, lo que permite hacer cosas como transición de gradientes de fondo.
Usar mezcla de colores para modificadores de opacidad: hace que sea más fácil que nunca usar nuestra 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: hemos agregado soporte para consultas de contenedores directamente al núcleo, con nuevas variantes @min-* y @max-* para admitir rangos de consultas de contenedores.
También estamos trabajando para actualizar nuestra 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.
Variantes componibles
La nueva arquitectura permite componer variantes que actúan sobre otros selectores, como group-, peer-, has-* y una nueva variante not-* que presentamos para v4.
En versiones anteriores, variantes como group-has-* se definían explícitamente en el marco, pero ahora group-* puede componer con la variante has-* existente, que puede componer con otras variantes como focus:
No hay límites para esta capacidad de composición, e incluso puedes escribir cosas como group-not-has-peer-not-data-active:underline si por alguna horrible razón eso es lo que necesitas hacer.
Detección de contenido sin configuración
Notarás que al menos en estas primeras versiones alfa, ni siquiera es posible configurar las rutas de tu contenido. Para la mayoría de los proyectos, nunca más necesitarás hacer esto: Tailwind simplemente encuentra tus archivos de plantilla por ti.
Hacemos esto usando una de dos maneras dependiendo de cómo haya integrado Tailwind en su proyecto:
Usando el complemento PostCSS o la CLI, Tailwind rastreará todo su proyecto en busca de archivos de plantilla, usando un conjunto de heurísticas que hemos incorporado para mantener las cosas rápidas, como no rastrear directorios que están en su archivo .gitignore e ignorar el archivo binario. formatos.
Al utilizar el complemento Vite, nos basamos en el gráfico del módulo. Esto es sorprendente porque sabemos exactamente qué archivos estás usando realmente, por lo que tiene el máximo rendimiento y no presenta falsos positivos ni negativos. Esperamos expandir este enfoque fuera del ecosistema de Vite con otros complementos de paquetes en el futuro.
Seguramente presentaremos una forma de configurar rutas de contenido explícitamente en el futuro, pero tenemos curiosidad por ver qué tan bien funciona este enfoque automático para todos: está funcionando de maravilla en nuestros propios proyectos.
Primera configuración CSS
Un objetivo principal de Tailwind CSS v4.0 es hacer que el marco se sienta nativo de CSS y menos como una biblioteca de JavaScript.
La intención es que la configuración y la ejecución del código sea mucho más rápido. La verdad es que CSS3 ha mejorado un montón en estos años recientes, implementando cosas que sencillamente son increíbles. Cosas que antes solo se podían hacer con Javascript. Desde animaciones hasta selectores mucho más avanzados.
Existirán configuraciones nuevas para cada forma de implementar Tailwind existen. Te recomiendo echar un ojo a la documentación para tener claro lo que cambio y como implementarlo. Ya te digo que migrar un proyecto de Tailwind a su versión 4 será un reto. Pero si entiendes la forma nueva será solo cuestión de agregarlo y luego ir quitando configuraciones anteriores.
Te recuerdo también que estamos con una versión Alpha. Solo lo digo para que lo tengas en cuenta, quizá quieras esperar a que se lance una versión mayor o a que el público la pruebe y de sus opiniones. Esto especialmente si usas Tailwind para tus proyectos desplegados.
¿Qué ha cambiado?
No nos tomamos los cambios importantes a la ligera, pero hay algunas cosas que estamos haciendo de manera diferente en la versión 4 hasta ahora que vale la pena compartir:
Se eliminaron utilidades obsoletas: eliminamos utilidades que dejamos de documentar hace mucho tiempo, como text-opacity-, flex-grow- y decoracion-slice, en favor de sus reemplazos modernos como text-{color}/*, grow- *, y caja-decoración-rebanada.
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/postcss y @tailwindcss/cli.
Sin color de borde predeterminado: la utilidad de borde solía ser gris-200 de forma predeterminada, pero ahora su valor predeterminado es currentColor como lo hace el navegador. Hicimos este cambio para que sea más difícil introducir accidentalmente un gris incorrecto en su proyecto si usa zinc, pizarra u otra cosa como gris principal.
Los anillos son de 1 px de forma predeterminada: la utilidad de anillo solía ser un anillo azul de 3 px de forma predeterminada, ahora es un anillo de 1 px que usa currentColor. Nos encontramos usando las utilidades ring-* como una alternativa a los bordes en nuestros proyectos, y usando contorno-* para los anillos de enfoque, por lo que creemos que hacer las cosas consistentes aquí es un cambio útil.
Hay algunos otros cambios detallados de implementación de muy bajo nivel que podrían surgir de alguna manera en sus proyectos, pero nada deliberado como estos cambios. Si encuentra algo sorprendente, háganoslo saber.
Hoja de ruta hacia la versión 4.0
Este nuevo motor es una reescritura desde cero y hasta ahora nos hemos centrado completamente en esta experiencia de desarrollador reinventada utilizando el nuevo enfoque de configuración.
Le damos 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.
Compatibilidad con archivos de configuración de JavaScript: reintroduciendo la compatibilidad con el archivo clásico tailwind.config.js para facilitar la migración a v4.
Configuración de ruta de contenido explícita: permite indicarle a Tailwind exactamente dónde están sus plantillas cuando la detección automática de contenido no es lo suficientemente buena para su configuración.
Compatibilidad con otros modos oscuros: en este momento solo admitimos el modo oscuro mediante consultas de medios y aún necesitamos volver a implementar el selector y las estrategias de variantes.
Complementos y utilidades personalizadas: todavía no tenemos soporte para complementos ni para escribir utilidades personalizadas que funcionen automáticamente con variantes. Obviamente haremos que esto funcione antes de una versión estable.
Compatibilidad con prefijos: todavía no hay forma de configurar un prefijo para tus clases, pero seguro que lo recuperaremos.
Listas seguras y listas de bloqueo: no pueden obligar a Tailwind a generar ciertas clases ni impedir que genere otras clases todavía.
Compatibilidad con configuraciones importantes: no hay forma de hacer que todas las utilidades se generen con !important en este momento, pero planeamos implementarlo.
Compatibilidad con la función theme(): esto no es necesario para proyectos nuevos porque ahora puedes usar var(), pero lo implementaremos para compatibilidad con versiones anteriores.
CLI independiente: todavía no hemos trabajado en una CLI independiente para el nuevo motor, pero la tendremos antes del lanzamiento v4.0.
Aparte de eso, estoy seguro de que encontraremos muchos errores que corregir, algunas funciones CSS nuevas e interesantes que incorporar y perfeccionar algunas de estas nuevas API que necesitan un poco más de pulido antes de un lanzamiento adecuado.
No quiero hacer promesas sobre un cronograma de lanzamiento específico, pero personalmente me encantaría marcar la versión 4.0 como estable antes de que comience la temporada de vacaciones de verano.
Prueba el alfa
Ya hemos etiquetado un par de versiones alfa y puedes empezar a jugar con ellas en tus proyectos hoy mismo.
Si está utilizando la extensión Tailwind CSS IntelliSense para VS Code, asegúrese de cambiar a la versión preliminar desde la página de la extensión y, si está utilizando nuestro complemento Prettier, asegúrese de instalar la última versión.
Si encuentra un problema, háganoslo saber en GitHub. Realmente queremos que esto sea a prueba de balas antes de etiquetar una versión estable y reportar cualquier problema que encuentre nos ayudará mucho.