安裝 Master CSS
Master CSS supports multiple installation strategies, giving you the flexibility to tailor your workflow based on project scale or scenario.
With no-install CDN, framework integrations, or standalone CLI — your call.
The easiest way to use Master CSS runtime from scratch is to initialize in the application's entry file.
Installation
Install Master CSS
Install Master CSS Runtime into your project via package managers.
npm i @master/css-runtime@rc
Initialize configuration file
Run the command to create a configuration file master.css.js.
npm create @master/css@rc
Set up CSS runtime engine
Import and initialize the runtime engine in the entry file, such as main.js
:
import { initCSSRuntime } from '@master/css-runtime'import config from './master.css'initCSSRuntime(config)
Start using Master CSS
Now style your first element using Master CSS syntax!
<!DOCTYPE html><html lang="en" hidden><head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <script src="/main.js"></script> </head><body> <h1 class="font:40 font:heavy italic m:12x text:center">Hello World</h1></body></html>
Open your browser to watch the changes.
Hello World
Start in one step
Quickly create a blank Master CSS runtime project locally with Vite hot updates using the official CLI.
npm create @master/css@rc <project>cd <project>npm run dev --open
Get stuck? Check out the integrations guides for better starting points and recommendations.