Novedades

Mejora expectacular del rendimiento

Tailwind CSS v4.0 es una reescritura completa diseñada para maximizar el rendimiento. En las pruebas internas realizadas, se han observado mejoras significativas en los tiempos de compilación, logrando que las reconstrucciones completas sean 3,5 veces más rápidas y las compilaciones incrementales 8 veces más rápidas.

A continuación, se detallan los tiempos promedio observados al comparar Tailwind CSS v4.0

	Versión 3.4	Versión beta v4.0	Mejora
Construcción completa	378 ms	100 ms	3,78x
Reconstrucción incremental con nuevo CSS	44 ms	5 ms	8,8x
Reconstrucción incremental sin CSS nuevo	35 ms	192 µs	182x

La mejora más destacada se encuentra en las compilaciones incrementales que no requieren compilar nuevo CSS, alcanzando velocidades hasta 100 veces más rápidas y completándose en microsegundos. Este beneficio es especialmente notable en proyectos avanzados, donde las clases más utilizadas, como flex, col-span-2 o font-bold, ya han sido compiladas previamente. A medida que avanzas en el desarrollo, estas compilaciones rápidas se vuelven cada vez más frecuentes, mejorando significativamente la eficiencia del flujo de trabajo.

Es importante recordar que WindPres puede regenar el archivo de cache cada vez que se guarda una página, aprovechandose de esta mejora sustancial

Instalación

Tailwind CSS 4.0 introduce un enfoque simplificado para su configuración, permitiendo a los desarrolladores manejar la totalidad de la personalización desde un único archivo CSS. La configuración básica requiere únicamente incluir la siguiente línea en tu archivo CSS principal:

@import "tailwindcss";

Aunque Tailwind CSS 4.0 ofrece una amplia gama de opciones de configuración, en esta documentación nos centraremos exclusivamente en las características y configuraciones relevantes para su uso en entornos WordPress. Esto asegura una integración fluida y optimizada para proyectos en esta plataforma.

La configuración inicial presentada anteriormente es la más básica y mínima necesaria para comenzar a trabajar. Sin embargo, Tailwind permite ajustes adicionales para satisfacer necesidades específicas. Por ejemplo, si deseas desactivar Preflight, el conjunto de estilos de normalización incluido por defecto, puedes optar por cargar Tailwind de forma modular utilizando la configuración siguiente:

@layer theme, base, components, utilities;

@import 'tailwindcss/theme.css' layer(theme);
@import 'tailwindcss/preflight.css' layer(base);
@import 'tailwindcss/utilities.css' layer(utilities);

Modularidad

Tailwind CSS 4.0 facilita la creación de una estructura modular al permitir importar archivos CSS de manera sencilla. Gracias a las mejoras integradas en esta versión, ya no es necesario configurar un plugin adicional de postprocesamiento, ya que Tailwind incluye esta funcionalidad de forma automática. Esto no solo simplifica la configuración inicial, sino que también mejora la mantenibilidad del proyecto al dividir los estilos en partes más manejables.

Dividir tu archivo de configuración CSS en módulos es especialmente útil en proyectos grandes, donde mantener un único archivo puede resultar en un mantenimiento complejo y propenso a errores. Al organizar los estilos por funcionalidades o características, podrás gestionar y actualizar los estilos de manera más eficiente.

A continuación, un ejemplo básico de cómo estructurar un archivo modular utilizando Tailwind 4.0:

@layer theme, base, components, utilities;

@import 'tailwindcss/theme.css' layer(theme);
@import 'tailwindcss/preflight.css' layer(base);
@import 'tailwindcss/utilities.css' layer(utilities);

/* Importa las capas de diferentes archivos */
@import './base.css';
@import './components.css';
@import './more-components.css';
@import './utilities.css';