Set up Master CSS in Astro

Connect Master CSS to an Astro site through a shared CSS entry. The integration supports static, runtime and progressive delivery; Astro still owns page rendering.

#Installation

1. #Add Master CSS

   In an existing Astro project, run the installer from the project root. Static is the default: it scans complete class strings and emits ordinary CSS.

   npm create @master/css@2.0.0 -- --framework astro --yes

2. #Connect the stylesheet

   The installer creates a standalone CSS entry:

   src/styles/global.css

   @import '@master/css';

   Import it from page or layout frontmatter. A shared layout delivers it to every page using that layout. Keep the Master CSS integration beside the project's existing integrations in astro.config.mjs.

3. #Start using Master CSS

   Start the dev server. Import src/styles/global.css from the page frontmatter, then add the paragraph. Use the same import in a shared layout when several pages need it.

src/pages/index.astro

---import '../styles/global.css'---<html lang="en">  <head>    <meta charset="utf-8" />    <meta name="viewport" content="width=device-width" />    <title>Hello Master CSS</title>  </head>  <body>    <p id="master-check" class="w-fit m(0) p-md b-solid b(1) b-line-divider r-md text-sm font-regular bg-surface-raised fg-text-strong">      Hello World    </p>  </body></html>

A neutral surface, a fine border, small corners and 1rem of padding on every side.

#Check the setup

Run npm run dev, change p-md to p-lg and check that padding grows from 1rem to 1.5rem. Restore it and test the production page:

npm run buildnpm run preview

Disable JavaScript and reload. The paragraph should retain its padding, rounded corners and raised surface. If no styles appear, confirm the page or its layout imports global.css and the Astro configuration includes the Master CSS integration. For custom definitions and scoped styles, see Global styles.

#Build static CSS with the CLI

Use this as an alternative to the Astro integration. Remove its registration from astro.config.mjs, preserving other integrations, and remove the global.css import from the page or layout. Install the CLI:

npm install -D @master/css-cli@2.0.0

Create the source entry at the project root. Put any project definitions here too:

@import '@master/css';

Link the generated stylesheet from the page or shared layout's <head>:

<link rel="stylesheet" href="/master.css" />

Generate the CSS before building Astro:

npx @master/css-cli generate "src/**/*.{astro,html,js,jsx,ts,tsx,vue,svelte}" --output public/master.cssnpm run buildnpm run preview

During development, add --watch to the generation command and run npm run dev in a second terminal. Astro copies public/ into the build; deploy the generated stylesheet and its companion imports together. For a site with a configured base path, prefix the stylesheet URL with that base. Verify the paragraph with JavaScript disabled.

#Choose another rendering mode

Static mode is the default. The integration injects the runtime page script for the other modes, so they need no separate browser bootstrap:

npm create @master/css@2.0.0 -- --framework astro --mode runtime --yes

document.querySelector('#master-check').classList.add('underline')

npm create @master/css@2.0.0 -- --framework astro --mode progressive --yes