Integrations — astro add

Todo lo que extiende Astro más allá de lo nativo (React, Tailwind, sitemap, un CMS) es una integration — se declaran en un solo lugar, astro.config.mjs.

astro add — Instalar y configurar en un paso

Instala el paquete, lo agrega al array integrations de astro.config.mjs, y hace cualquier ajuste extra que la integration necesite (por ejemplo, Tailwind también toca el vite.plugins) — todo con un solo comando.

pnpmbunnpm

pnpm astro add react
pnpm astro add react tailwind sitemap

bunx astro add react
bunx astro add react tailwind sitemap

npx astro add react
npx astro add react tailwind sitemap

Cómo queda en astro.config.mjs

astro.config.mjs

import { defineConfig } from "astro/config"
import react from "@astrojs/react"

export default defineConfig({
  integrations: [react()]
})

Este mismo sitio tiene una sola: react(), para las islas de CommandPalette/MobileNav/SearchResults — Tailwind aquí va aparte, como plugin de Vite (@tailwindcss/vite), no como integration.

Instalación manual

Cuando astro add no cubre el caso (una integration local, algo sin paquete de Astro oficial), se agrega a mano.

astro.config.mjs

import { defineConfig } from "astro/config"
import miIntegracionLocal from "./integrations/mi-integracion.js"

export default defineConfig({
  integrations: [miIntegracionLocal()]
})

Integraciones habituales

Comando / config	Uso
npx astro add <nombre>	Instala y configura en un paso
npx astro add <a> <b> <c>	Varias integrations directamente
integrations: [...] en astro.config.mjs	Dónde quedan declaradas, siempre
Instalación manual	Para integrations locales o sin soporte de astro add

Compatibilidad y mantenimiento

• astro add modifica astro.config.mjs automáticamente. Si el archivo tiene una estructura muy personalizada, revisa el diff antes de confirmar los cambios.
• No todo lo que se instala es una integration: un plugin de Vite (como el propio @tailwindcss/vite de este proyecto) va en vite.plugins, no en integrations — son dos sistemas de extensión distintos que conviven en el mismo archivo de config.
• Las integrations oficiales (@astrojs/react, @astrojs/mdx, etc.) son las mantenidas por el equipo de Astro — hay muchas de la comunidad también, mismo mecanismo, mismo array.