DocsBlogShowcasePlus

Tailwind CSS v4.0

Adam Wathan
Tailwind CSS v4.0

¡Carajo, realmente está listo! — acabamos de etiquetar Tailwind CSS v4.0.

Tailwind CSS v4.0 es una versión completamente nueva del framework optimizada para rendimiento y flexibilidad, con una experiencia de configuración y personalización reimaginada, y aprovechando al máximo los últimos avances que la plataforma web tiene para ofrecer.

Empieza a usar Tailwind CSS v4.0 hoy instalándolo en un nuevo proyecto, o jugando con él directamente en el navegador en Tailwind Play.

Para proyectos existentes, hemos publicado una guía de actualización completa y construido una herramienta de actualización automatizada para que puedas obtener la última versión de la manera más rápida y sencilla posible.

Nuevo motor de alto rendimiento

Tailwind CSS v4.0 es una reescritura completa del framework, tomando todo lo que hemos aprendido sobre la arquitectura a lo largo de los años y optimizándolo para ser lo más rápido posible.

Al hacer benchmarking en nuestros propios proyectos, hemos encontrado que las reconstrucciones completas son más de 3.5 veces más rápidas, y las compilaciones incrementales son más de 8 veces más rápidas.

Aquí están los tiempos de compilación medianos que vimos cuando hicimos benchmark de Tailwind CSS v4.0 contra Catalyst:

v3.4v4.0Mejora
Compilación completa378ms100ms3.78x
Recompilación incremental con nuevo CSS44ms5ms8.8x
Recompilación incremental sin nuevo CSS35ms192µs182x

La mejora más impresionante está en las compilaciones incrementales que en realidad no necesitan compilar ningún CSS nuevo — estas compilaciones son más de 100 veces más rápidas y se completan en microsegundos. Y cuanto más tiempo trabajes en un proyecto, más te encontrarás con estas compilaciones porque solo estás usando clases que ya has usado antes, como flex, col-span-2, o font-bold.

Diseñado para la web moderna

La plataforma ha evolucionado mucho desde que lanzamos Tailwind CSS v3.0, y v4.0 aprovecha al máximo muchas de estas mejoras.

CSS
@layer theme, base, components, utilities;
@layer utilities {
  .mx-6 {
    margin-inline: calc(var(--spacing) * 6);
  }
  .bg-blue-500\/50 {
    background-color: color-mix(in oklab, var(--color-blue-500) 50%, transparent);
  }
}
@property --tw-gradient-from {
  syntax: "<color>";
  inherits: false;
  initial-value: #0000;
}

Estamos aprovechando características CSS modernas como:

  • Cascade layers nativas — dándonos más control que nunca sobre cómo interactúan las diferentes reglas de estilo entre sí.
  • Custom properties registradas — haciendo posible hacer cosas como animar gradientes, y mejorando significativamente el rendimiento en páginas grandes.
  • color-mix() — que nos permite ajustar la opacidad de cualquier valor de color, incluyendo variables CSS y currentColor.
  • Propiedades lógicas — simplificando el soporte RTL y reduciendo el tamaño de tu CSS generado.

Muchas de estas características incluso han simplificado Tailwind internamente, reduciendo la superficie para errores y haciendo que el framework sea más fácil de mantener para nosotros.

Instalación simplificada

Hemos simplificado muchísimo el proceso de configuración en v4.0, reduciendo el número de pasos y eliminando mucho boilerplate.

1. Instala Tailwind CSS
npm i tailwindcss @tailwindcss/postcss;
2. Agrega el plugin PostCSS
export default {
  plugins: ["@tailwindcss/postcss"],
};
3. Importa Tailwind en tu CSS
@import "tailwindcss";

Con las mejoras que hemos hecho a este proceso para v4.0, Tailwind se siente más ligero que nunca:

  • Solo una línea de CSS — no más directivas @tailwind, solo agrega @import "tailwindcss" y empieza a construir.
  • Configuración cero — puedes empezar a usar el framework sin configurar nada, ni siquiera las rutas a tus archivos de plantilla.
  • No se requieren plugins externos — empaquetamos las reglas @import por ti de forma predeterminada, y usamos Lightning CSS internamente para prefijos de proveedor y transformaciones de sintaxis moderna.

Claro que solo pasas por esto una vez por proyecto, pero se acumula cuando empiezas y abandonas un proyecto paralelo diferente cada fin de semana.

Plugin de Vite de primera mano

