Set up Master CSS in Astro

Guide to setting up Master CSS in your Astro project.

If you don't have an Astro project, create one first.

npm create astro@latest my-appcd my-app

Run the installer in runtime mode from the Astro project root. Runtime mode generates CSS in the browser and skips Astro middleware pre-rendering.

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

Run the command to start the Astro dev server.

npm run dev

pnpm run dev

bun run dev

yarn run dev

Now style your first Astro page using Master CSS syntax.

localhost:4321

Hello World

<h1 class="m:2xl italic font:5xl font:heavy text:neutral">    Hello World</h1>