Estilos en Astro

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:

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 #

¿Qué es Tailwind? #

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

Laboratorios: diseñar componentes con CSS real #

El ámbito local de Astro decide a qué elementos se aplica un estilo.
Flexbox, Grid, las media queries y el modelo de caja deciden cómo se dibujan
esos elementos. Estos laboratorios usan CSS en el navegador, por lo que puedes
aplicar las mismas propiedades dentro del <style> de un componente .astro.
Los ejemplos de Tailwind serían otra forma de expresar esas reglas.

1. Flexbox para navegación y grupos de elementos #

Prueba una fila centrada o un menú espaciado. Después cambia a columnas con
wrap: el eje principal pasa a ser vertical, y los elementos que no caben en
la altura disponible saltan a otra columna. Reduce el ancho y comprueba qué
ocurre con nowrap cuando las tarjetas no se encogen.

.contenedor {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
  width: 480px;
  height: 320px;
}
.tarjeta { flex: 0 0 80px; }

2. Grid para tarjetas y cabeceras #

Parte de tres columnas iguales y haz que la primera tarjeta ocupe toda la fila.
Prueba después una sola columna estrecha. Si reduces el número de columnas,
el laboratorio ajusta el span para mantenerlo dentro de la cuadrícula.

.contenedor {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  justify-items: stretch;
}
.tarjeta:first-child { grid-column: span 1; }

3. Responsive sin cambiar el tamaño de tu navegador #

La página de prueba tiene su propio viewport. Compara móvil, tablet y escritorio;
después prueba justo antes y justo en el breakpoint. min-width incluye el
valor límite. Un diseño responsive responde al ancho disponible, no al nombre
del dispositivo: los tamaños de ejemplo solo facilitan la comparación.

.cards { display: grid; grid-template-columns: 1fr; }
nav { display: flex; flex-direction: column; }
@media (min-width: 600px) {
  .cards { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  nav { flex-direction: row; }
}

4. Modelo de caja y dimensiones reales #

Compara content-box y border-box con el mismo width, padding y borde.
Los paneles muestran simultáneamente ambos cálculos. El margen permanece fuera
del ancho declarado en los dos casos.

.caja {
  box-sizing: content-box;
  width: 160px;
  padding: 16px;
  border: 4px solid purple;
  margin: 16px;
}
/* 160 + 2 × 16 + 2 × 4 = 200 px; margen fuera */

5. Compara el movimiento con CSS #

Una animación puede durar lo mismo y recorrer la misma distancia con distintas
curvas de velocidad. Compara la referencia lineal con ease-in, ease-out y
pasos discretos. Pausa el movimiento para observar la posición de las tarjetas.

@keyframes mover {
  from { transform: translateX(0); }
  to { transform: translateX(220px); }
}
.tarjeta {
  animation: mover 2s linear infinite normal;
  animation-play-state: paused;
}