Hemos visto cómo Astro maneja los estilos de forma nativa mediante CSS con ámbito (Scoped CSS) y módulos estándar. Esta es, para muchos (y para mi) la forma ideal de trabajar por su semántica y limpieza.
Sin embargo, una de las librerías más populares actualmente es Tailwind CSS, un framework “utility-first” que propone un paradigma diferente. Aplicar estilos mediante clases predefinidas directamente en el HTML.
Os guste Tailwind, o no (tiene sus ventajas y desventajas), la realidad es que Astro y Tailwind hacen buena pareja porque:
- La arquitectura basada en componentes de Astro mitiga el principal defecto de Tailwind (el HTML sucio y repetitivo)
- Mientras que Tailwind soluciona la gestión de sistemas de diseño sin salir del HTML.
Así que vamos a ver cómo configurar nuestro proyecto de Astro para usar Tailwind y, además, nos sive de excusa para presentar las integraciones de Astro.
Integraciones de Astro
Antes de instalar Tailwind, es buen momento para presentar una de las funcionalidades estellas de Astro, las Integraciones.
En otros sistemas configurar herramientas como Tailwind, React, Svelte o sitemaps suele implicar tocar archivos de configuración complejos (webpack.config.js, postcss.config.js, etc.), instalar dependencias manuales y rezar para que las versiones sean compatibles.
Astro soluciona esto con el comando CLI astro add. Este comando no solo instala las dependencias, sino que modifica tus archivos de configuración automáticamente para dejarlo todo listo para usar.
Instalación automática
Abre tu terminal en la raíz del proyecto y ejecuta:
npx astro add tailwind
Al ejecutar esto, Houston (el CLI) tomará el control y te pedirá confirmación para realizar tres acciones:
Instalar dependencias: Descargará tailwindcss y @astrojs/tailwind.
Crear configuración: Generará el archivo tailwind.config.mjs en la raíz.
Actualizar configuración de Astro: Modificará astro.config.mjs para inyectar la integración.
Decimos que Sí a todo, y listo. Ya tienes Tailwind funcionando. Sin tener que hacer nada más. Astro inyecta automáticamente los estilos base de Tailwind en todas tus páginas.
¿Qué ha cambiado en mi proyecto?
Si miramos el archivo astro.config.mjs, veremos esto:
import { defineConfig } from 'astro/config';
import tailwind from '@astrojs/tailwind';
export default defineConfig({
// La integración se ha añadido aquí
integrations: [tailwind()],
});
Esta línea hace que Astro sepa que debe procesar las clases de Tailwind y generar el CSS final optimizado.
Configuración de Tailwind
El comando ha creado un archivo tailwind.config.mjs. Aquí es donde personalizamos nuestro sistema de diseño (colores, fuentes, breakpoints).
/** @type {import('tailwindcss').Config} */
export default {
content: ['./src/**/*.{astro,html,js,jsx,md,mdx,svelte,ts,tsx,vue}'],
theme: {
extend: {
colors: {
'brand-primary': '#4F46E5', // Nuestro color corporativo
}
},
},
plugins: [],
}
Tailwind funciona mediante JIT (Just-In-Time). Escanea tus archivos en busca de clases y genera solo el CSS que estás usando.
Fíjate en la línea content. Si utilizas un archivo nuevo con otras extensión, asegúrate de añadirla aquí o Tailwind ignorará sus clases.
Usando Tailwind en componentes Astro
Ahora podemos usar las clases de utilidad directamente en nuestros componentes. Recordad que en Astro usamos el atributo estándar class, no className.
---
// src/components/Tarjeta.astro
const { titulo } = Astro.props;
---
<div class="bg-white rounded-xl shadow-md overflow-hidden p-6 hover:shadow-lg transition-shadow">
<h2 class="text-2xl font-bold text-gray-800 mb-2">{titulo}</h2>
<p class="text-gray-600">
Este componente está estilado 100% con Tailwind.
</p>
<button class="mt-4 bg-brand-primary text-white px-4 py-2 rounded">
Leer más
</button>
</div>
La directiva @apply
A veces, la lista de clases se vuelve demasiado larga y difícil de leer, o simplemente queremos reutilizar un conjunto de estilos sin crear un componente nuevo.
Podemos usar la directiva @apply de Tailwind dentro de la etiqueta <style> de nuestro componente Astro.
<button class="btn-primario">
Click me
</button>
<style>
/* Podemos mezclar CSS normal con Tailwind.
Recuerda: Estos estilos siguen siendo SCOPED (locales) por defecto.
*/
.btn-primario {
@apply px-4 py-2 bg-blue-600 text-white rounded hover:bg-blue-700 transition-colors;
/* Podemos añadir reglas CSS estándar que Tailwind no tenga */
text-transform: uppercase;
}
</style>
Estilos globales y fuentes
La integración de Astro inyecta automáticamente las directivas básicas de Tailwind (@tailwind base, etc.). Pero, ¿y si queremos añadir una fuente personalizada o estilos globales para el body?
Creamos un archivo CSS, por ejemplo src/styles/global.css:
/* src/styles/global.css */
@tailwind base;
@tailwind components;
@tailwind utilities;
@layer base {
h1 {
@apply text-4xl font-bold mb-4;
}
h2 {
@apply text-2xl font-semibold mb-3;
}
}
Y luego lo importamos en nuestro Layout principal:
---
// src/layouts/Layout.astro
import '../styles/global.css';
---