Si eres usuario de Vite, ahora puedes integrar Tailwind usando @tailwindcss/vite en lugar de PostCSS:

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

Tailwind CSS v4.0 es increíblemente rápido cuando se usa como un plugin de PostCSS, pero obtendrás un rendimiento aún mejor usando el plugin de Vite.

Detección automática de contenido

¿Sabes cómo siempre tenías que configurar ese molesto array content en Tailwind CSS v3? En v4.0, ideamos un montón de heurísticas para detectar todo eso automáticamente para que no tengas que configurarlo en absoluto.

Por ejemplo, ignoramos automáticamente cualquier cosa en tu archivo .gitignore para evitar escanear dependencias o archivos generados que no están bajo control de versiones:

.gitignore
/node_modules
/coverage
/.next/
/build

También ignoramos automáticamente todas las extensiones binarias como imágenes, videos, archivos .zip y más.

Y si alguna vez necesitas agregar explícitamente una fuente que está excluida por defecto, siempre puedes agregarla con la directiva @source, directamente en tu archivo CSS:

CSS
@import "tailwindcss";
@source "../node_modules/@my-company/ui-lib";

La directiva @source utiliza las mismas heurísticas internamente, por lo que excluirá tipos de archivos binarios, por ejemplo, también, sin que tengas que especificar explícitamente todas las extensiones a escanear.

Aprende más en nuestra nueva documentación sobre detectar clases en archivos fuente.

Soporte de importación incorporado

Antes de v4.0, si querías incluir otros archivos CSS usando @import, tenías que configurar otro plugin como postcss-import para que lo manejara por ti.

Ahora manejamos esto de forma predeterminada, así que no necesitas ninguna otra herramienta:

postcss.config.js
export default {
  plugins: [
    "postcss-import",
    "@tailwindcss/postcss",
  ],
};

Nuestro sistema de importación está diseñado específicamente para Tailwind CSS, por lo que también hemos podido hacerlo aún más rápido integrándolo estrechamente con nuestro motor.

Configuración CSS-primero

Uno de los cambios más grandes en Tailwind CSS v4.0 es el cambio de configurar tu proyecto en JavaScript a configurarlo en CSS.

En lugar de un archivo tailwind.config.js, puedes configurar todas tus personalizaciones directamente en el archivo CSS donde importas Tailwind, dándote un archivo menos del que preocuparte en tu proyecto:

CSS
@import "tailwindcss";
@theme {
  --font-display: "Satoshi", "sans-serif";
  --breakpoint-3xl: 1920px;
  --color-avocado-100: oklch(0.99 0 0);
  --color-avocado-200: oklch(0.98 0.04 113.22);
  --color-avocado-300: oklch(0.94 0.11 115.03);
  --color-avocado-400: oklch(0.92 0.19 114.08);
  --color-avocado-500: oklch(0.84 0.18 117.33);
  --color-avocado-600: oklch(0.53 0.12 118.34);
  --ease-fluid: cubic-bezier(0.3, 0, 0, 1);
  --ease-snappy: cubic-bezier(0.2, 0, 0, 1);
  /* ... */
}

La nueva configuración CSS-primero te permite hacer casi todo lo que podías hacer en tu archivo tailwind.config.js, incluyendo configurar tus tokens de diseño, definir utilidades y variantes personalizadas, y más.

Para aprender más sobre cómo funciona todo, lee la nueva documentación de variables de tema.

Variables de tema CSS

Tailwind CSS v4.0 toma todos tus tokens de diseño y los pone a disposición como variables CSS por defecto, para que puedas hacer referencia a cualquier valor que necesites en tiempo de ejecución usando solo CSS.

Usando el ejemplo @theme de antes, todos estos valores se agregarán a tu CSS como custom properties regulares:

CSS Generado
:root {
  --font-display: "Satoshi", "sans-serif";
  --breakpoint-3xl: 1920px;
  --color-avocado-100: oklch(0.99 0 0);
  --color-avocado-200: oklch(0.98 0.04 113.22);
  --color-avocado-300: oklch(0.94 0.11 115.03);
  --color-avocado-400: oklch(0.92 0.19 114.08);
  --color-avocado-500: oklch(0.84 0.18 117.33);
  --color-avocado-600: oklch(0.53 0.12 118.34);
  --ease-fluid: cubic-bezier(0.3, 0, 0, 1);
  --ease-snappy: cubic-bezier(0.2, 0, 0, 1);
  /* ... */
}

Esto facilita la reutilización de estos valores como estilos en línea o pasarlos a bibliotecas como Motion para animarlos.

