Tailwind CSS 4: Novedades y Configuración

Tailwind CSS 4 ha llegado con mejoras significativas en rendimiento, nuevas utilidades y cambios en su configuración. En este artículo, exploraremos las novedades más destacadas y cómo configurar esta nueva versión en tus proyectos. Instalación y configuración simplificada La instalación ahora es más sencilla que nunca. Puedes instalar Tailwind CSS 4 con: Instalación de Tailwind CSS como un Plugin de PostCSS Instalar Tailwind CSS como un plugin de PostCSS es la forma más fluida de integrarlo con frameworks como Next.js y Angular. 1. Instalar Tailwind CSS Instala tailwindcss, @tailwindcss/postcss y postcss a través de npm. npm install tailwindcss @tailwindcss/postcss postcss 2. Agregar Tailwind a la configuración de PostCSS Añade @tailwindcss/postcss en tu archivo postcss.config.mjs o donde tengas configurado PostCSS en tu proyecto. export default { plugins: { "@tailwindcss/postcss": {}, } } 3. Importar Tailwind CSS Agrega una directiva @import en tu archivo CSS para importar Tailwind CSS. @import "tailwindcss"; 4. Iniciar el proceso de construcción Ejecuta el proceso de construcción con npm run dev o el comando que tengas configurado en tu package.json. npm run dev 5. Comenzar a usar Tailwind en tu HTML Asegúrate de que tu CSS compilado esté incluido en el (tu framework podría encargarse de esto automáticamente), y luego empieza a utilizar las clases de utilidad de Tailwind para dar estilo a tu contenido. ¡Hola mundo! Instalación de Tailwind CSS como un Plugin de Vite Si usas Vite, puedes instalar Tailwind CSS como un plugin de forma sencilla, ideal para frameworks como Laravel, SvelteKit, React Router, Nuxt y SolidJS. 1. Instalar Tailwind CSS Instala tailwindcss y @tailwindcss/vite con npm: npm install tailwindcss @tailwindcss/vite 2. Configurar el plugin en Vite Agrega @tailwindcss/vite en tu archivo vite.config.ts: import { defineConfig } from 'vite' import tailwindcss from '@tailwindcss/vite' export default defineConfig({ plugins: [tailwindcss()], }) 3. Importar Tailwind CSS Como en la configuración con PostCSS, importa Tailwind en tu archivo CSS: @import "tailwindcss"; 4. Iniciar el proceso de construcción Ejecuta el servidor de desarrollo con: npm run dev Con esto, Tailwind CSS quedará integrado en tu proyecto con Vite de manera eficiente. Migración desde versiones anteriores Si ya tienes un proyecto con Tailwind CSS y deseas actualizar a la versión 4, puedes utilizar el asistente de migración oficial ejecutando: npx @tailwindcss/upgrade@next Este comando te ayudará a actualizar automáticamente tu configuración y clases a la nueva versión, asegurando compatibilidad con los cambios recientes. Configuración basada en CSS Uno de los mayores cambios en Tailwind CSS v4.0 es la transición de la configuración en JavaScript a una configuración directamente en CSS. En lugar de usar un archivo tailwind.config.js, ahora puedes definir todas tus personalizaciones directamente en el archivo CSS donde importas Tailwind, eliminando la necesidad de un archivo adicional en tu proyecto: @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); /* ... */ } Esta nueva configuración basada en CSS te permite hacer prácticamente todo lo que antes hacías en tailwind.config.js, incluyendo la definición de tokens de diseño, utilidades personalizadas, variantes y más. Clases utilitarias renombradas Algunas clases han sido renombradas para mayor coherencia y facilidad de uso. Por ejemplo: Se renombraron las siguientes utilidades para hacerlas más consistentes y predecibles: Actualización de escalas para shadow, radius y blur Hemos renombrado las escalas predeterminadas de sombras, radios y desenfoques para garantizar que cada utilidad tenga un valor nombrado. Las versiones sin sufijo aún funcionan por compatibilidad con versiones anteriores, pero las utilidades -sm se verán diferentes a menos que se actualicen a sus respectivas versiones -xs. Para actualizar tu proyecto con estos cambios, reemplaza las utilidades de la versión 3 por las de la versión 4: Color de borde predeterminado En la versión 3, las utilidades border-* y divide-* usaban por defecto el color gray-200 configurado en tu proyecto. En la versión 4, esto ha cambiado a currentColor para hacer que Tailwind sea menos restrictivo y se alinee con los valores predeterminados del navegador. Para actualizar tu proyecto, asegúrate de especificar un color en cualquier lugar donde utilice

export default {
  plugins: {
    "@tailwindcss/postcss": {},
  }
}

   charset="UTF-8">
   name="viewport" content="width=device-width, initial-scale=1.0">
   href="/dist/styles.css" rel="stylesheet">


   class="text-3xl font-bold underline">
    ¡Hola mundo!
  

import { defineConfig } from 'vite'
import tailwindcss from '@tailwindcss/vite'

export default defineConfig({
  plugins: [tailwindcss()],
})

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

 class="shadow-sm" />


 class="shadow-xs" />


 class="shadow" />


 class="shadow-sm" />

 class="border border-gray-200 px-2 py-3 ...">
  

Alternativamente, puedes agregar estos estilos base a tu proyecto para mantener el comportamiento de la versión 3:

@layer base {
  *,
  ::after,
  ::before,
  ::backdrop,
  ::file-selector-button {
    border-color: var(--color-gray-200, currentColor);
  }
}

Agregar utilidades personalizadas

En la versión 3, cualquier clase personalizada que definieras dentro de @layer utilities se consideraba una verdadera clase de utilidad en Tailwind y funcionaba automáticamente con variantes como hover, focus o lg.

En la versión 4, ahora usamos capas nativas de CSS y ya no modificamos la regla @layer. Como reemplazo, hemos introducido la API @utility:

/* Versión 3 */
@layer utilities {
  .tab-4 {
    tab-size: 4;
  }
}

/* Versión 4 */
@utility tab-4 {
  tab-size: 4;
}

Este cambio permite que las utilidades personalizadas sigan funcionando sin interferir con las capas nativas de CSS.

Nueva paleta de colores

Se han añadido colores más vibrantes y equilibrados en la nueva versión,
actualizando toda la paleta de colores predeterminada de RGB a OKLCH, aprovechando el gama de colores más amplia para hacer que los colores sean más vivos en comparación con las limitaciones previas del espacio de color sRGB.

Container Queries

Tailwind CSS 4 incorpora soporte para container queries, lo que permite diseñar componentes más flexibles basados en el tamaño de su contenedor y no solo en el viewport.

 class="@container">
   class="grid grid-cols-1 @sm:grid-cols-3 @lg:grid-cols-4">