Tailwind CSS v4: Diseña Interfaces Modernas sin Salir del HTML

Tailwind CSS v4 es una reescritura completa del framework. Ya no depende de PostCSS ni de un archivo tailwind.config.js. Todo se configura directamente en CSS, es más rápido, más pequeño y más potente.

¿Qué cambia en v4?

1. Engine nuevo (Oxide): 10x más rápido en compilación.
2. Configuración en CSS: Todo vive en tu archivo CSS con @theme.
3. Sin PostCSS: Funciona como plugin de Vite directamente.
4. CSS Layers: Mejor control de especificidad.
5. Container Queries nativas: Responsive basado en el contenedor.

Configuración en Astro/Vite

// astro.config.mjs
import tailwindcss from '@tailwindcss/vite';

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

/* src/styles/global.css */
@import 'tailwindcss';

@theme {
  --color-primary: #e53e3e;
  --color-background: #ffffff;
  --font-sans: 'Inter', system-ui, sans-serif;
  --breakpoint-xs: 475px;
}

Design Tokens con @theme

@theme {
  /* Colores */
  --color-brand-50: #fef2f2;
  --color-brand-500: #ef4444;
  --color-brand-900: #7f1d1d;

  /* Tipografía */
  --font-display: 'Cal Sans', sans-serif;
  --font-body: 'Inter', system-ui, sans-serif;

  /* Sombras */
  --shadow-soft: 0 2px 15px -3px rgba(0, 0, 0, 0.07);
  --shadow-glow: 0 0 15px rgba(239, 68, 68, 0.3);

  /* Animaciones */
  --animate-fade-in: fade-in 0.5s ease-out;
}

@keyframes fade-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

Dark Mode

@custom-variant dark (&:where([data-theme="dark"], [data-theme="dark"] *));

<div class="bg-white dark:bg-gray-900 text-gray-900 dark:text-gray-100">
  <h1 class="text-brand-600 dark:text-brand-400">
    Este texto cambia con el tema
  </h1>
</div>

Patrones de componentes reutilizables

Card con hover effect

<article class="group relative rounded-2xl bg-white dark:bg-gray-800 
  shadow-soft hover:shadow-xl transition-all duration-300 overflow-hidden">
  <div class="aspect-video overflow-hidden">
    <img class="w-full h-full object-cover transition-transform 
      duration-500 group-hover:scale-105" src="..." alt="..." />
  </div>
  <div class="p-6">
    <h2 class="text-xl font-bold group-hover:text-brand-500 transition-colors">
      Título del artículo
    </h2>
  </div>
</article>

Container Queries

<div class="@container">
  <div class="flex flex-col @md:flex-row @lg:grid @lg:grid-cols-3 gap-4">
    <div class="p-4 @sm:p-6 @lg:p-8">
      Contenido responsive basado en el contenedor
    </div>
  </div>
</div>

Conclusión

Tailwind CSS v4 es más que una actualización — es una reimaginación del framework. El nuevo engine es más rápido, la configuración en CSS es más natural, y features como Container Queries hacen que sea la herramienta definitiva para diseñar interfaces modernas.