Integrations

Set up Master CSS in Angular

Guide to setting up Master CSS in your Angular project.

Runtime rendering generates rules in the browser when Angular adds class names that were not known at build time. Select it explicitly; the Angular installer otherwise sets up static CSS generation.

Create an Angular project

If you do not have a project yet, create one with the Angular CLI.

Terminal
ng new my-appcd my-app

Add Master CSS in runtime mode

The installer adds the runtime and preset packages, initializes MasterCSSRuntime in src/main.ts, and adds the Master CSS import to src/styles.css.

Terminal
npm create @master/css@rc -- --framework angular --mode runtime --yes

Check the stylesheet entry

Keep Angular's global stylesheet in its existing builder configuration. Runtime mode uses the project CSS entry and does not run the static CLI generator.

src/styles.css
@import '@master/css';

Start the app

Run the Angular development server.

Terminal
npm start

Use a Master CSS class

The browser runtime observes connected elements and generates rules for their class names.

localhost:4200

Hello World

src/app/app.component.html
<h1 class="m-2xl italic font-5xl font-heavy text-neutral">Hello World</h1>
© 2026 Aoyue Design LLC.MIT License
Trademark Policy