Integrar Tailwind CSS en un proyecto Astro te permite construir interfaces rápidas sin pelearte con hojas de estilo. Aquí verás cómo instalar la integración oficial, configurar el archivo tailwind.config.js y aprovechar componentes open source para acelerar el desarrollo de astrobuild.tips, un sitio colaborativo de tips sobre Astro.

Qué estructura tendrá el sitio astrobuild.tips

El proyecto funciona como un blog colaborativo donde la comunidad recomienda tips, mejoras, integraciones y plugins del ecosistema Astro. Cada estudiante del curso aporta contenido mediante un pull request, lo que convierte el sitio en un recurso vivo construido entre varias manos.

La estructura base contempla un header con información del proyecto y un listado de tips ordenados por popularidad. Es una arquitectura simple, pensada para que cualquiera entienda dónde encaja su aporte.

¿Qué es astrobuild.tips? Es un sitio colaborativo construido con Astro donde la comunidad publica recomendaciones sobre integraciones, plugins y mejoras del framework, contribuyendo vía pull request.

Cómo encuentro las integraciones oficiales de Astro

Todas las integraciones disponibles viven en astro.build/integrations. Ahí encuentras herramientas para extender capacidades del framework: frameworks UI, adaptadores, manejo de estilos, SEO, analíticas y accesibilidad.

Entre las más populares aparece Tailwind, y vale la pena que explores el catálogo antes de decidir qué sumar a tu proyecto. A lo largo del curso se incorporan varias de estas integraciones, así que familiarizarte con el sitio te ahorra tiempo después.

Cómo instalo la integración de Tailwind en Astro

Detén el entorno de desarrollo local en tu terminal y ejecuta el comando de instalación con las versiones específicas que usa el proyecto:

bash npm install @astrojs/tailwind@3.0.1 tailwindcss@3.2.4

Una vez instaladas, abre package.json y verifica que aparezcan Tailwind CSS en la versión 3.2.4 y la integración @astrojs/tailwind en la versión 3.0.1. Esa confirmación te asegura que la base está lista.

Cómo registro Tailwind en astro.config

Abre astro.config y añade el import de la integración en la parte superior. Dentro de defineConfig, agrega la propiedad integrations como un array y pasa tailwind() ejecutándose dentro de la configuración:

js import tailwind from '@astrojs/tailwind';

export default defineConfig({ integrations: [tailwind()], });

Con esto Astro ya sabe que debe procesar Tailwind durante el build.

Cómo configuro los estilos base de Tailwind

Crea una carpeta styles dentro de src y dentro un archivo base.css. En él declaras las tres directivas que Tailwind necesita para inyectar su sistema:

• @tailwind base; para los estilos base.
• @tailwind components; para los componentes.
• @tailwind utilities; para las clases utilitarias.

Estas tres líneas son el corazón del framework de utilidades. Sin ellas, Tailwind no genera nada en tu bundle final.

¿Qué hacen las directivas @tailwind? Le indican al compilador qué capas de estilos inyectar: la base con resets, los componentes reutilizables y las utilidades como flex o text-center.

Cómo configuro tailwind.config.js correctamente

En la raíz del proyecto crea tailwind.config.js con un module.exports. La propiedad content define qué archivos debe escanear Tailwind para generar solo las clases que realmente usas:

js module.exports = { content: ['./src/**/*.{astro,html,js,jsx}'], theme: { extend: {}, }, plugins: [], };

La regla **/* indica que no importa la profundidad de las carpetas dentro de src. Las extensiones entre llaves cubren los formatos donde escribirás clases de Tailwind. Si más adelante incorporas .svelte, .md o .mdx, debes añadirlos a esta lista para que el procesador los reconozca.

La propiedad theme.extend queda vacía por ahora, pero ahí podrás definir comportamientos personalizados para H2, párrafos, imágenes o el modo oscuro. El array plugins sirve para sumar capacidades adicionales cuando las necesites.

Por qué uso HyperUI para componentes Tailwind

En hyperui.dev encuentras una colección open source de componentes hechos con Tailwind: tarjetas de blog, headers, footers y más. Cada componente ofrece variantes en mobile, small, medium y large, además de versiones en modo claro y oscuro.

Copias el código, lo llevas a un componente Astro y listo. No tienes que preocuparte por el diseño desde cero, lo que acelera muchísimo la construcción del frontend. Te recomiendo explorarlo para elegir las variantes que mejor se adapten a tu portafolio o a astrobuild.tips.

Qué sigue después de instalar Tailwind

Ya tienes Tailwind operativo, pero el proyecto todavía necesita más capas de calidad. Faltan configuraciones para ESLint, Prettier y otras herramientas que elevan el estándar del código y dejan el repositorio listo para producción.

Si quieres profundizar en Tailwind más allá de la configuración base, en Platzi hay un curso dedicado donde aprendes a sacarle todo el provecho. ¿Qué componentes de HyperUI vas a usar primero en tu sitio? Cuéntame en los comentarios.