INSTALLATION · ASTRO

Using Astro

Add Coordiation as a Vite plugin inside Astro, scan the complete src tree, and import the generated virtual stylesheet from your shared layout.

✓

Astro exposes a vite configuration object, so the official @coordiation/vite adapter provides fast updates without a separate watcher.

Install the Vite adapter

Astro already runs on Vite. Add only the Coordiation compiler and its official Vite adapter.

Terminal

npm install -D @coordiation/css @coordiation/vite

Register the plugin

Point the scanner at src so it covers .astro, framework components, Markdown, MDX, and scripts.

astro.config.mjs

import { defineConfig } from "astro/config";
import coordiation from "@coordiation/vite";

export default defineConfig({
  vite: {
    plugins: [
      coordiation({
        content: ["src"],
        cssFile: "src/styles/coordiation.css"
      })
    ]
  }
});

Create your theme entry

Keep framework directives and project-owned CSS together in a source file that Astro and Vite can watch.

src/styles/coordiation.css

@coordiation;

@co-theme {
  --co-color-brand-500: oklch(62.3% 0.214 259.815);
}

Import the virtual stylesheet

Import once from the shared layout used by every page. The virtual module contains the compiled CSS.

src/layouts/Layout.astro

---
import "virtual:coordiation.css";
---

<!doctype html>
<html lang="en">
  <body>
    <slot />
  </body>
</html>

Style Astro markup

Utilities inside .astro templates are part of the default scanner contract.

src/pages/index.astro

---
import Layout from "../layouts/Layout.astro";
---

<Layout>
  <main class="co-grid co-min-h-screen co-place-items-center co-bg-black co-text-white">
    <h1 class="co-text-6xl co-font-bold">Built with Coordiation</h1>
  </main>
</Layout>

Terminal

npm run dev
npm run build

PRODUCTION CHECKLIST

Ship predictable CSS

Keep the scanner boundary and generated stylesheet explicit so people, CI, and AI agents produce the same result.

Open Astro Vite configuration documentation →

Keep virtual:coordiation.css imported by a layout shared across every route.
Include additional source roots in content when components live outside src.
Use literal class names in Astro expressions and UI-framework islands.
Run the production build in CI so missing scanner paths fail before deployment.

Previous← Using Next.js NextUsing Laravel →