Abriendo nuestro progreso en Tailwind CSS v4.0

El verano pasado en Tailwind Connect compartí 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 lanzarse como una versión v3.x, pero aunque estamos comprometidos con la compatibilidad hacia atrás, esto se siente tan claramente como una nueva generación del framework que merece ser v4.0.

Todavía es temprano y tenemos mucho trabajo por hacer, pero hoy estamos abriendo nuestro progreso y etiquetando la primera versión pública v4.0.0-alpha para que puedas empezar a experimentar con ella y ayudarnos a llegar a una versión estable más adelante este año.

Intentaré ser breve para guardar parte de la emoción para la versión estable, pero si te gusta jugar con cosas muy tempranas y experimentales, debería haber suficiente información aquí para empezar.

Un nuevo motor, construido para la velocidad

El nuevo motor es una reescritura desde cero, utilizando todo lo que sabemos ahora sobre el framework 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 hacer una compilación completa del sitio web de Tailwind CSS en 105 ms en lugar de 960 ms, o nuestro kit de interfaz de usuario Catalyst en 55 ms en lugar de 341 ms.
• Huella más pequeña — 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 partes que hemos reescrito en Rust y Lightning CSS.
• Rust donde cuenta — hemos migrado algunas de las partes más costosas y paralelizables del framework a Rust, manteniendo el núcleo del framework en TypeScript para la extensibilidad.
• Una dependencia — lo único de lo 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, haciendo que el análisis sea más del doble de rápido para nosotros de lo que era con PostCSS.

Cadena de herramientas unificada

Tailwind CSS v4 ya no es solo un plugin, es una herramienta todo en uno para procesar tu CSS. Hemos integrado Lightning CSS directamente en el framework para que no tengas que configurar nada sobre tu pipeline de CSS.

• Manejo integrado de @import — no necesitas configurar ni usar una herramienta como postcss-import.
• Prefijos de proveedor integrados — ya no tienes que añadir autoprefixer a tus proyectos.
• Soporte de anidamiento integrado — no se necesitan plugins para aplanar CSS anidado, funciona de forma nativa.
• Transformaciones de sintaxis — las características modernas de CSS como los colores oklch() y los rangos de media query se transpilan a sintaxis con mejor soporte de navegador.

Todavía estamos enviando un plugin de PostCSS, pero también estamos explorando plugins de bundler de primera parte, y estamos enviando un plugin oficial de Vite con esta primera versión alfa que puedes probar hoy.

Diseñado para la web moderna

Estamos mirando hacia el futuro con Tailwind CSS v4 e intentando construir un framework que se sienta de vanguardia durante años.

• Capas de cascada nativas — ahora usamos 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 — usamos @property para definir nuestras propiedades personalizadas internas con tipos y restricciones adecuados, lo que permite hacer cosas como transicionar gradientes de fondo.
• Uso de color-mix para modificadores de opacidad — haciendo 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.
• Container queries en el núcleo — hemos añadido soporte para container queries directamente al núcleo, con nuevas variantes @min-* y @max-* para soportar rangos de container query.

También estamos trabajando en actualizar nuestra paleta de colores con colores de amplia gama, e introduciendo soporte para otras características modernas de CSS 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 estamos introduciendo para v4.

En versiones anteriores, variantes como group-has-* estaban definidas explícitamente en el framework, pero ahora group-* puede componerse con la variante existente has-*, que puede componerse con otras variantes como focus:

<div class="group">
  <div class="group-has-[&:focus]:opacity-100">
  <div class="group-has-focus:opacity-100">
      <!-- ... -->
    </div>
  </div>
</div>

No hay límites para esta componibilidad, 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 tus rutas de content. 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 hayas integrado Tailwind en tu proyecto:

• Usando el plugin de PostCSS o la CLI, Tailwind rastreará todo tu proyecto en busca de archivos de plantilla, usando un montón de heurísticas que hemos incorporado para mantener las cosas rápidas, como no rastrear directorios que están en tu archivo .gitignore, e ignorar formatos de archivo binarios.

• Usando el plugin de Vite, dependemos del grafo de módulos. Esto es increíble porque sabemos exactamente qué archivos estás usando realmente, por lo que es máximamente eficiente, y sin falsos positivos ni negativos. Esperamos expandir este enfoque fuera del ecosistema de Vite con otros plugins de bundler en el futuro.

Introduciremos una forma de configurar explícitamente las rutas de contenido en el futuro, seguro, pero tenemos curiosidad por ver qué tan bien funciona este enfoque automático para todos — está funcionando increíble en nuestros propios proyectos.