Valores y variantes de utilidades dinámicas

Hemos simplificado la forma en que funcionan muchas utilidades y variantes en v4.0 permitiéndoles efectivamente aceptar ciertos tipos de valores arbitrarios, sin necesidad de ninguna configuración o de recurrir a la sintaxis de valores arbitrarios.

Por ejemplo, en Tailwind CSS v4.0 puedes crear grids de cualquier tamaño de forma predeterminada:

HTML
<div class="grid grid-cols-15">
  <!-- ... -->
</div>

También puedes apuntar a atributos de datos booleanos personalizados sin necesidad de definirlos:

HTML
<div data-current class="opacity-75 data-current:opacity-100">
  <!-- ... -->
</div>

Incluso las utilidades de espaciado como px-*, mt-*, w-*, h-*, y más ahora se derivan dinámicamente de una única variable de escala de espaciado y aceptan cualquier valor de forma predeterminada:

CSS Generado
@layer theme {
  :root {
    --spacing: 0.25rem;
  }
}
@layer utilities {
  .mt-8 {
    margin-top: calc(var(--spacing) * 8);
  }
  .w-17 {
    width: calc(var(--spacing) * 17);
  }
  .pr-29 {
    padding-right: calc(var(--spacing) * 29);
  }
}

La herramienta de actualización que lanzamos junto con v4.0 incluso simplificará la mayoría de estas utilidades por ti automáticamente si nota que estás usando un valor arbitrario que ya no es necesario.

Paleta de colores P3 modernizada

Hemos actualizado toda la paleta de colores predeterminada de rgb a oklch, aprovechando la gama más amplia para hacer los colores más vívidos en lugares donde antes estábamos limitados por el espacio de color sRGB.

Hemos intentado mantener el equilibrio entre todos los colores igual que en v3, así que aunque hemos actualizado todo, no debería sentirse como un cambio disruptivo al actualizar tus proyectos existentes.

Container queries

Hemos incorporado el soporte de container query al núcleo para v4.0, así que ya no necesitas el plugin @tailwindcss/container-queries:

HTML
<div class="@container">
  <div class="grid grid-cols-1 @sm:grid-cols-3 @lg:grid-cols-4">
    <!-- ... -->
  </div>
</div>

También hemos agregado soporte para container queries de max-width usando la nueva variante @max-*:

HTML
<div class="@container">
  <div class="grid grid-cols-3 @max-md:grid-cols-1">
    <!-- ... -->
  </div>
</div>

Al igual que nuestras variantes regulares de breakpoint, también puedes apilar variantes @min-* y @max-* para definir rangos de container query:

HTML
<div class="@container">
  <div class="flex @min-md:@max-xl:hidden">
    <!-- ... -->
  </div>
</div>

Aprende más en nuestra nueva documentación de container queries.

Nuevas utilidades de transformación 3D

Finalmente hemos agregado APIs para hacer transformaciones 3D, como rotate-x-*, rotate-y-*, scale-z-*, translate-z-*, y toneladas más.

Michael Foster

Impulsa tu tasa de conversión

<div class="perspective-distant">
  <article class="rotate-x-51 rotate-z-43 transform-3d ...">
    <!-- ... -->
  </article>
</div>

Consulta la documentación actualizada de transform-style, rotate, perspective, y perspective-origin para empezar.

APIs de gradientes expandidas

Hemos agregado un montón de nuevas características de gradiente en v4.0, para que puedas lograr efectos aún más sofisticados sin tener que escribir ningún CSS personalizado.

Ángulos de gradiente lineal

Los gradientes lineales ahora admiten ángulos como valores, por lo que puedes usar utilidades como bg-linear-45 para crear un gradiente en un ángulo de 45 grados:

<div class="bg-linear-45 from-indigo-500 via-purple-500 to-pink-500"></div>

Puede que notes que también hemos renombrado bg-gradient-* a bg-linear-* — ¡pronto verás por qué!

Modificadores de interpolación de gradiente

Hemos agregado la capacidad de controlar el modo de interpolación de color para gradientes usando un modificador, por lo que una clase como bg-linear-to-r/srgb interpola usando sRGB, y bg-linear-to-r/oklch interpola usando OKLCH:

<div class="bg-linear-to-r/srgb from-indigo-500 to-teal-400">...</div>
<div class="bg-linear-to-r/oklch from-indigo-500 to-teal-400">...</div>

