Configurar tema personalizado en Tailwind CSS

Diseña con confianza y velocidad: aprende a configurar Tailwind CSS en Astro y a extender el theme con colores, tipografías, espaciados y tamaños de fuente personalizados. La clave está en un tailwind.config.mjs bien definido y en aprovechar las clases de utilidad sin escribir CSS adicional.

¿Cómo configurar Tailwind CSS en Astro?

Astro genera el archivo de configuración en la raíz: tailwind.config.mjs. Desde ahí exporta la configuración por defecto y permite adaptarla a lo que el proyecto necesita. Tailwind trabaja en tiempo de compilación para leer las clases que usas y generar solo los estilos necesarios. Así mantienes el CSS optimizado.

¿Dónde vive tailwind.config.mjs y qué hace?

• Está en la raíz del proyecto.
• Exporta una configuración por defecto ajustable.
• Permite integrar plugins y soporte para Tailwind CSS.

¿Qué archivos escanea Tailwind CSS?

• Se define una regla de contenido dentro de "CRC" y en todos los niveles.
• Detecta extensiones como .astro, .html, .js, .jsx, .md, .mdx.
• Con esto, Tailwind reconoce las clases usadas y exporta los estilos necesarios.

// tailwind.config.mjs
export default {
  content: [
    './CRC/**/*.{astro,html,js,jsx,md,mdx}',
  ],
  theme: {
    extend: {
      // aquí irán tus extensiones personalizadas
    },
  },
  plugins: [],
}

¿Cómo extender el theme para colores, tipografías y espaciado?

Astro te deja personalizar y extender según tus necesidades. En theme.extend puedes crear configuraciones propias: colores de marca, familias tipográficas, spacing y font size. Así alineas la UI con el layout y la guía de estilo.

¿Cómo definir una paleta de colores primary con light, default y dark?

• Crea un objeto de color primary con variantes.
• Usa light para la versión clara, default como color principal y dark para la versión oscura.
• Esta paleta suele venir del equipo de diseño y mantiene la coherencia visual.

// theme.extend.colors
colors: {
  primary: {
    light: '#fffffe',     // tu color claro.
    default: '#ffdd00',   // tu color principal.
    dark: '#222222',      // tu color oscuro.
  },
},

¿Cómo asignar font family para sans y heading?

• Define fontFamily.sans con tu tipografía base, por ejemplo Inter.
• Define fontFamily.heading para títulos, por ejemplo Ubuntu.
• Incluye una segunda opción como sans-serif para mayor compatibilidad.

// theme.extend.fontFamily
fontFamily: {
  sans: ['Inter', 'sans-serif'],
  heading: ['Ubuntu', 'sans-serif'],
},

¿Cómo crear spacing y font size personalizados?

• Si necesitas una regla fuera de los múltiplos de cuatro, agrega spacing propio.
• Ejemplo: clave 72 con valor 18rem para espacios grandes.
• Para texto muy pequeño, crea un font size "XXS" = 0.65rem y úsalo donde haga sentido.

// theme.extend.spacing y theme.extend.fontSize
spacing: {
  72: '18rem',
},
fontSize: {
  XXS: '0.65rem',
},

¿Cómo aplicar y verificar los cambios en componentes?

La magia está en usar las nuevas utilidades por su nombre. Lo que declares en colors, fontFamily, spacing y fontSize se invoca con sus prefijos de utilidad: text para tamaños, font para familias, bg o text para colores, gap/m-/p- para espaciados.

¿Cómo usar las clases de utilidad personalizadas en components/header?

• Si el título tenía text-2xl y en small pasaba a 3xl, puedes probar con text-XXS para un caso puntual.
• Evitas CSS inline o clases personalizadas sueltas.
• Mantienes la coherencia del sistema de diseño.

<!-- components/Header.astro -->
<h1 class="text-XXS sm:text-3xl">Título</h1>

¿Cómo validar en el entorno de desarrollo local?

• Guarda cambios y ejecuta el entorno de desarrollo local con run dev.
• Recarga y verifica en mobile si la clase text-XXS aplica.
• En las herramientas del navegador verás la regla generada: text-XXS → font-size: 0.65rem.
• A medida que crece el viewport, el título pasa a 3xl y deja de aplicar la clase pequeña.

// Estructura completa combinada
export default {
  content: ['./CRC/**/*.{astro,html,js,jsx,md,mdx}'],
  theme: {
    extend: {
      colors: {
        primary: { light: '#fffffe', default: '#ffdd00', dark: '#222222' },
      },
      fontFamily: {
        sans: ['Inter', 'sans-serif'],
        heading: ['Ubuntu', 'sans-serif'],
      },
      spacing: { 72: '18rem' },
      fontSize: { XXS: '0.65rem' },
    },
  },
  plugins: [],
}

Con estas prácticas, Tailwind queda 100% alineado a tu diseño y sigues aprovechando las clases de utilidad. ¿Qué otra extensión del theme te gustaría ver aplicada a tu proyecto con dark mode o UI específica? Cuéntalo en los comentarios.