Configuración CSS-first

Un objetivo principal de Tailwind CSS v4.0 es hacer que el framework se sienta nativo de CSS, y menos como una librería de JavaScript.

Una vez que lo has instalado, lo añades a tu proyecto con una declaración @import de CSS regular:

@import "tailwindcss";

Y en lugar de configurar todas tus personalizaciones en un archivo de configuración de JavaScript, simplemente usas variables CSS:

@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);
}

La directiva especial @theme le dice a Tailwind que haga disponibles nuevos utilitarios y variantes basados en esas variables, permitiéndote usar clases como 3xl:text-neon-lime en tu marcado:

<div class="max-w-lg 3xl:max-w-xl">
  <h1 class="font-display text-4xl">
    Datos para <span class="text-neon-cyan">enriquecer</span> tu negocio online
  </h1>
</div>

Añadir nuevas variables CSS se comporta como lo hacía extend en versiones anteriores del framework, pero puedes sobrescribir un conjunto completo de variables limpiando el espacio de nombres con sintaxis como --color-*: initial antes de definir todos tus valores personalizados:

@import "tailwindcss";
@theme {
  --color-*: initial;
  --color-gray-50: #f8fafc;
  --color-gray-100: #f1f5f9;
  --color-gray-200: #e2e8f0;
  /* ... */
  --color-green-800: #3f6212;
  --color-green-900: #365314;
  --color-green-950: #1a2e05;
}

Todavía estamos afinando algunas de las convenciones de nomenclatura, pero puedes explorar el tema por defecto en GitHub para ver qué está disponible para personalizar.

Si no quieres limpiar explícitamente el tema por defecto y prefieres empezar desde cero, puedes importar "tailwindcss/preflight" y "tailwindcss/utilities" directamente para omitir la importación del tema por defecto:

@import "tailwindcss";
@import "tailwindcss/preflight" layer(base);
@import "tailwindcss/utilities" layer(utilities);
@theme {
  --color-*: initial; 
  --color-gray-50: #f8fafc;
  --color-gray-100: #f1f5f9;
  --color-gray-200: #e2e8f0;
  /* ... */
  --color-green-800: #3f6212;
  --color-green-900: #365314;
  --color-green-950: #1a2e05;
}

También hacemos que todos tus valores de tema estén disponibles como variables CSS nativas en tu CSS personalizado:

:root {
  --color-gray-50: #f8fafc;
  --color-gray-100: #f1f5f9;
  --color-gray-200: #e2e8f0;
  /* ... */
  --color-green-800: #3f6212;
  --color-green-900: #365314;
  --color-green-950: #1a2e05;
}

Esto hace que sea fácil referenciar cualquiera de tus valores de tema en valores arbitrarios sin necesitar la función theme():

<div class="p-[calc(var(--spacing-6)-1px)]">
  <!-- ... -->
</div>

También hace posible usar tus valores de tema al trabajar con librerías de UI como Framer Motion, sin tener que usar la función resolveConfig():

import { motion } from "framer-motion";
export const MyComponent = () => (
  <motion.div initial={{ y: "var(--spacing-8)" }} animate={{ y: 0 }} exit={{ y: "var(--spacing-8)" }}>
    {children}
  </motion.div>
);

Lo que ha cambiado

No nos tomamos los breaking changes a la ligera, pero hay algunas cosas que estamos haciendo de manera diferente en v4 hasta ahora que vale la pena compartir:

