Tailwind CSS CSS Design Frontend

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

2025-02-20

13 min

German

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?

Los cambios principales son:

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

Configuración en Astro/Vite

javascript

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

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

css

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

@theme {
  --color-primary: #e53e3e;
  --color-background: #ffffff;
  --color-text-main: #1a1a2e;
  --color-text-muted: #6b7280;
  --font-sans: 'Inter', system-ui, sans-serif;
  --breakpoint-xs: 475px;
}

Ahora bg-primary, text-text-main y font-sans están disponibles automáticamente.

Design Tokens con @theme

@theme reemplaza completamente a tailwind.config.js. Aquí defines todo tu sistema de diseño:

css

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

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

  /* Espaciado personalizado */
  --spacing-18: 4.5rem;
  --spacing-88: 22rem;

  /* 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;
  --animate-slide-up: slide-up 0.3s ease-out;
}

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

@keyframes slide-up {
  from { transform: translateY(10px); opacity: 0; }
  to { transform: translateY(0); opacity: 1; }
}

Usarlos es natural:

html

<h1 class="font-display text-brand-900 dark:text-brand-50 shadow-glow animate-fade-in">
  Bienvenido
</h1>

Dark Mode

Tailwind v4 soporta dark mode con la variante dark: que funciona con la estrategia prefers-color-scheme o con un atributo data-theme:

css

/* Configurar dark mode por atributo */
@custom-variant dark (&:where([data-theme="dark"], [data-theme="dark"] *));

html

<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

html

<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>
    <p class="mt-2 text-text-muted line-clamp-2">
      Descripción breve del contenido...
    </p>
  </div>
</article>

Button system

html

<!-- Primary -->
<button class="px-6 py-3 bg-brand-500 hover:bg-brand-600 text-white 
  font-medium rounded-xl transition-colors shadow-sm hover:shadow-md">
  Acción principal
</button>

<!-- Secondary -->
<button class="px-6 py-3 bg-transparent border-2 border-brand-500 
  text-brand-500 hover:bg-brand-500 hover:text-white 
  font-medium rounded-xl transition-all">
  Acción secundaria
</button>

<!-- Ghost -->
<button class="px-6 py-3 text-brand-500 hover:bg-brand-50 
  dark:hover:bg-brand-900/20 font-medium rounded-xl transition-colors">
  Acción terciaria
</button>

Container Queries

Una de las features más potentes de v4. En lugar de basar el responsive design en el viewport, lo basas en el contenedor padre:

html

<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>

Esto es revolucionario para componentes reutilizables que pueden aparecer en sidebars estrechas o en layouts amplios.

Responsive Design moderno

Tailwind v4 mantiene las variantes responsive pero con breakpoints más modernos:

html

<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-6">
  <!-- Cards del blog -->
</div>

<h1 class="text-2xl sm:text-3xl md:text-4xl lg:text-6xl font-bold">
  Título responsive
</h1>

<section class="px-4 sm:px-6 lg:px-8 max-w-7xl mx-auto">
  <!-- Contenido centrado con padding responsive -->
</section>

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 y el sistema de temas hacen que sea la herramienta definitiva para diseñar interfaces modernas. Si ya usabas Tailwind, la migración es directa. Si no, es el mejor momento para empezar.