Astro te deja elegir cómo quieres trabajar los estilos. Puedes usar CSS tradicional, módulos CSS, Tailwind, Sass o incluso librerías externas. Lo mejor es que todo convive sin problemas.

🎯 1. Tipos de estilos en Astro

Astro soporta tres formas principales de aplicar estilos:

Tipo de estilo	Dónde se aplica	Ideal para
Local (en el mismo archivo `.astro`)	Solo afecta a ese componente/página	Componentes pequeños
Global (`src/styles/global.css`)	Se aplica a toda la web	Layouts o estilos generales
Frameworks (Tailwind, Bootstrap, etc.)	A toda la web	Diseños rápidos y modernos

🧩 2. Estilos locales (scoped)

Astro aplica por defecto el encapsulamiento de estilos, es decir: un <style> dentro de un archivo .astro solo afecta a ese archivo.

Ejemplo:

1<h1>Hola mundo</h1>
2
3<style>
4  h1 {
5    color: #4f46e5;
6    text-align: center;
7  }
8</style>

✅ Este color solo afecta al <h1> de este archivo. Si en otra página tienes un <h1>, no heredará este color.

💡 Esto evita conflictos entre estilos de distintas páginas o componentes.

🌍 3. Estilos globales

Si quieres que los estilos afecten a toda la web (fuentes, colores, márgenes, etc.), crea:

src/styles/global.css

Ejemplo:

1body {
2  margin: 0;
3  font-family: system-ui, sans-serif;
4  background-color: #f8fafc;
5}
6
7a {
8  color: #4f46e5;
9  text-decoration: none;
10}

Y luego impórtalo en tu layout principal (BaseLayout.astro):

1---
2import '../styles/global.css';
3---
4<html lang="es">
5  <body>
6    <slot />
7  </body>
8</html>

Así, todos tus estilos globales se aplicarán a las páginas que usen ese layout.

💡 4. CSS Modules (opcional)

También puedes usar CSS Modules, un sistema que crea nombres únicos automáticamente.

Ejemplo:

Button.module.css

1.btn {
2  background-color: #4f46e5;
3  color: white;
4  padding: 10px 20px;
5  border-radius: 8px;
6}

Button.astro

1---
2import styles from './Button.module.css';
3---
4
5<button class={styles.btn}>Haz clic</button>

Resultado: Astro renombra automáticamente .btn a algo como .btn_ab123 para evitar choques de nombres.

🌈 5. Usar Tailwind CSS en Astro

Tailwind CSS es un framework que te permite escribir clases en HTML directamente para diseñar sin archivos CSS separados.

Instalación:

Ejecuta en la terminal:

1npx astro add tailwind

Esto instalará Tailwind y configurará los archivos automáticamente (tailwind.config.mjs, postcss.config.mjs).

Ejemplo con Tailwind:

1<h1 class="text-4xl font-bold text-indigo-600 text-center mt-10">
2  ¡Hola desde Tailwind y Astro!
3</h1>
4<p class="text-gray-600 text-center">
5  Rápido, moderno y sin complicaciones.
6</p>

✅ No necesitas crear hojas CSS. ✅ Todo está optimizado y listo para producción.

⚙️ 6. Combinar estilos personalizados y Tailwind

Puedes seguir usando tus propios archivos CSS además de Tailwind. Por ejemplo:

global.css

1.card {
2  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
3  border-radius: 10px;
4  background: white;
5}

Y en tu componente:

1<div class="card p-6 text-center">
2  <h3 class="text-lg font-semibold text-indigo-600">Combinando Tailwind y CSS</h3>
3</div>

💡 Tailwind y tu CSS pueden coexistir sin problema.

🎁 7. Integrar librerías de diseño

Puedes añadir frameworks como Flowbite, DaisyUI, Bootstrap o Material UI (si usas React).

Ejemplo con Flowbite:

1npm install flowbite

Luego, en astro.config.mjs:

1import { defineConfig } from 'astro/config';
2import tailwind from "@astrojs/tailwind";
3
4export default defineConfig({
5  integrations: [tailwind({ config: { plugins: ['flowbite/plugin'] } })],
6});

Y en tu HTML puedes usar componentes listos, como:

1<button class="btn btn-primary">Guardar</button>

⚡ 8. Buenas prácticas con estilos en Astro

✅ Usa estilos locales por defecto.
✅ Crea un archivo global.css solo para lo esencial (fuentes, colores, body).
✅ Tailwind simplifica y acelera el diseño.
✅ Evita CSS duplicado en varios componentes.
✅ Si usas Tailwind, define variables en tailwind.config.mjs (colores, fuentes, etc.).

Curso de Astro