Getting Started

Set up Master CSS in Astro

A quick guide to start using Master CSS in your Astro project.

Quick start

1. Create an Astro project

If you don't have an Astro project, create one first. It's recommended to refer Getting Started :

npm create astro@latest
cd project

2. Installation

npm install @master/css

3. Import

<html>
    <head>
        ...
        <script>
            import "@master/css";
        </script>
    </head>
    ...
<html>

4. Launch server

npm run dev

Hello world

Now, start developing your UI with Master CSS. 🎉

localhost:3000

Hello World

import Layout from '../layouts/Layout.astro';
<Layout title="Welcome to Astro.">
    <main>
        <h1 class="font:40 font:heavy italic m:50 text:center">
            Hello World
        </h1>
    </main>
</Layout>

Hello world

.font\:heavy {
    font-weight: 900
}

@media print {
    .hide\@print {
        display: none
    }
}

@media (min-width:1024px) {
    .font\:24\@md {
        font-size: 1.5rem
    }
}

automatically