Usar espacios de color polares como OKLCH o HSL puede llevar a gradientes mucho más vívidos cuando los colores from-* y to-* están muy separados en la rueda de colores. Estamos usando OKLAB por defecto en v4.0 pero siempre puedes interpolar usando un espacio de color diferente agregando uno de estos modificadores.

Gradientes cónicos y radiales

Hemos agregado nuevas utilidades bg-conic-* y bg-radial-* para crear gradientes cónicos y radiales:

<div class="size-24 rounded-full bg-conic/[in_hsl_longer_hue] from-red-600 to-red-600"></div>
<div class="size-24 rounded-full bg-radial-[at_25%_25%] from-white to-zinc-900 to-75%"></div>

Estas nuevas utilidades funcionan junto con las utilidades existentes from-*, via-*, y to-* para permitirte crear gradientes cónicos y radiales de la misma manera que creas gradientes lineales, e incluyen modificadores para establecer el método de interpolación de color y soporte de valores arbitrarios para controlar detalles como la posición del gradiente.

Soporte @starting-style

La nueva variante starting agrega soporte para la nueva característica CSS @starting-style, haciendo posible la transición de propiedades de elementos cuando un elemento se muestra por primera vez:

<div>
  <button popovertarget="my-popover">Buscar actualizaciones</button>
  <div popover id="my-popover" class="transition-discrete starting:open:opacity-0 ...">
    <!-- ... -->
  </div>
</div>

Con @starting-style, finalmente puedes animar elementos a medida que aparecen en la página sin necesidad de JavaScript en absoluto. El soporte de navegador probablemente aún no esté del todo listo para la mayoría de los equipos, ¡pero nos estamos acercando!

Variante not-*

Hemos agregado una nueva variante not-* que finalmente agrega soporte para la pseudo-clase CSS :not():

HTML
<div class="not-hover:opacity-75">
  <!-- ... -->
</div>
CSS
.not-hover\:opacity-75:not(*:hover) {
  opacity: 75%;
}
@media not (hover: hover) {
  .not-hover\:opacity-75 {
    opacity: 75%;
  }
}

Hace doble función y también te permite negar media queries y consultas @supports:

HTML
<div class="not-supports-hanging-punctuation:px-4">
  <!-- ... -->
</div>
CSS
.not-supports-hanging-punctuation\:px-4 {
  @supports not (hanging-punctuation: var(--tw)) {
    padding-inline: calc(var(--spacing) * 4);
  }
}

Consulta la nueva documentación not-* para aprender más.

Aún más utilidades y variantes nuevas

Hemos agregado un montón de otras nuevas utilidades y variantes a v4.0 también, incluyendo:

  • Nuevas utilidades inset-shadow-* y inset-ring-* — haciendo posible apilar hasta cuatro capas de box shadows en un solo elemento.
  • Nuevas utilidades field-sizing — para redimensionar automáticamente textareas sin escribir una sola línea de JavaScript.
  • Nuevas utilidades color-scheme — para que finalmente puedas deshacerte de esas feas barras de desplazamiento claras en modo oscuro.
  • Nuevas utilidades font-stretch — para ajustar cuidadosamente fuentes variables que admiten diferentes anchos.
  • Nueva variante inert — para estilizar elementos no interactivos marcados con el atributo inert.
  • Nuevas variantes nth-* — para hacer cosas realmente ingeniosas de las que eventualmente te arrepentirás.
  • Nueva variante in-* — que es muy parecida a group-*, pero sin la necesidad de la clase group.
  • Soporte para :popover-open — usando la variante open existente para apuntar también a popovers abiertos.
  • Nueva variante descendiente — para estilizar todos los elementos descendientes, para bien o para mal.

Consulta la documentación relevante para todas estas características para aprender más.

Y eso es todo — eso es Tailwind CSS v4.0. Han sido años de trabajo para llegar a este punto, pero todos estamos extremadamente orgullosos de este lanzamiento y no podemos esperar a ver lo que construyes con él.

Échale un vistazo, juega con él, tal vez incluso rómpelo, y definitivamente dinos lo que piensas.

Solo que no haya informes de errores hasta mañana, por favor — déjanos al menos disfrutar de una cena de equipo de celebración y tal vez relajarnos un poco en el jacuzzi de este hotel creyendo que de alguna manera realmente entregamos software impecable.

Recibe todas nuestras actualizaciones directamente en tu bandeja de entrada.
Suscríbete a nuestro boletín.

Copyright © 2025 Tailwind Labs Inc.·Política de Marca Registrada