• Utilitarios obsoletos eliminados — hemos eliminado utilitarios que dejamos de documentar hace mucho tiempo como text-opacity-*, flex-grow-*, y decoration-slice en favor de sus reemplazos modernos como text-{color}/*, grow-*, y box-decoration-slice.
• El plugin de PostCSS y la CLI son paquetes separados — el paquete principal tailwindcss ya no los incluye ya que no todos los necesitan, en su lugar deben instalarse por separado usando @tailwindcss/postcss y @tailwindcss/cli.
• Sin color de borde por defecto — el utilitario border solía tener por defecto gray-200, pero ahora tiene por defecto currentColor como lo hace el navegador. Hicimos este cambio para hacer más difícil introducir accidentalmente un gris incorrecto en tu proyecto si estás usando zinc o slate o alguna otra cosa como tu gris principal.
• Los anillos son de 1px por defecto — el utilitario ring solía ser un anillo azul de 3px por defecto, ahora es un anillo de 1px usando currentColor. Nos encontramos usando los utilitarios ring-* como alternativa a los bordes en nuestros proyectos, y usando outline-* para los anillos de foco, por lo que pensamos que hacer las cosas consistentes aquí es un cambio útil.

Hay un puñado de otros cambios de detalles de implementación de muy bajo nivel que podrían surgir de alguna manera en tus proyectos, pero nada deliberado como estos cambios. Si te encuentras con algo sorprendente, háznoslo saber.

Hoja de ruta hacia v4.0

Este nuevo motor es una reescritura desde cero, y hasta ahora nos hemos centrado por completo en esta experiencia de desarrollador reimaginada usando el nuevo enfoque de configuración.

Damos un enorme valor a la compatibilidad hacia atrás, y ahí es donde reside la mayor parte del trabajo antes de que podamos etiquetar una versión estable v4.0 más adelante este año.

• Soporte para archivos de configuración de JavaScript — reintroduciendo la compatibilidad con el clásico archivo tailwind.config.js para facilitar la migración a v4.
• Configuración explícita de la ruta de contenido — haciendo posible decirle a Tailwind exactamente dónde están tus plantillas cuando la detección automática de contenido no es suficiente para tu configuración.
• Soporte para otros modos oscuros — ahora mismo solo soportamos el modo oscuro usando media queries, y todavía necesitamos reimplementar las estrategias de selector y variante.
• Plugins y utilitarios personalizados — no tenemos soporte para plugins, o para escribir utilitarios personalizados que funcionen automáticamente con variantes todavía. Obviamente haremos que esto funcione antes de una versión estable.
• Soporte de prefijo — no hay forma de configurar un prefijo para tus clases todavía, pero lo traeremos de vuelta seguro.
• Listas seguras y listas de bloqueo — no se puede forzar a Tailwind a generar ciertas clases o evitar que genere otras clases todavía.
• Soporte para la configuración important — no hay forma de hacer que todos los utilitarios se generen con !important ahora mismo, pero planeamos implementarlo.
• Soporte para la función theme() — esto no es necesario para nuevos proyectos porque puedes usar var() ahora, pero lo implementaremos por compatibilidad hacia atrás.
• CLI independiente — no hemos trabajado en una CLI independiente para el nuevo motor todavía, pero absolutamente la tendremos antes de la versión v4.0.

Además de eso, estoy seguro de que encontraremos muchos errores que corregir, algunas nuevas y emocionantes características de CSS que incluir, y refinar algunas de estas nuevas APIs que necesitan más pulido antes de un lanzamiento adecuado.

No quiero hacer promesas sobre un cronograma de lanzamiento específico, pero personalmente me encantaría marcar v4.0 como estable antes de que comience la temporada de vacaciones de verano.

Prueba la alfa

Ya hemos etiquetado un par de versiones alfa, y puedes empezar a jugar con ella en tus proyectos hoy mismo.

Si estás usando la extensión Tailwind CSS IntelliSense para VS Code, asegúrate de cambiar a la versión preliminar desde la página de la extensión, y si estás usando nuestro plugin de Prettier, asegúrate de instalar la última versión.

Si encuentras un problema, por favor háznoslo saber en GitHub. Realmente queremos que esto sea a prueba de balas antes de etiquetar una versión estable y reportar cualquier problema que encuentres nos ayudará mucho.

Usando Vite

Instala la alfa de Tailwind CSS v4 y nuestro nuevo plugin de Vite:

npm install tailwindcss@next @tailwindcss/vite@next

Luego añade nuestro plugin a tu archivo vite.config.ts:

import tailwindcss from "@tailwindcss/vite";
import { defineConfig } from "vite";
export default defineConfig({
  plugins: [tailwindcss()],
});

Finalmente, importa Tailwind en tu archivo CSS principal:

@import "tailwindcss";

Usando PostCSS

Instala la alfa de Tailwind CSS v4 y el paquete separado del plugin de PostCSS:

npm install tailwindcss@next @tailwindcss/postcss@next

Luego añade nuestro plugin a tu archivo postcss.config.js:

module.exports = {
  plugins: {
    "@tailwindcss/postcss": {},
  },
};

Finalmente, importa Tailwind en tu archivo CSS principal:

@import "tailwindcss";

Usando la CLI

Instala la alfa de Tailwind CSS v4 y el paquete separado de la CLI:

npm install tailwindcss@next @tailwindcss/cli@next

Luego, importa Tailwind en tu archivo CSS principal:

@import "tailwindcss";

Finalmente, compila tu CSS usando la herramienta CLI:

npx @tailwindcss/cli@next -i app.css -o dist/app.css