En QvaLabs somos grandes fans de Astro como framework para sitios estáticos y contenido dinámico. Su filosofía de “cero JavaScript por defecto” se alinea perfectamente con nuestra búsqueda de rendimiento y simplicidad.

Con la llegada de Tailwind CSS v4, la integración se ha vuelto aún más elegante gracias al plugin nativo de Vite.

La configuración

Para empezar, solo necesitas instalar dos dependencias:

bun add tailwindcss @tailwindcss/vite

Luego, en tu astro.config.mjs:

import tailwindcss from '@tailwindcss/vite';

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

Y en tu archivo CSS principal, simplemente:

@import "tailwindcss";

No más archivos tailwind.config.js, no más PostCSS. Tailwind v4 detecta automáticamente tus clases y genera solo el CSS que usas.

Temas con @theme

Una de las novedades más potentes de Tailwind v4 es el sistema de temas nativo con @theme. Olvídate de extender el objeto theme en un archivo de configuración:

@theme {
  --color-primary: #00b4d8;
  --color-surface: #03045e;
  --font-heading: "Space Grotesk", sans-serif;
}

Conclusión

Tailwind CSS v4 representa un salto cualitativo en la experiencia de desarrollo. La integración directa con Vite, el sistema de temas en CSS puro y la generación de estilos bajo demanda hacen que sea la opción ideal para proyectos Astro modernos.

En QvaLabs hemos adoptado esta combinación para todos nuestros proyectos, incluyendo este mismo blog.