Config & Integrations

The config file

Every Astro project is configured from astro.config.mjs through a single defineConfig call. A handful of keys carry most of the weight:

import { defineConfig } from 'astro/config';
import mdx from '@astrojs/mdx';
import sitemap from '@astrojs/sitemap';
import react from '@astrojs/react';
import cloudflare from '@astrojs/cloudflare';

export default defineConfig({
  site: 'https://example.com',   // absolute site URL (used for sitemap, canonical, RSS)
  base: '/docs',                 // path prefix if not served at the domain root
  output: 'static',              // 'static' (default) or 'server' for on-demand
  adapter: cloudflare(),         // runtime for on-demand rendering
  integrations: [mdx(), sitemap(), react()],
  vite: { /* escape hatch to raw Vite config */ },
});

site is your deployed URL. It’s required for anything that emits absolute URLs (sitemap, canonical tags, RSS). base sets a path prefix when the site lives under a subpath (like this course under /astro).
output picks the default rendering mode; adapter supplies the runtime when you use on-demand rendering (from the rendering lesson).
integrations is the list of plugins that extend Astro.

The integrations system

An integration is an official or community plugin that hooks into Astro’s build to add a capability — rendering a UI framework, generating a sitemap, adding MDX support, wiring an adapter. You install it and add it to the integrations array. Many have a one-command installer that edits the config for you:

# astro add writes the import + integrations entry for you, and installs deps
npx astro add react
npx astro add mdx sitemap

Common official integrations (@astrojs/*): react / vue / svelte / solid / preact (UI framework islands), mdx (components in Markdown), sitemap, and the platform adapters (cloudflare, node, vercel, netlify). Note that @astrojs/rss is not an integration — it’s a helper package you import inside an endpoint to generate a feed, so there’s no astro add rss and it never goes in the integrations array.

Astro is built on Vite

Under the hood, Astro’s dev server and build are powered by Vite. That’s why the dev server starts instantly, why HMR is fast, and why you can use most of the Vite/Rollup plugin ecosystem. When you need something Astro doesn’t expose directly, drop into the vite key and configure Vite itself:

export default defineConfig({
  vite: {
    plugins: [/* any Vite plugin */],
    resolve: { alias: { '@': '/src' } },
  },
});

flowchart TB
  cfg["astro.config.mjs (defineConfig)"] --> integ["integrations: UI frameworks, mdx, sitemap, adapter"]
  cfg --> vite["vite: raw Vite/Rollup plugins and config"]
  integ --> build["Astro build"]
  vite --> build

Astro composes integrations on top of Vite

Adding Tailwind (the current way)

Tailwind in current Astro is installed as a Vite plugin (@tailwindcss/vite, Tailwind v4) — not the old @astrojs/tailwind integration. The one-command installer wires it up:

npx astro add tailwind

That installs the plugin, adds it to your Vite config, and creates the CSS entry. You then import your CSS once (e.g. in a layout) and use Tailwind utility classes in your markup. If you ever see guides referencing the @astrojs/tailwind integration, that’s the older approach; the current path is the Vite plugin via astro add tailwind.