Integrations
Set up Master CSS in Astro
Guide to setting up Master CSS in your Astro project.
Create a project
If you don't have a 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 @master/css.astro plugin into your project.
npm i @master/css.astro@rcCreate a configuration file
Run the command to create a master.css.js file.
npm create @master/css@rcSet up Master CSS
Add a masterCSS astro integration in astro.config.js.
- By default,
options.modeis set toruntime.
import { defineConfig } from 'astro/config'import masterCSS from '@master/css.astro' export default defineConfig({ integrations: [ masterCSS() ]})Start 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:12x fg:strong font:40 font:heavy"> Hello World </h1> </main></Layout>localhost:3000