Cómo empezar con Astro 5 y Tailwind CSS v4

Astro 5 con Tailwind CSS v4 permite montar un blog estático optimizado para SEO en minutos: HTML pre-renderizado, Content Collections tipadas y utilidades CSS sin archivos de configuración clásicos de Tailwind.

¿Qué es Astro y por qué usarlo para un blog?

Astro es un framework web orientado a contenido que genera sitios estáticos por defecto y solo hidrata JavaScript donde lo pides (islas). Para un blog o media site eso significa Lighthouse alto, buen Core Web Vitals y una base sólida para posicionar y monetizar.

Qué necesitas

• Node.js 22+
• Un editor con soporte TypeScript
• Conocimientos básicos de HTML y Markdown

Cómo crear el proyecto paso a paso

1. Scaffold: ejecuta npm create astro@latest y elige la plantilla de blog o empty.
2. Añade Tailwind v4: instala @tailwindcss/vite y tailwindcss, registra el plugin en astro.config e importa @import "tailwindcss" en tu CSS global.
3. Define Content Collections: crea src/content.config.ts con un schema Zod para title, description, pubDate, tags, etc.
4. Escribe posts en Markdown/MDX bajo src/content/posts/.
5. Genera rutas con getStaticPaths o la API de content collections.
6. Añade sitemap y RSS con @astrojs/sitemap y @astrojs/rss.
7. Publica en cualquier host estático (nginx, Cloudflare Pages, Netlify, etc.).

Por qué Astro para SEO

Astro entrega HTML listo en la primera respuesta. Menos JS en el cliente mejora LCP e INP. Combínalo con:

• canonical, Open Graph y JSON-LD (BlogPosting, FAQPage)
• robots.txt y sitemap XML
• Imágenes con dimensiones y loading adecuado
• Encabezados H1–H3 alineados con la intención de búsqueda

Content Collections: contenido con tipos

Las Content Collections validan el frontmatter con Zod. Un artículo sin description o con una categoría inválida falla el build, evitando publicar basura SEO a producción.

Tailwind CSS v4 sin configuración clásica

La v4 se integra como plugin de Vite: sin tailwind.config.js ni postcss.config.js obligatorios. Usas utilidades en componentes .astro y el CSS se genera en build.

Errores frecuentes

• Hidratar toda la página con un framework cliente “por si acaso” (mata la ventaja de Astro).
• Olvidar site en astro.config (rompe URLs canónicas y el sitemap).
• Meta descriptions duplicadas o vacías en el schema.
• Imágenes sin alt ni tamaño intrínseco (CLS).

Preguntas frecuentes

¿Astro 5 sirve para un blog con AdSense?

Sí. El HTML estático y los buenos Web Vitals ayudan tanto al SEO como a la experiencia que exigen las redes de anuncios.

¿Necesito React?

No para un blog editorial. Añádelo solo en islas (buscador, theme toggle complejo, etc.).

¿Tailwind v4 necesita PostCSS?

No de forma obligatoria: el plugin de Vite de Tailwind v4 cubre el flujo habitual en Astro.

Conclusión

Si quieres un blog rápido, barato de mantener y fácil de posicionar en buscadores y respuestas de IA, Astro 5 + Tailwind v4 es una stack excelente en 2026.