Personalizar Tailwind CSS en Astro te permite extender colores, fuentes, espaciados y tamaños sin escribir CSS adicional. Si trabajas con un proyecto Astro y quieres adaptar Tailwind a tu diseño de marca, el archivo tailwind.config.mjs es el punto de partida para construir un sistema visual coherente y reutilizable.

¿Dónde se configura Tailwind en un proyecto Astro?

En la raíz del proyecto encontrarás el archivo tailwind.config.mjs, generado por el paquete oficial que Astro entrega para integrar Tailwind como plugin. Este archivo exporta una configuración por defecto adaptada a las extensiones que Astro soporta de forma nativa.

Dentro de la propiedad content hay una regla que indica a Tailwind dónde buscar las clases utilizadas. La expresión apunta a la carpeta src y rastrea cualquier subcarpeta, sin importar el nivel de anidación, junto con todas las extensiones relevantes: .astro, .html, .js, .jsx, .md, .mdx, entre otras.

¿Por qué Tailwind necesita escanear archivos en tiempo de compilación? Porque solo así detecta las clases que realmente usas y genera un CSS final optimizado, sin estilos inútiles. Si trabajas con una extensión nueva, debes agregarla al content para que sea reconocida.

¿Cómo extender colores y fuentes en tailwind.config.mjs?

Dentro del bloque extend puedes generar configuraciones personalizadas que conviven con las que Tailwind ya trae. Aquí es donde traduces la paleta del equipo de diseño en variables que tu código pueda consumir.

Cómo definir una paleta de colores personalizada

Dentro de extend puedes crear el objeto colors y dentro definir grupos como primary, con sus variantes. La estructura típica incluye tres niveles de tono que cubren los escenarios más comunes de un layout:

• light: la versión clara, útil cuando muestras el dark mode y necesitas un tono limpio.
• default: el color principal de tu marca o emprendimiento.
• dark: la versión oscura para acentos o fondos profundos.

Esta paleta normalmente la define el equipo de diseño: paleta principal, paleta secundaria y estructura general. Tú puedes replicar tantos grupos como necesites, por ejemplo un verde claro, un verde principal y un verde oscuro, y reutilizarlos en todo el proyecto.

Cómo agregar fuentes personalizadas con fontFamily

Dentro del mismo extend puedes añadir fontFamily para registrar las tipografías de tu marca. Funciona definiendo una llave que luego se transforma en clase de utilidad.

Por ejemplo, puedes asignar Inter al grupo sans con sans-serif como respaldo, y crear un grupo heading que use Ubuntu (disponible en Google Fonts) con sans-serif como segunda opción. Tailwind generará clases como font-sans o font-heading listas para usar, siempre que hayas cargado la fuente en tu proyecto.

¿Cómo personalizar spacing y fontSize en Tailwind?

Tailwind se basa en múltiplos de cuatro para su escala por defecto, donde un valor 4 equivale a 1rem. Si tu diseño exige medidas fuera de esa escala, puedes ampliarla sin perder la lógica de utilidades.

Dentro de extend agregas spacing y defines pares clave-valor. Por ejemplo, asignar la clave 72 con valor 18rem te permite usar gap-72, p-72 o m-72 con ese espaciado exacto cuando lo necesites.

Lo mismo aplica para tamaños de fuente. Si requieres un texto más pequeño que xs, puedes crear xxs con un valor de 0.65rem dentro de fontSize. Esto evita escribir CSS inline o crear clases personalizadas fuera del sistema.

¿Cómo se llaman las clases personalizadas que agrego? El prefijo depende del grupo. Si agregas un valor en fontSize, el prefijo es text-, así que xxs se convierte en text-xxs. En spacing heredas prefijos como p-, m- o gap-.

¿Cómo aplicar tu configuración personalizada en componentes Astro?

Una vez definidas tus variables, las usas como cualquier clase de utilidad de Tailwind. En un componente como header.astro, donde antes tenías text-2xl por defecto y sm:text-3xl en breakpoints pequeños, puedes reemplazar el valor por tu nueva clase, por ejemplo text-xxs.

Al ejecutar run dev y recargar el sitio en su versión mobile, verás que el navegador aplica la propiedad font-size: 0.65rem correspondiente a text-xxs. Conforme el viewport crece y cambian los breakpoints, esa clase deja de aplicarse y el título recupera su tamaño normal.

Este flujo te deja en un punto cómodo: sigues aprovechando las clases de utilidad de Tailwind y, al mismo tiempo, generas un sistema de variables propio dentro de la configuración. El resultado es un Tailwind 100% personalizable para construir sitios web robustos y alineados con tu identidad visual.

¿Qué variable personalizarías primero en tu próximo proyecto Astro? Cuéntamelo en los comentarios.