Instalación de Astro con Tailwind CSS

Crea un sitio web rápido, robusto y centrado en el contenido con Astro y Tailwind CSS. Aquí verás cómo iniciar un proyecto con plantilla de blog, integrar Tailwind CSS 3.4, trabajar con componentes HTML en archivos .astro y aprovechar colecciones open source como Hyper-UI, sin depender de JavaScript.

¿Cómo iniciar un proyecto Astro con Tailwind CSS?

Para empezar, se copia el comando desde astro.build y se indica la carpeta del proyecto, por ejemplo: curso tailwindcss-astro. Luego se siguen los pasos interactivos: iniciar un nuevo proyecto, elegir el template de blog, instalar dependencias e inicializar un repositorio. Al entrar a la carpeta, se añade la integración de Tailwind con el comando base de Astro para complementos.

• Elegir el template de blog al crear el proyecto.
• Confirmar la instalación de dependencias e inicializar el repositorio.
• Añadir la integración oficial: soporte Astro + Tailwind.
• Aceptar la creación de tailwind.config.mjs con configuración por defecto.
• Confirmar que se instala Tailwind CSS 3.4.

¿Qué comandos ejecutar?

npx astro add tailwind

¿Qué estructura y flujo de trabajo propone Astro?

La estructura incluye README con documentación, configuración base, archivos de TypeScript (que no se tocarán) y .gitignore. Las dependencias instalan Astro como framework con la plantilla de blog y el soporte de Tailwind. Los archivos .astro son esencialmente HTML: arriba permiten imports o lógica de JavaScript (que no se usará) y abajo el marcado y estilos. La idea es priorizar clases de utilidad de Tailwind en lugar de CSS tradicional.

• Estructura base enfocada en contenido y rendimiento.
• Archivos .astro: HTML con bloque superior para imports de JS.
• Uso de clases de utilidad para maquetar y estilizar.
• Archivo de configuración: tailwind.config.mjs.
• Flujo con entorno local y recarga en tiempo real.

¿Cómo ver el proyecto en desarrollo?

Ejecuta el servidor local y abre el navegador para ver la página inicial.

npm run dev

• Verás el sitio cargado en tiempo real.
• Aún no se verán estilos de Tailwind hasta usar clases de utilidad en componentes.

¿Por qué Tailwind aún no aplica estilos?

Porque el soporte está instalado, pero los componentes actuales no usan clases de Tailwind. Se debe agregar o reemplazar componentes y aplicar las clases de utilidad. Un buen punto de partida es el componente de header: limpiar estilos CSS incrustados y preparar el HTML para Tailwind dentro del archivo .astro.

¿Cómo implementar y personalizar componentes con Tailwind CSS y Hyper-UI?

Hyper-UI es una colección open source de componentes en Tailwind listos para copiar y pegar. Se puede elegir un header, previsualizar en modo oscuro, ajustar a small, mobile o medium, copiar la versión HTML e insertarla en el componente de header del proyecto. Al guardar, se valida que Tailwind ya está aplicando estilos en Astro.

• Elegir un componente de header en Hyper-UI.
• Probar modo oscuro y vista responsiva.
• Copiar en pestaña HTML.
• Pegar en el header .astro y guardar.
• Verificar estilos activos en el navegador.

Desde aquí, el enfoque es personalizar con clases de utilidad: estructura, posiciones, colores y presentación de información del blog. Más adelante se podrá manipular la lógica de visualización sin entrar a JavaScript por ahora. Explora las secciones ya separadas: header, footer y el diseño de cada blog post. También se plantean mejoras futuras como integrar videos de YouTube y un buscador, siempre presentando la información de forma amigable y rápida con Tailwind CSS.

¿Te gustaría ver otro componente de Hyper-UI integrado o profundizar en la personalización del header y footer? Cuéntame en los comentarios qué quieres construir primero.