Getting Started

Installing Master CSS

Install Master CSS with Vite, generate CSS from class names, and start styling in a few steps.

Runtime, zero-runtime, or hydration — it’s your call.

Installation

Add Master CSS to an existing project with the installer. It detects common frameworks, applies the matching setup, and can install the required packages. Supported build integrations use static rendering by default: complete class names in source become ordinary CSS without a browser engine.

Create a project

Start from a Vite project when you do not have an app yet.

Terminal
npm create vite@latest my-appcd my-app

Add Master CSS

Run the installer from the project root. It updates the project setup and installs the packages with the detected package manager.

Terminal
npm create @master/css@rc -- --yes

Run and style

Start the dev server, then use Master CSS classes in your markup.

npm run dev
localhost:5173

Hello World

index.html
<h1 class="m-2xl italic font-5xl font-heavy text-neutral">  Hello World</h1>

Continue with the Syntax Tutorial to build one button and check its generated CSS step by step.

Stuck or need framework integration? Explore our integration guides for tailored starting points and recommendations.

Getting Started
Introduction to Master CSS

Learn what Master CSS is, write your first classes, and choose the next guide to read.

Getting Started
Syntax Tutorial

Build one button step by step with declarations, interaction states, responsive conditions and a project theme token.

© 2026 Aoyue Design LLC.MIT License
Trademark Policy