Índice

• Cómo crear un proyecto con Astro v6
  • Requisitos previos
  • Crear el proyecto con el asistente CLI
  • Estructura del proyecto
  • Iniciar el servidor de desarrollo
• Configurar Tailwind CSS v4 en Astro
  • Instalación
  • Configurar el plugin en Vite
  • Crear el archivo global de estilos
  • Importar los estilos en tu proyecto
  • Reiniciar el servidor
• Generar el sitemap
  • Instalación
  • Configuración
  • Opciones adicionales
    • Opciones disponibles
  • Generar el sitemap
  • Comandos útiles
• Siguientes pasos

---

Requisitos previos

Antes de comenzar, asegúrate de tener instalado:

• Node.js versión 22.12.0 o superior (las versiones impares como Node 23 no están soportadas)
• Un administrador de paquetes: npm, pnpm o yarn

Para verificar tu versión de Node:

node -v

Crear el proyecto con el asistente CLI

La forma más rápida de crear un nuevo proyecto Astro es usando el asistente interactivo create astro. Ejecuta el siguiente comando en tu terminal:

npm create astro@latest

El asistente te guiará paso a paso:

1. Instalar create-astro: Confirma con y para instalar el paquete
2. Ubicación del proyecto: Indica el nombre de la carpeta (por ejemplo, ./mi-proyecto)
3. Plantilla inicial: Selecciona Empty (proyecto vacío) usando las flechas del teclado
4. Instalar dependencias: Confirma con y
5. Inicializar repositorio Git: Confirma con y (recomendado)
6. Configuración de TypeScript: Selecciona Relaxed o según tu preferencia

Una vez completado, navega al directorio de tu proyecto:

cd mi-proyecto

Estructura del proyecto

Después de la instalación, tu directorio tendrá la siguiente estructura:

├── node_modules/
├── public/
│   └── robots.txt
├── src/
│   └── pages/
│       └── index.astro
├── astro.config.mjs
├── package.json
├── tsconfig.json
└── package-lock.json

Iniciar el servidor de desarrollo

Para ver tu proyecto en el navegador, ejecuta:

npm run dev

Astro mostrará un mensaje confirmando que el servidor está funcionando. Por defecto, el proyecto estará disponible en http://localhost:4321.

---

Configurar Tailwind CSS v4 en Astro

A partir de Astro 5.2+, la forma recomendada para usar Tailwind v4 es mediante el plugin @tailwindcss/vite. La antigua integración @astrojs/tailwind está obsoleta para Tailwind v4.

Instalación

Desde tu directorio de proyecto, instala los paquetes necesarios:

npm install tailwindcss @tailwindcss/vite

Configurar el plugin en Vite

Edita el archivo astro.config.mjs y agrega el plugin de Tailwind:

// astro.config.mjs
// @ts-check
import { defineConfig } from "astro/config";
import tailwindcss from "@tailwindcss/vite";

// https://astro.build/config
export default defineConfig({
  vite: {
    plugins: [tailwindcss()],
  },
});

Crear el archivo global de estilos

Crea el directorio y archivo src/styles/global.css:

@import "tailwindcss";

Importar los estilos en tu proyecto

En tu página o layout base, importa el archivo CSS:

---
// src/pages/index.astro
import "../styles/global.css";
---

<h1 class="text-3xl font-bold underline">
  ¡Hola mundo!
</h1>

Alternativamente, si tienes un layout:

---
// src/layouts/Layout.astro
import "../styles/global.css";
---

Reiniciar el servidor

Después de modificar la configuración, reinicia el servidor de desarrollo:

npm run dev

---

Generar el sitemap

El sitemap es esencial para el SEO de tu sitio, permitiendo que los motores de búsqueda indexen correctamente todas tus páginas.

Instalación

Instala la integración @astrojs/sitemap:

npm install @astrojs/sitemap

Configuración

Edita astro.config.mjs para agregar la integración:

// astro.config.mjs
// @ts-check
import { defineConfig } from "astro/config";
import tailwindcss from "@tailwindcss/vite";
import sitemap from "@astrojs/sitemap";

// https://astro.build/config
export default defineConfig({
  site: "https://tu-dominio.com", // Requerido para el sitemap
  vite: {
    plugins: [tailwindcss()],
  },
  integrations: [sitemap()],
});

Opciones adicionales

Puedes personalizar el sitemap con opciones adicionales:

integrations: [
  sitemap({
    changefreq: "weekly",
    priority: 0.7,
    lastmod: new Date(),
    entryLimit: 45000,
    filter: (page) => !page.includes("/admin"),
  }),
],

Opciones disponibles

Opción	Tipo	Descripción
changefreq	string	Frecuencia de cambio: always, hourly, daily, weekly, monthly, yearly, never
priority	number	Prioridad de 0 a 1
lastmod	Date	Fecha de última modificación
entryLimit	number	Máximo de entradas por archivo (default: 45000)
filter	function	Función para filtrar páginas
i18n	object	Configuración para múltiples idiomas

Generar el sitemap

El sitemap se genera automáticamente al hacer build:

npm run build

Se generarán los archivos sitemap-index.xml y sitemap-0.xml en el directorio de salida.

---

Comandos útiles

Comando	Descripción
npm run dev	Iniciar servidor de desarrollo con HMR
npm run build	Generar archivos para producción
npm run preview	Previsualizar el build de producción

---

Siguientes pasos

• Explora la documentación oficial de Astro para aprender más sobre componentes, layouts y contenido.
• Consulta la guía de Tailwind CSS v4 para conocer los cambios respecto a v3.
• Aprende sobre Content Collections para gestionar contenido tipo-seguro.
• Configura i18n routing para sitios multiidiomas.