Integrations
Set up Master CSS in Astro
Guide to setting up Master CSS progressive rendering in your Astro project.
Create a project
If you don't have an Astro project, create one first. It's recommended to refer to Getting Started - Astro.
npm create astro@latest my-appcd my-appInstall Master CSS
Install the @master/css.astro integration into your project.
npm i @master/css.astro@rcSet up Master CSS
Add the Master CSS Astro integration in astro.config.js.
- By default,
options.modeis set toprogressive. - Progressive mode pre-renders initial CSS with Astro middleware, then hydrates the runtime in the browser.
- Static build output externalizes page hydration manifests under
dist/_master-css/hydration/…; middleware SSR keeps the inline manifest for the current response. - In
mode: 'runtime', static build output preloads the emitted project manifest JSON when runtime injection is enabled. SSR-only output does not add this preload because the final client asset URL is not available through a stable build-time head hook. See Preload runtime project manifests.
import { defineConfig } from 'astro/config'import masterCSS from '@master/css.astro' export default defineConfig({ integrations: [ masterCSS() ]})Import the default stylesheet
Import Master CSS from a global Astro stylesheet. This style block is also the project CSS entry.
<style is:global> @import '@master/css';</style>Verify progressive output
Run a production build to verify that Astro writes pre-rendered CSS into the generated HTML.
Static output should include <style id="master-css" data-master-css-hydration-manifest="…"> for initial classes and a module script for runtime hydration.
npm run buildStart dev server
Run the command to start the Astro dev server.
npm run devStart using Master CSS
Now style your first element using Master CSS syntax!
---import Layout from '../layouts/Layout.astro';---<Layout title="Welcome to Astro."> <main> <h1 class="italic m:2xl text:neutral font:5xl font:heavy"> Hello World </h1> </main></Layout>localhost:3000