Set up Master CSS in Angular
Guide to setting up Master CSS in your Angular project.
Create a project
If you don't have an Angular project, create one first.
ng new my-appcd my-appAdd Master CSS
Run the installer from the Angular project root. The default is static CSS generated by the CLI; Angular keeps its existing builder.
npm create @master/css@rc -- --framework angular --yesLaunch server
Generate CSS once, then keep the CSS watcher running in a separate terminal while the Angular server runs.
npx master-css generate --output src/master.generated.cssnpm startStart using Master CSS
Now style your first template using Master CSS syntax.
Hello World
<h1 class="m-2xl italic font-5xl font-heavy text-neutral">Hello World</h1>The installer creates master.css as the source entry and imports the generated src/master.generated.css from src/styles.css. Keep src/styles.css in Angular's global styles configuration. The generated file is build output; do not edit it or import it from master.css.
Before each production build, regenerate the CSS:
npx master-css generate --output src/master.generated.cssnpm run buildDuring development, run npx master-css generate --output src/master.generated.css --watch in a separate terminal. Static rendering needs complete class strings in templates or an explicit safelist. CSS custom properties can still supply dynamic values.
For class names created in the browser, use the Angular runtime guide.