# Master CSS

> A CSS language and framework for rapidly building beautiful websites and design systems with rule-based CSS-in-class.

---

# Master CSS Vite: one plugin for every rendering mode

Source: https://rc.css.master.co/en/blog/bootstrapping-master-css-with-vite

Summary: A cleaner Vite integration for runtime rendering, static rendering, pre-rendering, and progressive rendering.

Vite is one of the best foundations for modern frontend work: fast startup, predictable module graph, first-class plugins, and a build pipeline that is easy to extend without making the application feel heavy.

`@master/css.vite` brings Master CSS into that pipeline as a first-class Vite integration. Instead of choosing between several setup guides, manual runtime imports, scanning scripts, and HTML post-processing steps, you install one plugin and choose the rendering model that matches your application.

The goal is simple: keep Master CSS authoring as direct as markup, while letting Vite own the integration work.

---

## One plugin, four rendering modes

The original Vite integration focused on Static Rendering. It worked well for projects that wanted a compiled stylesheet, but the rest of the Master CSS rendering story still required manual setup.

The new `@master/css.vite` plugin unifies the modes behind one entry point:

- `runtime`: injects the Master CSS runtime and config so styles can be generated in the browser.
- `static`: wires Master CSS stylesheet imports into the static rendering workflow.
- `pre-render`: renders HTML output and injects the CSS needed by those documents.
- `progressive`: combines pre-rendered first-response CSS with the runtime engine for dynamic UI.

That matters because not every Vite app has the same shape. A design system playground, a documentation site, a SPA, and a partially pre-rendered app should not be forced into the same CSS delivery strategy.

Master CSS now lets the Vite project choose.

---

## Install it

If you don't have a project yet, create one using `npm create vite@latest my-app`.

```bash action=install
@master/css.vite@rc
```

Then register the plugin:

```js name=vite.config.js
import { defineConfig } from 'vite'
import masterCSS from '@master/css.vite' // [!code highlight]

export default defineConfig({
  plugins: [
    masterCSS() // [!code highlight]
  ]
})
```

By default, the plugin uses `runtime` mode. That is the most forgiving way to start: Master CSS reads classes in the browser, generates the required rules, and keeps working as your UI changes.

Run the Vite dev server and start writing Master CSS classes:

```bash action=run
dev
```

---

## Choose the right mode

### Runtime

Use runtime mode when you want the simplest integration and maximum flexibility. It is a strong default for SPAs, prototypes, internal tools, and applications where classes can appear after hydration.

```js name=vite.config.js
import { defineConfig } from 'vite'
import masterCSS from '@master/css.vite'

export default defineConfig({
  plugins: [
    masterCSS()
  ]
})
```

### Static Rendering

Use static mode when your classes are visible in source and you want a compiled CSS asset before runtime. This is the closest mode to traditional utility-first build workflows.

```js name=vite.config.js
import { defineConfig } from 'vite'
import masterCSS from '@master/css.vite'

export default defineConfig({
  plugins: [
    masterCSS({ mode: 'static' })
  ]
})
```

### Pre-rendering

Use pre-render mode when Vite emits HTML that can be styled before the browser runs JavaScript. The plugin renders the matching CSS and injects it into the document.

For rendered pages, the critical CSS stays inline in `style#master-css`. The page hydration manifest is externalized as a hashed JSON asset and referenced from `data-master-css-hydration-manifest`, so the HTML does not grow with the runtime handoff data.

```js name=vite.config.js
import { defineConfig } from 'vite'
import masterCSS from '@master/css.vite'

export default defineConfig({
  plugins: [
    masterCSS({ mode: 'pre-render' })
  ]
})
```

### Progressive Rendering

Use progressive mode when you want the first HTML response to carry the CSS it needs, while the runtime continues to support client-only state, late-rendered components, and dynamic UI.

```js name=vite.config.js
import { defineConfig } from 'vite'
import masterCSS from '@master/css.vite'

export default defineConfig({
  plugins: [
    masterCSS({ mode: 'progressive' })
  ]
})
```

This is the mode that best represents the Master CSS rendering model: render what can be known early, keep the runtime for what becomes known later.

In progressive mode, the runtime imports the page hydration manifest as a JSON module when it starts. Do not add a preload hint for that JSON file: the browser can already paint from `style#master-css`, and the manifest is only needed for the runtime to adopt those rules instead of rebuilding them.

---

## What the plugin handles

`@master/css.vite` is not just a wrapper around an import. It participates in the Vite pipeline:

- resolves the compiled MasterCSSManifest as a virtual module;
- detects common Vite entry modules;
- keeps the default stylesheet as an explicit `@import "@master/css"` in app CSS;
- injects the runtime where runtime behavior is enabled;
- handles static rendering output;
- pre-renders HTML when the selected mode requires it;
- externalizes page hydration manifests for pre-rendered and progressive HTML;
- applies FOUC avoidance for runtime-first rendering.

That is the difference between "Master CSS works in a Vite app" and "Master CSS feels like a Vite-native tool."

---

## Built for Vite-powered frameworks

Vite is also the build foundation for many frameworks. `@master/css.vite` is the lower-level integration that makes the core Vite workflow work well, while framework packages can provide a more native setup when the framework has its own conventions.

[Nuxt](/guide/installation/nuxtjs) uses a module:

```ts name=nuxt.config.ts
export default defineNuxtConfig({
  modules: [
    '@master/css.nuxt' // progressive by default [!code highlight]
    // ['@master/css.nuxt', { mode: 'static' }]
    // ['@master/css.nuxt', { mode: 'runtime' }]
    // ['@master/css.nuxt', { mode: 'pre-render' }]
  ]
})
```

[Astro](/guide/installation/astro) uses an integration:

```ts name=astro.config.ts
import masterCSS from '@master/css.astro'

export default defineConfig({
  integrations: [
    masterCSS() // 'progressive' [!code highlight]
    // masterCSS({ mode: 'static' })
  ]
})
```

---

## A better default for Vite projects

The value of this release is not only that setup is shorter. It is that the rendering strategy is now explicit and local to the Vite config.

Start with runtime mode when you want speed and flexibility. Move to Static Rendering when your class graph is source-visible and you want compiled CSS. Use Pre-rendering when the HTML is already available at build time. Choose Progressive Rendering when you want the first page response to be styled early without giving up runtime behavior.

That is the kind of choice a build tool should enable: one integration, multiple delivery strategies, and no extra application code when you change modes.

For full setup details, see the [Vite installation guide](/guide/installation/vite) and the [rendering modes guide](/guide/rendering-modes).

---

# Introducing the Master CSS Next.js

Source: https://rc.css.master.co/en/blog/master-css-next

Summary: The Next.js Adapter brings Progressive Rendering into the build pipeline, with Turbopack support for Static Rendering.

Today we are introducing `@master/css.next`, the official Master CSS integration for Next.js.

The headline is Progressive Rendering through the Next.js Adapter API. The adapter plugs into the Next.js build pipeline, receives the final static and pre-rendered HTML outputs, renders the Master CSS rules each document needs, and writes them back into the page as `<style id="master-css">`.

This release also includes Static Rendering for Turbopack, so teams that prefer a generated CSS asset can use a source-scanned workflow. That path is useful, but it is secondary to the larger integration: Master CSS can now render from the HTML that Next.js actually produced.

---

## Why this release matters

Next.js 16.2 introduced a stable [Adapter API](https://nextjs.org/blog/nextjs-across-platforms#the-adapter-api). In the Next.js team's words, the build now exposes a typed, versioned description of the application, including routes, prerenders, static assets, runtime targets, dependencies, caching rules, and routing decisions.

That gives Master CSS a better integration point than a post-build file glob. `@master/css.next` uses the public `onBuildComplete` hook to read the final build output and process the HTML that Next.js already knows about.

For App Router applications, Server Components, MDX, generated pages, static routes, and pre-rendered routes, this matters because the adapter works from the framework output instead of guessing how the build directory is shaped.

---

## Progressive Rendering in Next.js

Master CSS is markup-driven. The class string is the styling source of truth:

```tsx
export default function Page() {
  return (
    <main className="min-h:100vh p:10x bg:surface-base text:neutral">
      <h1 className="font:6xl font:heavy tracking:tight">
        Master CSS pre-rendered by Next.js
      </h1>
    </main>
  )
}
```

In runtime mode, Master CSS reads those classes in the browser and generates the matching CSS immediately. That keeps authoring flexible, but the first document still depends on JavaScript before every first-render style is available.

Progressive Rendering moves that first CSS pass into the build:

1. Next.js renders static and pre-rendered HTML during `next build`.
2. `@master/css.next` receives those build outputs through the Adapter API.
3. The adapter runs the Master CSS server renderer against each HTML document.
4. The generated CSS is injected as `<style id="master-css">`, and the page hydration manifest is written as a hashed JSON asset.
5. The style tag receives `data-master-css-hydration-manifest`, and the runtime imports that manifest during hydration to attach existing CSS rules to runtime-managed rule objects instead of regenerating them.

The result is a page that can arrive from the server already carrying the CSS needed for its first render, while still keeping the runtime behavior that makes Master CSS practical in interactive applications. If the hydration manifest is missing, invalid, or no longer matches `style#master-css`, the runtime safely rebuilds its stylesheet from the connected DOM classes.

### Hydration manifest hydration

Progressive Rendering is not only a critical CSS optimization. It is also a resumable runtime handoff.

`style#master-css` gives the browser the CSS it needs to paint immediately. `style#master-css[data-master-css-hydration-manifest]` points the Master CSS runtime to a compact JSON rule IR, currently `version: 1`, that describes the generated rules inside that style block. Each manifest rule can include the class name, layer, priority, selector text, generated CSS text, and any referenced variables or animations.

That distinction matters because the runtime needs to keep managing the page after hydration. A client component may mount later, a class may change in response to state, or a route transition may reveal UI that did not exist in the first HTML document. The manifest lets the runtime adopt the already-rendered rules as its starting point, then continue from there without duplicating the CSS that the build already wrote. Keeping that manifest external preserves the first-paint benefit of inline CSS while reducing HTML transfer and parse pressure on pages with many generated rules.

For a minimal page:

```tsx name=app/page.tsx
export default function Page() {
  return <h1 className="font:6xl">Hello</h1>
}
```

Progressive Rendering produces HTML shaped like this:

```html
<!doctype html>
<html>
<head>
  <style id="master-css" data-master-css-hydration-manifest="/_next/static/master-css/hydration/master-css-hydration.8f3a1c2d.json">@layer utilities{.font\:48px{font-size:48px}}</style>
</head>
<body>
  <h1 class="font:6xl">Hello</h1>
</body>
</html>
```

The browser can paint the heading from `style#master-css` before the runtime does any work. When the runtime starts, it imports the hashed JSON manifest, maps the native CSS rule back to `font:48px`, and continues handling later dynamic classes from the same managed stylesheet. If a page has no generated Master CSS rules, the adapter does not need to attach a manifest URL.

This page hydration manifest is separate from the project manifest and from the `buildReport` option in `@master/css.next`. When enabled, `buildReport` writes `.next/master-css-build-report.json` with details about rendered files; it is not the route-level JSON used to hydrate `style#master-css` in the browser.

---

## Adapter integration
The new adapter is registered in `next.config.js`, and Next.js calls it when the full build output is available:
```js name=next.config.js
import { withMasterCSS } from '@master/css.next'

/** @type {import('next').NextConfig} */
const nextConfig = withMasterCSS({
  // your Next.js config
})

export default nextConfig
```

This turns Progressive Rendering from a post-build convention into a framework-level integration. Master CSS no longer needs the application to maintain a second render script, and the integration can follow the typed Next.js output contract as it evolves.

---

## What improves

### Faster first paint

The critical CSS for a pre-rendered page is already in the HTML response. The browser does not need to wait for the Master CSS runtime to boot before styling the first screen, which reduces the risk of flash of unstyled content.

### Route-level CSS output

The adapter renders CSS from each HTML document, not from the entire source tree. A page only receives the class rules needed by that page's first HTML output.

That is especially valuable for documentation sites, marketing pages, blogs, dashboards with static shells, and large App Router applications where different routes use very different surfaces.

### Runtime flexibility stays available

Progressive Rendering does not remove the runtime engine. It gives the first response the CSS that can be known during the build, then lets the runtime continue tracking client-only state, late UI, and dynamic class names after hydration.

### Same authoring model

There is no second syntax and no separate critical CSS file to maintain. You still write Master CSS classes in markup, and the adapter decides what should be present in the first HTML response.

---

## Install it

For the full setup, follow [Progressive Rendering in Next.js](/guide/installation/nextjs). If your project needs a source-scanned CSS build instead, use [Static Rendering in Next.js](/guide/installation/nextjs/static-rendering).

Import Master CSS from the stylesheet your app already loads. This stylesheet also serves as the project CSS entry:

```css name=app/globals.css
@import '@master/css';
```

Install Master CSS and the Next.js adapter:

```bash action=install
@master/css@rc @master/css.next@rc
```

Keep the root layout focused on the global stylesheet:

```tsx name=app/layout.tsx
import './globals.css'

export default function RootLayout({ children }: { children: React.ReactNode }) {
  return (
    <html lang="en">
      <body>
        {children}
      </body>
    </html>
  )
}
```

The Next.js adapter injects the runtime through the build tool and loads the canonical project-level MasterCSSManifest automatically. React apps outside build-tool integrations can use `@master/css-runtime` directly.

Then register the adapter:

```js name=next.config.js
import { withMasterCSS } from '@master/css.next'

/** @type {import('next').NextConfig} */
const nextConfig = withMasterCSS({
  /* your Next.js config */
})

export default nextConfig
```

Development uses the runtime engine directly for fast refresh. Run a production build to verify that `<style id="master-css">` is pre-rendered into static and pre-rendered HTML outputs:

```bash name=Terminal
npm run build
npm run start
```

---

## Static Rendering for Turbopack

`@master/css.next` also supports a source-scanned CSS workflow for projects that do not need runtime rendering or route-level HTML pre-rendering.

Static mode uses the same Master CSS stylesheet import model as the other build integrations:

```css name=app/globals.css
@import '@master/css';

.main {
  background-color: var(--color-primary);
}

@theme {
  --color-primary: #ff0000;
}
```

Then enable static mode in `next.config.js`:

```js name=next.config.js
import { withMasterCSS } from '@master/css.next'

/** @type {import('next').NextConfig} */
const nextConfig = await withMasterCSS({
  // your Next.js config
}, {
  mode: 'static'
})

export default nextConfig
```

Under the hood, static mode scans the configured source files with `@master/css-scanner` and writes a generated CSS file under `.master/`. A Turbopack CSS loader replaces `@import "@master/css"` with that generated CSS, and stylesheets that import `@master/css` are treated as native CSS pruning roots by default.

Ordinary class selectors in those roots are pruned against detected classes. References to `var(--*)` or manifest animation names can pull matching variables and keyframes from the project CSS entry graph. During Turbopack builds, a scanner loader also reads JavaScript and TypeScript modules that pass through the module graph, so imported files can incrementally feed additional class names into the scanner.

This mode is intentionally source-scanned. It works best when complete class strings are visible in source files, and source-glob scanning remains the production correctness baseline.

---

## Different from Tailwind CSS

The useful comparison is not that source scanning is radically different. In static mode, Master CSS and Tailwind CSS have a similar constraint: the scanner needs complete class names that are visible in source.

[Tailwind detects classes by scanning source files as plain text](https://tailwindcss.com/docs/detecting-classes-in-source-files), then generates CSS for the utilities it can detect. Master CSS Static Rendering for Next.js follows the same general shape-outside: scan source, generate CSS, and let the build load that generated stylesheet.

The larger difference is Progressive Rendering.

With `@master/css.next`, the first CSS pass can start from the HTML that Next.js has already rendered. That means layout composition, MDX output, generated markup, Server Component output, and route-level rendering all converge into one artifact before Master CSS renders the page CSS.

For source scanning, a dynamic class still needs to resolve to complete class strings in source. For Progressive Rendering, a pre-rendered route can produce the final class list in HTML first:

```tsx
export function Badge({ tone }: {
  tone: 'blue' | 'neutral'
}) {
  return (
    <span className={`px:xs py:3xs r:sm bg:${tone}/.1 text:${tone}`}>
      New
    </span>
  )
}
```

If a pre-rendered route outputs this HTML:

```html
<span class="px:xs py:3xs r:sm bg:blue/.1 text:blue">New</span>
```

`@master/css.next` reads that final class list from the generated document and injects the matching CSS for the first response. The runtime can then continue covering client-only and dynamic UI after hydration.

The practical difference:

- In static mode, Master CSS and Tailwind CSS both depend on statically discoverable source classes.
- Tailwind CSS focuses on a compile-time stylesheet generated from source detection.
- Master CSS Next.js can instead use Progressive Rendering to inline first-render CSS from Next.js HTML output.
- The Master CSS runtime remains available for UI that cannot be known at build time.

This is a different tradeoff, not a claim that one pipeline replaces the other. Tailwind CSS is a mature compile-time CSS framework. Master CSS is a runtime-capable CSS engine with build-time Progressive Rendering. The Next.js Adapter makes that hybrid model feel native in a Next.js application.

---

## Current boundary

`@master/css.next` is a build-time adapter. It processes static and pre-rendered HTML outputs produced during `next build`.

Dynamic SSR responses still rely on the Master CSS runtime engine, because those responses are produced at request time rather than in the completed build output. This is intentional: the first HTML response gets the CSS that can be known at build time, and the runtime continues the rendering model where the page becomes dynamic.

In static mode, the generated CSS asset comes from source scanning. It works best when the complete class strings are visible in source files. The Turbopack scanner loader improves incremental updates for modules that pass through the build, but source-glob scanning remains the production correctness baseline.

If another integration already owns Next.js `adapterPath`, use runtime mode until adapter composition is available.

---

## A better foundation for Next.js

The important change is not just that the setup is shorter. It is that Master CSS now integrates with the same public build contract Next.js is using to support adapters across platforms.

That gives the integration a better long-term shape-outside:

- it is tied to a typed Next.js output contract;
- it runs when all static and pre-rendered outputs are known;
- it removes file-glob assumptions from the user setup;
- it keeps runtime rendering available for the parts of the UI that cannot be known at build time;
- it makes Progressive Rendering the default story for serious Next.js projects.

Master CSS has always treated markup as the styling interface. With the Next.js Adapter, the final HTML document becomes the bridge between Next.js rendering and Master CSS generation.

That is exactly where Progressive Rendering belongs.

---

# Master CSS 2.0

Source: https://rc.css.master.co/en/blog/v2

Summary: Configuration API, progressive rendering, design system, and more!

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus luctus felis eget tellus tempus, in tempor nisl pretium. Sed ac dapibus lectus. Proin sed mauris sed risus mollis bibendum. Ut efficitur mi ut turpis efficitur, et tempor lorem volutpat. Quisque fringilla, turpis eu suscipit rhoncus, tortor enim malesuada risus, id pulvinar lorem felis et nunc. Nullam finibus augue at ipsum luctus iaculis. Aenean et ullamcorper lorem.

```bash action=install
@master/css@latest
```

---

## Framework Integration
Vestibulum fringilla varius semper. Sed in placerat est, in iaculis urna. Sed at dignissim mauris. Cras ac feugiat quam, eget rutrum mauris. Sed consequat placerat neque in dictum. Nullam maximus est ut quam ultrices fringilla. Sed vehicula neque non bibendum ullamcorper. Maecenas mattis scelerisque tortor, ac ullamcorper tellus eleifend a. Suspendisse bibendum nibh at metus tempus, ac dignissim sem viverra. Morbi a tortor tincidunt, aliquam lectus nec, convallis mauris. Fusce non lorem vitae mauris ultrices aliquam. Donec id risus id massa lacinia semper. Curabitur laoreet magna a fringilla congue.

---

## New Configuration API

### Managed keyframes
You can now customize CSS [animations](/guide/motion#customize-motion-tokens) in the project CSS entry:
```css name=index.css
@theme {
  @keyframes fade {
    0% {
      opacity: 0;
    }

    to {
      opacity: 1;
    }
  }
}
```
Apply the `fade` keyframe via [animation syntax](/reference/animation):
```html
<!-- @MARK animation:fade|.5s|ease -->
<div class="animation:fade|.5s|ease"></div>
```
It only generates the CSS keyframe rule used:
```css
@keyframes fade {
  0% {
    opacity: 0
  }

  to {
    opacity: 1
  }
}

.animation\:fade\|\.5s\|ease {
  animation: fade .5s ease
}
```

---

## Explicit Motion Declarations

Animation and transition longhands use their full CSS property keys:
```html
<div class="animation-play-state:paused">
<div class="animation-fill-mode:forwards">
<div class="animation-iteration-count:infinite">
<div class="animation-direction:alternate">
```
To learn more, check out the [animation](/reference/animation) documentation.

---

# Brand

Source: https://rc.css.master.co/en/brand

Summary: These guidelines are here to help you use our brand assets—such as our logo, content, and trademarks—clearly and correctly, without needing separate legal permission each time.

We’re excited that you want to share and represent Master CSS! This guide outlines how you can use our brand assets properly and consistently, whether you’re writing an article, creating a video, building a plugin, or referencing us in a project.

---

## Download Assets
These assets are provided for your convenience. You can use them in your projects, articles, and videos. Please ensure you follow our [trademark policy](#trademark-policy) when using these assets.

### Logotype

### Mark

---

## Trademark Policy

“Master CSS”, the Master CSS logo, and associated marks are trademarks owned by Aoyue Design. They represent our project and our community. Please follow these rules to use them appropriately.

(o) You may:

- Refer to “Master CSS” in educational content, blog posts, tutorials, and open-source tools.
- Use phrases like “powered by Master CSS”, “compatible with Master CSS”, or “built with Master CSS”.
- Display our logo in blog posts, videos, UI mockups, and plugin documentation.
- Use it to indicate integration with or support for Master CSS.
- Resize proportionally while keeping the original aspect ratio.

(x) You may not:

- Use “Master CSS” or our logo in the name of your product, domain, or company (e.g. `mastercss-tools.io`, `Master CSS UI`).
- Present your project as “official” or “endorsed” unless we’ve formally partnered.
- Sell goods (e.g. T-shirts, stickers) featuring our logo without written consent.
- Modify the logo’s color, shape, or orientation.
- Add shadows, gradients, or other visual effects.
- Use our logo as part of your own logo or product identity.
- Place the logo on merchandise without express permission.

---

## Name Usage

Please use our name in the correct format and spelling.

(o) Correct:
- Master CSS
- Built with Master CSS
- Powered by Master CSS

(x) Incorrect:
- mastercss
- MASTERcss
- CSSMaster

---

# Design System

Source: https://rc.css.master.co/en/design-system

Summary: The Master CSS design system provides a set of guidelines and examples

---

## Benchmark charts
These examples use fake design-system sample data. They are not benchmark results.

---

## Code
### Block code
```html
<h1 className="block font:6xl tracking:.2em text-center">
  Hello, world!
</h1>
```

### Inline code
- js -> `js const foo = 'bar'`
- ts -> `ts const options: Options = {}`
- css -> `css body { background: red; }`
- mcss -> `mcss text-center`

### Code lines added and removed
```ts
console.log('hewwo') // [!code --]
console.log('hello') // [!code ++]
console.log('goodbye')
```

### Code line highlight
```ts
console.log('hewwo')
console.log('hello') // [!code highlight]
console.log('goodbye')
```

### Code line focus
```ts
console.log('hewwo')
console.log('hello') // [!code focus]
console.log('goodbye')
```

### Code mark words
```ts
// @MARK bar
const foo = 'bar'
```

---

---

# Get started with Master CSS

Source: https://rc.css.master.co/en/guide

Summary: This section walks you through learning and starting to use Master CSS.

## Getting Started

## Agentic Workflows

## Syntax Tutorial

## Authoring

## Fundamentals

## Design Foundations

## Build & Delivery

---

## Get ready for the journey
### Use documentation
You can embark on an in-depth study of Master CSS without prior CSS expertise. Each document features demonstrations and fundamental usages of the intended functionalities.

The Master CSS helps you lower the threshold for learning CSS.

A few notes on using these documents:

1. Get an overview of almost all the documents via the navigation on the left side of the screen, and there are only a few categories.
2. On the right side, you'll see a table of contents that makes navigating between page sections easier.
3. Click the search box on the left side or use the shortcut Ctrl + K or ⌘ Command + K to search the entire site.
4. Every class name in the document can preview the generated CSS rules by hovering.
  ```html
  <!-- @MARK hidden@<sm&>md -->
  <div class="hidden@<sm&>md">Try hovering over the class</div>
  ```

### Try Master CSS online
You can use the official [Master CSS Play](/play) to edit, preview, view the generated size, and even share your design online.

### Join our community
If you have questions about Master CSS, you're always welcome to ask our community on:

- [GitHub Discussions](https://github.com/master-co/css/discussions): Ask questions and share insights.
- [Discord](https://discord.com/invite/sZNKpAAAw6): Join real-time conversations with humans.
- [Twitter](https://twitter.com/mastercorg): Stay updated on Master CSS

We're here to support your Master CSS journey!

---

# AI Coding with Master CSS

Source: https://rc.css.master.co/en/guide/ai-coding

Summary: Use AI coding agents to write, review, and validate Master CSS classes with project context, prompts, linting, and visual checks.

AI coding works best when the agent can see the same styling system your team uses: the framework, the CSS entry, the theme tokens, the reusable component vocabulary, and the checks that keep class strings valid.

Master CSS gives an agent a compact styling language. Classes map closely to CSS declarations, token values, selector states, conditional queries, and generated CSS output. That makes it easier for an AI coding agent to suggest useful markup, but the workflow still needs product judgment from a developer.

Use AI to move faster through routine styling decisions, generate first drafts, compare alternatives, and review class strings. Keep decisions about semantics, shared tokens, reusable components, and visual quality with the person reviewing the change.

Popular local coding agents include [Codex App](https://openai.com/codex/), [Claude Code](https://code.claude.com/docs/en/setup), [Cursor](https://cursor.com/download), and [Windsurf / Devin Desktop](https://devin.ai/download). Use a local agent that can inspect your repository, edit files in small batches, and run the project's own checks.

---

## Set up the project first
AI output improves when the project already has a real Master CSS setup. Install Master CSS, import the stylesheet from the CSS file your app already loads, and choose the [rendering mode](/guide/rendering-modes) that fits the framework.

```css name=app.css
@import '@master/css';
```

Then give the project a vocabulary the agent can reuse. Theme tokens make repeated values explicit, and component classes give shared product patterns a stable name.

```css name=app.css
@import '@master/css';

@theme {
  --color-brand: #4f46e5;
  --spacing-card: 1.5rem;
  --radius-card: 0.75rem;
}

@components {
  btn {
    @compose inline-flex align-items:center justify-content:center gap:2x px:md h:10x r:md font:medium;
  }
}
```

Use [Language Service](/guide/language-service) for completions, syntax highlighting, color tools, and generated CSS hover previews. Use [Code linting](/guide/code-linting) when AI-generated class strings should be checked before they enter the codebase.

```js name=eslint.config.js
import { defineConfig } from 'eslint/config'
import css from '@master/eslint-config-css'

export default defineConfig([
  ...css
])
```

This setup gives both the developer and the agent fast feedback. The agent can use project tokens instead of raw values, and linting can catch invalid classes, conflicting declarations, non-canonical syntax, and unstable class order.

---

## Give the agent useful context
Do not start with "make this look better." Ask the agent to inspect the project first, then make a focused change.

Good context includes:

- The official documentation URL: `https://rc.css.master.co`
- The framework, build tool, package manager, and rendering mode.
- The CSS entry that imports `@master/css`.
- Existing `@theme`, `@components`, `@utilities`, and `@custom-variant` definitions.
- Existing component, template, and design-system patterns near the target UI.
- The formatter, lint, type-check, test, build, and visual review commands.

Use a prompt like this from the project root:

```text name=prompt
You are working in a Master CSS project.

Use the official Master CSS documentation as the source of truth:
Documentation: https://rc.css.master.co

Before editing, inspect the framework, package manager, CSS entry, theme tokens, component classes, nearby UI patterns, and available validation commands.

When styling markup:
- use valid Master CSS syntax
- prefer existing theme tokens and component classes
- use explicit CSS-like classes when the shorter alias is unclear
- do not invent Master CSS APIs, directives, package names, or Tailwind-style syntax
- keep semantic HTML and accessibility behavior unchanged
- explain any value that should become a shared token

Work in a small batch. After editing, show the changed files, explain the styling decisions, and run the relevant formatter, lint, type-check, test, or build command when available.
```

---

## Use the MCP server
When your AI client supports the Model Context Protocol, connect it to the [Master CSS MCP server](/guide/mcp-server). The server lets the agent inspect the active manifest, scan project sources, lint class strings, inspect generated CSS, request syntax suggestions, and create safe write previews from one local tool surface.

```json name=mcp.json
{
  "mcpServers": {
    "master-css": {
      "command": "npx",
      "args": ["-y", "@master/css-mcp@rc", "--root", "/absolute/path/to/project"]
    }
  }
}
```

Use MCP for project-aware AI tool calls. When an agent cannot use MCP, fall back to the CLI JSON commands in the review workflow below.

---

## Add project agent rules
For recurring work, add a short Master CSS rules block to the project's agent instructions, such as `AGENTS.md`, Claude instructions, Cursor rules, or Copilot instructions.

```text name=AGENTS.md
When editing Master CSS:
- Use https://rc.css.master.co as the source of truth.
- Before editing, inspect the framework, package manager, CSS entry, rendering mode, theme tokens, component classes, utilities, custom variants, and validation commands.
- Prefer existing @theme tokens, @components, @utilities, and @custom-variant definitions.
- Use the Master CSS MCP server when available. Without MCP, use CLI JSON fallback commands such as `npx @master/css-cli lint --format json --exit-code never` and `npx @master/css-cli inspect --format json --exit-code never`.
- Use ESLint for class policy diagnostics and the Master CSS Language Service for completion, hover, colors, highlighting, and directive formatting.
- Do not invent Master CSS APIs, directives, package names, or Tailwind-style syntax.
- Preserve semantic HTML, accessibility attributes, and behavior.
- Run the relevant formatter, lint, type-check, test, or build command before reporting completion.
```

Keep project-specific commands in the same file so the agent does not have to infer how validation works.

---

## Prompt for readable class strings
Ask the agent to optimize for readable markup, not the shortest possible class list.

```html
<button class="inline-flex items-center gap:xs h:10x px:md r:md fg:white bg:blue-70:hover opacity:.5:disabled bg:brand">
  Save
</button>
```

Readable Master CSS usually follows these habits:

- Use complete class strings instead of building classes from small string fragments.
- Prefer project tokens such as `bg:brand`, `p:card`, and `r:card` when they exist.
- Use native declaration syntax such as `scroll-margin-top:4rem` when it is clearer than a custom abstraction.
- Keep selector states and conditions attached to the class they affect, such as `bg:blue-70:hover` and `grid-cols:3@md`.
- Move repeated product values into `@theme`; move repeated product patterns into `@components` only when a named abstraction improves maintainability.

Use [Global styles](/guide/global-styles#shared-vocabulary) for abstraction decisions and [Code linting](/guide/code-linting) for the class policy that keeps AI-generated markup reviewable.

When a class list becomes hard to scan, ask the agent whether the problem is repetition, missing tokens, or a real component abstraction.

```text name=prompt
Review this component's Master CSS classes for readability.

Look for invalid syntax, conflicting declarations, repeated raw values that should become tokens, over-specific one-off styling, missing responsive or dark-mode states, and class strings that should be split into a component class.

Do not rewrite working markup only to make it shorter. Explain each recommended change.
```

---

## Review AI output
Treat AI-generated styling as a first draft. Review the diff as code and as UI.

Check the class strings:

- Are all classes valid Master CSS syntax?
- Did the agent use Tailwind, Bootstrap, or another framework's class syntax by mistake?
- Do repeated colors, spacing, radius, shadow, or typography values belong in `@theme`?
- Do reusable product patterns belong in `@components`, or are local utility classes clearer?
- Are responsive conditions, mode conditions, selector states, and disabled states attached to the correct declarations?
- Did the generated CSS preview match the intended CSS?

Use linting for mechanical feedback:

```bash name=Terminal
eslint .
```

When an agent needs machine-readable Master CSS preflight output without an MCP client, use the native CLI with JSON output:

```bash name=Terminal
npx @master/css-cli lint --format json --exit-code never
```

When the agent needs to debug scanner coverage or explain missing generated CSS, inspect the extraction state instead of rerunning lint policy:

```bash name=Terminal
npx @master/css-cli inspect --classes "btn card" --format json --exit-code never
```

Use the browser for visual feedback. Compare the important states: default, hover, focus-visible, disabled, loading, narrow containers, dark mode, and reduced motion when the component supports them.

---

## Know what to leave alone
Not every style should become a Master CSS class. Ask the agent to keep regular CSS when conversion would make the project harder to maintain.

Leave these alone unless there is a clear benefit:

- Vendor CSS, reset CSS, generated CSS, and third-party package styles.
- Complex keyframe animation rules that are easier to read as CSS.
- Highly dynamic values controlled by user input, pointer position, charts, maps, or editors.
- One-off native declarations where a direct CSS rule is more obvious than a dense class string.
- Framework or library styles that external code expects to own.

For dynamic values, prefer stable classes plus CSS variables or inline styles at the boundary.

```html
<div class="opacity:var(--opacity) transform:translateX(var(--x))">
  ...
</div>
```

---

## Prompt templates
### Feature styling
```text name=prompt
Style this feature with Master CSS.

Use existing project tokens and component classes when they fit. Keep local one-off decisions in markup. Add new `@theme` tokens only for values that are reused or represent product vocabulary. Do not change semantic HTML, accessibility attributes, or behavior.

After editing, explain the class choices and run the available checks.
```

### Token extraction
```text name=prompt
Find repeated visual values in this component or route.

Recommend which values should become Master CSS `@theme` tokens, which repeated patterns should become `@components`, and which values should stay local. Do not edit until you explain the proposed token names and why they are product vocabulary.
```

### Class review
```text name=prompt
Review these Master CSS class strings.

Check for invalid classes, conflicts, non-canonical syntax, condition order, repeated raw values, missed states, and places where a component class would make the code easier to maintain. Prefer small fixes over broad rewrites.
```

### Visual QA
```text name=prompt
Visually review this Master CSS change.

Run the app, inspect the affected page in desktop and mobile widths, and compare default, hover, focus-visible, disabled, responsive, and dark-mode states where applicable. Report any layout shift, overflow, missing CSS, or behavior change before editing further.
```

---

## Next steps
- Use [Installation](/guide/installation) to add Master CSS to a project.
- Use [Language Service](/guide/language-service) for editor intelligence and generated CSS previews.
- Use [Code linting](/guide/code-linting) for validation and class sorting.
- Use [Style declarations](/guide/style-declarations) when you need syntax details.
- Use [Theme Tokens](/guide/theme) and [Global Styles](/guide/global-styles#shared-vocabulary) when AI suggestions reveal repeated product vocabulary.
- Use [Migration](/guide/migration) when an AI coding agent is converting an existing styling system to Master CSS.

---

# Authoring Packages

Source: https://rc.css.master.co/en/guide/authoring-packages

Summary: Create a simple CSS-only package that shares Master CSS tokens, variants, utilities, and component vocabulary.

## Overview
An authoring package is the smallest way to share a Master CSS styling vocabulary across projects. It is just a package with a CSS source entry, so another project can import its tokens, variants, utilities, and component classes from the app's normal CSS entry.

Use an authoring package for shared design-system vocabulary. Do not ship compiled generated CSS or a generated manifest unless your package has a separate runtime integration reason. Let each consuming project compile the source with its own Master CSS entry graph.

---

## Create a package
Start with a package name chosen by your project or organization. The internal stylesheet can be named `master.css`; users import the package name, not the internal file path.

```txt
my-master-theme/
  package.json
  master.css
  README.md
```

Point the package root to `master.css`:

```json name=package.json
{
  "name": "<package-name>",
  "version": "0.1.0",
  "style": "./master.css",
  "exports": {
    ".": {
      "style": "./master.css",
      "default": "./master.css"
    }
  },
  "sideEffects": ["./master.css"]
}
```

No bundler, TypeScript build, manifest generation, or compiled CSS output is required for this package shape. The package publishes source CSS that Master CSS-aware projects can compile as part of their own stylesheet graph.

---

## Write master.css
Use `master.css` for shared vocabulary that should be available to consuming projects.

```css name=master.css
@theme {
  --color-brand: #4f46e5;
  --color-text-action: var(--color-brand);
  --spacing-action-x: 1rem;
  --radius-action: 0.5rem;
}

@custom-variant motion-safe {
  @media (prefers-reduced-motion: no-preference) {
    @slot;
  }
}

@utilities {
  content-auto {
    content-visibility: auto;
    contain-intrinsic-size: auto 32rem;
  }
}

@components {
  btn {
    @compose inline-flex align-items:center justify-content:center gap:xs px:action-x py:xs r:action font:sm font:medium;
    @compose bg:brand fg:white;

    &:is(:hover, :focus-visible) {
      @compose bg:brand/.85;
    }
  }
}
```

Good package vocabulary is stable and reusable:

- Use `@theme` for shared values such as colors, spacing, radius, typography, shadow, motion, breakpoint, and container tokens.
- Use `@custom-variant` for shared condition names.
- Use `@utilities` for low-level primitives that are useful across apps.
- Use `@components` only when the package intentionally owns semantic UI vocabulary such as `btn`, `field`, `card`, or `toolbar`.

For token namespace behavior, see [Variables and Modes](/guide/variables-and-modes). For creating tokens, see [Theme Tokens](/guide/theme). For directive syntax, see [CSS directives](/guide/directives). For abstraction decisions, see [Global Styles](/guide/global-styles#shared-vocabulary).

---

## Use the package
Install the package in the consuming project, then import the package from the app CSS entry:

```css name=app.css
@import '@master/css';
@import '<package-name>';
```

The imported source becomes part of the project CSS entry graph. Project markup can use the shared vocabulary as ordinary Master CSS classes:

```html
<button class="btn">Save changes</button>
<section class="p:lg content-auto">...</section>
```

When a local CSS file only needs the package as compile-time context, use `@reference` instead:

```css name=Button.module.css
@reference '../app.css';
@reference '<package-name>';

.button {
  @compose btn;
}
```

`@reference` makes package tokens, variants, utilities, and component classes available while compiling the local stylesheet. It does not import the referenced package's output CSS by itself, so make sure the app entry that imports the package is also loaded by the page. See [Route-level styles](/guide/route-level-styles) for local stylesheet patterns.

---

## Keep app policy in the app
A reusable authoring package should not decide how one application scans, filters, or ships its source files.

Keep these in the consuming app:

- App-specific `@source` and `@source not` rules.
- App-specific `@safelist` and `@blocklist` policy.
- Route, page, or component one-off classes.
- Generated manifest JSON and compiled generated CSS output.

Use the package for shared vocabulary. Use the app CSS entry for local source boundaries, delivery choices, and application-specific policy.

---

## Version vocabulary
Treat exported tokens and managed class names like public API.

Removing or renaming a token, variant, utility, or component class is a breaking change. Changing the generated CSS for an existing public class should be intentional and documented. Adding new tokens, variants, utilities, or component classes is usually a minor change when it does not alter existing output.

Prefer readable names over internal implementation names. A consuming app should be able to understand why it uses `bg:brand`, `text:action`, `content-auto`, or `btn` without reading the package source.

---

## Validate with an example
Before publishing, test the package through a small consuming project or fixture:

```css name=app.css
@import '@master/css';
@import '<package-name>';
```

```html
<button class="btn">Save</button>
<article class="p:lg r:lg bg:surface-raised content-auto">
  ...
</article>
```

Run the same checks the app uses for Master CSS, such as ESLint or the CLI lint and inspect commands:

```bash name=Terminal
npx @master/css-cli lint --format json --exit-code never
```

```bash name=Terminal
npx @master/css-cli inspect --classes "btn content-auto bg:brand" --format json --exit-code never
```

The goal is to confirm that the package can be imported by name, its vocabulary is visible to the project manifest, and the generated CSS matches the contract you intend to publish.

---

# Benchmarks

Source: https://rc.css.master.co/en/guide/benchmarks

Summary: Read reproducible Master CSS benchmarks for the runtime/CSSOM tradeoff: small runtime, fewer CSS rules, browser cost, and lifecycle behavior.

StaticBuildChart,
  StaticBuildTable,
  StaticComparisonSummary,
  StaticCSSBytesTable,
  StaticCSSOutputChart,
  StaticStructureChart,
  StaticStructureTable
} from './components/StaticTailwindComparison'

  BrowserCSSCostSummary,
  BrowserCSSCostTables,
  BrowserCSSVolumeTraceChart,
  BrowserDOMScalingTraceChart
} from './components/BrowserCSSCostBenchmark'

  MasterDeliveryLoadChart,
  MasterDeliveryModesSummary,
  MasterDeliveryModesTables,
  MasterDeliveryPayloadChart,
  MasterDeliveryRuntimeChart
} from './components/MasterDeliveryModesBenchmark'

  InteractionCostSummary,
  InteractionCostTables,
  InteractionPrimaryCharts,
  InteractionRuntimeCharts
} from './components/InteractionCostBenchmark'

  BrowserLifecycleLongSessionCharts,
  BrowserLifecycleLongSessionTable,
  BrowserLifecycleSummary
} from './components/BrowserLifecycleBenchmark'

  BuildPathDiagnosticsCharts,
  BuildPathDiagnosticsSummary,
  BuildPathDiagnosticsTable
} from './components/BuildPathDiagnosticsBenchmark'

## Overview
Benchmarks make Master CSS output, build, delivery, browser, and interaction costs inspectable. They are scoped evidence, not universal guarantees for every application.

This page collects the public benchmark snapshots used to explain Master CSS performance tradeoffs. Each result stays tied to the fixture, command, package versions, browser, machine, sample count, and limits that produced it.

---

## Core hypothesis
The central performance question is not whether a runtime is faster than no runtime in isolation. It is whether **small Runtime plus very few CSS rules** can produce lower whole-browser cost than **zero Runtime plus many CSS rules** over the page lifecycle.

For Master CSS, runtime and progressive rendering trade a small amount of JavaScript work for lower delivered CSS, smaller CSSOM/rule volume, and fewer rules for the browser to consider during style recalculation. Tailwind CSS is useful here as a zero-runtime static CSS control: it does not provide a runtime-equivalent implementation, but it does represent the large static CSS side of the tradeoff.

The current evidence should be read as directional. It can support the hypothesis in measured fixtures when runtime/progressive modes reduce CSSOM/rule volume and style recalculation enough to offset runtime bootstrap, observe, and mutation work. It does not establish that every application will be faster.

Selector matching is not directly measured as a stable Chromium metric in these suites. It is inferred from delivered selectors, CSSOM rule count, runtime-generated rule count, and trace-derived style recalculation.

---

## How to read these results
Benchmarks are useful when they answer a narrow question. This page builds the runtime/CSSOM hypothesis in a validation ladder:

1. Static CSS output and structure show how many bytes, selectors, declarations, and rules each static setup delivers.
2. Browser CSS cost calibrates how Chromium responds when CSS rule volume grows while DOM is fixed.
3. Delivery modes show what Master static, runtime, progressive, and Tailwind static send and do on initial load.
4. Interaction cost measures post-load DOM and class changes, including runtime rule work.
5. Browser lifecycle evidence combines long-session browser work, CSSOM/rule volume, and runtime instrumentation.

Read each chart as evidence for the measured fixture and command, then compare it with the complete table and committed snapshot before applying the result to another app.

| Question | Primary evidence |
|----------|------------------|
| How much CSS does the documentation site transfer? | Page CSS size snapshot |
| How large is generated static CSS? | Static CSS output and CSS structure snapshots |
| Where does Master CSS build time go? | Build path diagnostics |
| What does CSS rule volume cost in Chromium? | Browser CSS cost calibration |
| What does each delivery mode send and do on first load? | Master CSS delivery modes |
| What happens after load when classes and DOM change? | Interaction cost |
| Does runtime work change long-session browser cost? | Browser lifecycle evidence |

Tailwind CSS is not a runtime-equivalent comparison. In runtime-oriented suites, it is the static browser-control baseline for the zero-runtime, larger-static-CSS side of the hypothesis.

Lower numbers are not automatically better in every context. A smaller CSS artifact can shift work into runtime, a faster cold command can hide less useful output, and a local Chromium trace does not replace real production telemetry.

Before publishing or acting on a number, the fixture must first pass correctness checks: rendered output should match the intended UI, computed-style assertions should pass, generated output should be attributable to the fixture, and missing-rule checks should fail loudly.

No benchmark result is permission to change CSS output, cascade order, hydration behavior, runtime behavior, extraction behavior, or public APIs. If a result exposes a real hot path, the fix still needs the owning package tests and compatibility review.

---

## Current results

### Page CSS size
Question answered: how much inline and external CSS do popular documentation pages transfer in the initial HTML response?

This snapshot counts inline `style` tags and external stylesheets discovered from each page's initial HTML. Master CSS stays near **6 kB brotli** on this documentation site because progressive rendering emits the page rules first, then lets runtime rendering handle later dynamic classes.

Limits: this is a page transfer measurement, not a browser timing metric. Browser cache state, CDN behavior, JavaScript-loaded styles, fonts, images, and application runtime work are outside the snapshot.

### Static CSS output, structure, and production build
Question answered: how do equivalent static Master CSS and Tailwind CSS v4 fixtures compare for generated CSS bytes, CSS AST structure, and full production command timing?

The curated snapshot combines `css-output-size`, `build-performance`, and `css-structure` results. The headline charts use the `docs` fixture and CLI variants so the first view stays focused on static artifact output.

  <figcaption>Curated static comparison snapshot across all measured fixtures.</figcaption>

#### Representative fixture
The `docs` fixture represents a dense article and documentation layout with navigation, code blocks, and tables.

  <figcaption>Brotli-compressed CSS output for the `docs` fixture using the CLI setup.</figcaption>

  <figcaption>Cold production command median for the `docs` fixture using the CLI setup.</figcaption>

  <figcaption>Generated declaration counts for the `docs` fixture from a CSS AST parse.</figcaption>

#### Complete data
The complete tables keep every measured fixture and both CLI/Vite setup variants.

  <figcaption>Raw, gzip, and brotli CSS byte data for every measured fixture and setup.</figcaption>

  <figcaption>Cold and repeat production command timing data for every measured fixture and setup.</figcaption>

  <figcaption>Rule, selector, declaration, at-rule, layer, and selector-shape data parsed from generated CSS.</figcaption>

Interpretation: CSS structure metrics explain why byte counts differ before browser-cost claims are introduced. Tailwind CSS and Master CSS fixtures target equivalent rendered UI intent, not identical class strings.

Limits: these numbers do not measure browser parsing, style recalculation, layout, paint, interaction cost, watch mode, or HMR.

### Build path diagnostics
Question answered: which Master CSS startup, integration, extraction, and compiler substeps explain full command cost?

This snapshot combines `startup-diagnostics`, `build-diagnostics`, `compiler-diagnostics`, and `extraction-diagnostics`. It explains the Master CSS build path; it is not a cross-framework production benchmark.

  <figcaption>Curated Master CSS build-path diagnostics snapshot.</figcaption>

  <figcaption>Diagnostic medians for the `docs` fixture. Startup probes are directional and are not additive flamegraphs.</figcaption>

  <figcaption>Complete build-path diagnostic snapshot data for every measured fixture.</figcaption>

Interpretation: ordinary fixture command cost is currently dominated by cold process/module startup and integration startup overhead, while normal-fixture compiler and extraction medians are smaller.

Limits: diagnostic probes explain envelopes and substeps. They do not justify changing generated CSS, cascade order, extraction correctness, runtime behavior, or public APIs.

### Browser CSS cost
Question answered: how does CSS rule volume affect Chromium style recalculation, layout, and paint when DOM is fixed, and how does DOM scaling behave when CSS is fixed?

This suite uses local fixture pages, deterministic external CSS, Playwright, and Chromium tracing. It is a browser-only calibration suite, not a Master CSS versus Tailwind CSS comparison.

  <figcaption>Curated browser CSS cost snapshot.</figcaption>

  <figcaption>Warm-cache trace medians while CSS rule volume grows and visible DOM stays fixed.</figcaption>

  <figcaption>Warm-cache trace medians while DOM volume grows and CSS stays fixed.</figcaption>

  <figcaption>Complete browser CSS cost data for CSS volume and DOM scaling variants.</figcaption>

Interpretation: the CSS volume curve is the main input for judging how much upfront CSS a delivery mode asks Chromium to load before interaction. The DOM scaling control helps separate DOM, style, and layout scaling from CSS payload size.

Limits: these numbers do not measure runtime rule generation, real application JavaScript, Firefox, WebKit, CDN behavior, or public real-world page variance. Chromium trace event names can change across browser versions.

### Master CSS delivery modes
Question answered: what initial payload, local Chromium load cost, runtime bootstrap cost, manifest loading, and progressive adoption behavior does each delivery mode produce?

The suite compares Master CSS static, runtime, progressive, and Tailwind CSS static browser-control variants across the static fixture set.

  <figcaption>Curated Master CSS delivery modes snapshot.</figcaption>

#### Representative fixture
The primary charts show the `docs` fixture.

  <figcaption>Brotli-compressed initial payload composition for the `docs` fixture.</figcaption>

  <figcaption>Local Chromium load timing medians for the `docs` fixture.</figcaption>

  <figcaption>Runtime bootstrap and observe medians for Master runtime and progressive modes.</figcaption>

  <figcaption>Complete delivery mode snapshot data for every measured fixture and mode.</figcaption>

Interpretation: progressive begins with server/build-time CSS in the HTML and adds a runtime handoff. Runtime mode starts smaller on CSS output but pays browser runtime and manifest costs when classes are discovered in the DOM.

Limits: these numbers measure initial local fixture loads only. Post-load mutation belongs to the interaction suite. Master static and Tailwind static use CLI-generated CSS from equivalent fixture intent, not identical class strings.

### Interaction cost
Question answered: how expensive are post-load class toggles, first-time runtime rule generation, DOM append/remove, theme switches, viewport resize, and cleanup cycles?

The suite measures local Chromium interactions across `dynamic`, `dashboard`, and `stress-dom` fixtures. Tailwind CSS static variants act as browser controls for style/layout/paint work; they do not have a client-side runtime rule-generation equivalent.

  <figcaption>Curated interaction cost snapshot.</figcaption>

  <figcaption>Mutation-ready medians for primary `dynamic` fixture scenarios.</figcaption>

  <figcaption>Runtime rule-update medians for Master runtime and progressive `dynamic` fixture scenarios.</figcaption>

  <figcaption>Complete interaction cost data for supported fixture, mode, and scenario combinations.</figcaption>

Interpretation: runtime and progressive modes should be read in two layers: user-visible mutation readiness, then runtime stylesheet work. Existing-rule toggles, first-time class generation, DOM changes, and cleanup cycles answer different performance questions.

Limits: these numbers do not measure route transitions, HMR, dev workflow, CDN behavior, Firefox, WebKit, or public real-world application variance.

### Browser lifecycle and INP-style interactions
Question answered: can small runtime/progressive work plus low CSSOM/rule volume lower whole-browser lifecycle cost compared with zero-runtime static CSS?

The suite is the closest current test of the core hypothesis. It keeps Tailwind CSS as the zero-runtime static browser-control setup and compares it with Master CSS static, runtime, and progressive setups across lifecycle scenarios. The latency value is an INP-style local fixture measurement, not real Web Vitals INP.

  <figcaption>Coverage and correctness checks for browser lifecycle evidence.</figcaption>

  <figcaption>Five-minute long-session medians for browser rendering and runtime work.</figcaption>

  <figcaption>Complete five-minute long-session evidence for every mode.</figcaption>

Interpretation: current five-minute local Chromium evidence directionally supports the hypothesis for style recalculation: Master runtime and progressive show lower style recalculation medians than the Tailwind static browser control while carrying measured runtime mutation work. Layout, paint, long-task, and INP-style latency medians remain measured data, not wins, because they do not establish the same directional advantage.

Limits: selector matching time remains an inference from CSSOM/rule volume plus style recalculation unless Chromium exposes a stable trace metric for it. CSSOM memory and GC pressure are reported only when the collection method is stable enough to reproduce on the same browser version.

---

## Methodology and limits

### Fixture matrix
Fixture-based suites compare equivalent UI output, not identical class strings.

| Fixture | Purpose | Stress area |
|---------|---------|-------------|
| `minimal` | Small useful page or landing section | Framework overhead, cold-start cost, and minimum payload |
| `docs` | Dense article, navigation, code blocks, tables | Documentation layout, typography, nested content, and CSS output shape |
| `dashboard` | Repeated cards, tables, filters, charts, states | Rule reuse, duplicated utilities, and large DOM |
| `dynamic` | Insert, remove, and toggle classes during interaction | Runtime mutation, extraction limits, and recalculation cost |
| `stress-css` | Controlled small, medium, and large CSS outputs | Browser style calculation as CSS volume grows |
| `stress-dom` | Large DOM with fixed CSS | DOM/style/layout scaling isolated from CSS output size |

Each fixture should publish source markup, Master CSS setup, Tailwind CSS setup when relevant, generated outputs, and exact commands.

### Metric families
| Area | Examples |
|------|----------|
| Transfer | Raw, gzip, and brotli bytes for CSS, HTML, runtime JavaScript, manifest JSON, hydration manifest, and request count |
| CSS structure | Rule count, selector count, declaration count, cascade layers, at-rules, custom properties, and selector complexity |
| Build | Cold command, repeat command, startup probes, scanner time, extraction time, and compiler time |
| Browser load | Navigation-ready time, stylesheet parse/attach, style recalculation, layout, paint, long tasks, and cache mode |
| Runtime | Bootstrap, observe/hydrate, rule generation, CSSOM insertion/deletion, MutationObserver delivery, retained generated rules, and cleanup cycles |
| Interaction | Existing-class toggles, new-rule generation, DOM append/remove, theme switch, viewport/container resize, and INP-style local latency |
| Correctness | Output hash, screenshot smoke, computed-style assertions, missing-rule checks, generated file inventory, cleanup validity, and progressive adoption |

Browser timings should be measured with fixed viewport, device scale, browser version, warmup rounds, measured rounds, and separated cold/warm cache modes when cache state changes interpretation.

### Delivery modes
| Mode | Benchmark focus |
|------|-----------------|
| Runtime | Runtime bundle size, manifest delivery, initial DOM scan, CSSOM insertion/deletion, mutation handling, and repeated mutation cleanup |
| Static | Generated stylesheet size, source scanning, source include/exclude behavior, safelist/blocklist, warm rebuild, and mixed authored CSS |
| Progressive | Inline first-page CSS, hydration manifest size, runtime adoption success/fallback, and post-hydration dynamic classes |

Runtime and progressive rendering optimize what CSS is delivered up front. They do not make browser style calculation free: when an interaction creates many first-time utility rules, the browser still needs to account for those new stylesheet rules before it can paint the updated DOM.

### Tailwind CSS comparisons
Tailwind CSS comparisons use pinned Tailwind CSS v4 tooling and official entrypoints for static output, production build, and static browser-control measurements.

Runtime-equivalent claims should be avoided because Tailwind CSS does not perform the same client-side class observation work as Master CSS runtime rendering. In the runtime/CSSOM hypothesis, Tailwind CSS represents the zero-runtime static baseline, not a runtime competitor.

### Publication rules
Curated snapshots are committed; raw reports are not. Raw reports, traces, diagnostics, screenshots, downloaded history, and temporary workspaces stay under `benchmarks/.results/**`.

Every public result should include the fixture, adapter or mode, package versions, command, machine, operating system, browser version when relevant, viewport/device scale, warmup rounds, measured rounds, cache mode, sample count, and known limits.

Allowed public claim language is intentionally narrow: use "directional evidence," "supports the hypothesis in this fixture," and "static browser-control baseline." Avoid "proves," "overall faster," and "runtime wins" unless future same-machine repeat evidence passes an explicit direction and threshold gate for the named metric.

Real Web Vitals and Lighthouse scores are outside the current benchmark source. The benchmark suite prefers direct output, build, trace, and interaction measurements that can be tied back to a specific fixture and command.

---

## Data sources
Curated snapshots are committed under `benchmarks/**/snapshot.json` and `benchmarks/browser-lifecycle/long-session-evidence.json`.

| Result | Committed data | Snapshot command |
|--------|----------------|------------------|
| Page CSS size | [`docs-page-css-size/snapshot.json`](https://github.com/master-co/css/tree/rc/benchmarks/docs-page-css-size/snapshot.json) | `UPDATE_BENCHMARK_SNAPSHOT=true pnpm --filter ./benchmarks bench:docs-page-css-size` |
| Static CSS output, structure, and production build | [`tailwind-static-comparison/snapshot.json`](https://github.com/master-co/css/tree/rc/benchmarks/tailwind-static-comparison/snapshot.json) | `pnpm --filter ./benchmarks bench:css-output-size`, `pnpm --filter ./benchmarks bench:build-performance`, `pnpm --filter ./benchmarks bench:css-structure`, then `pnpm --filter ./benchmarks snapshot:tailwind-static-comparison` |
| Build path diagnostics | [`build-path-diagnostics/snapshot.json`](https://github.com/master-co/css/tree/rc/benchmarks/build-path-diagnostics/snapshot.json) | `BENCHMARK_ROUNDS=3 pnpm --filter ./benchmarks bench:startup-diagnostics`, `BENCHMARK_ROUNDS=3 pnpm --filter ./benchmarks bench:build-diagnostics`, `BENCHMARK_ROUNDS=3 pnpm --filter ./benchmarks bench:compiler-diagnostics`, `BENCHMARK_ROUNDS=3 pnpm --filter ./benchmarks bench:extraction-diagnostics`, then `pnpm --filter ./benchmarks snapshot:build-path-diagnostics` |
| Browser CSS cost | [`browser-css-cost/snapshot.json`](https://github.com/master-co/css/tree/rc/benchmarks/browser-css-cost/snapshot.json) | `pnpm --filter ./benchmarks bench:browser-css-cost`, then `pnpm --filter ./benchmarks snapshot:browser-css-cost` |
| Master CSS delivery modes | [`master-delivery-modes/snapshot.json`](https://github.com/master-co/css/tree/rc/benchmarks/master-delivery-modes/snapshot.json) | `pnpm --filter ./benchmarks bench:master-delivery-modes`, then `pnpm --filter ./benchmarks snapshot:master-delivery-modes` |
| Interaction cost | [`interaction-cost/snapshot.json`](https://github.com/master-co/css/tree/rc/benchmarks/interaction-cost/snapshot.json) | `INTERACTION_COST_ROUNDS=3 INTERACTION_COST_WARMUP_ROUNDS=1 pnpm --filter ./benchmarks bench:interaction-cost`, then `pnpm --filter ./benchmarks snapshot:interaction-cost` |
| Browser lifecycle | [`browser-lifecycle/snapshot.json`](https://github.com/master-co/css/tree/rc/benchmarks/browser-lifecycle/snapshot.json) | `BROWSER_LIFECYCLE_ROUNDS=3 BROWSER_LIFECYCLE_WARMUP_ROUNDS=1 BROWSER_LIFECYCLE_REPORT_LABEL=baseline-review-$(date +%F) BENCHMARK_COMMAND_TIMEOUT_MS=900000 pnpm --filter ./benchmarks bench:browser-lifecycle`, then `pnpm --filter ./benchmarks snapshot:browser-lifecycle` |
| Five-minute lifecycle evidence | [`browser-lifecycle/long-session-evidence.json`](https://github.com/master-co/css/tree/rc/benchmarks/browser-lifecycle/long-session-evidence.json) | Run `bench:browser-lifecycle` once per mode with `BROWSER_LIFECYCLE_SCENARIOS=long-session`, `BROWSER_LIFECYCLE_MODES=<mode>`, `BROWSER_LIFECYCLE_ROUNDS=1`, `BROWSER_LIFECYCLE_WARMUP_ROUNDS=1`, `BROWSER_LIFECYCLE_LONG_SESSION_MS=300000`, `BROWSER_LIFECYCLE_MEASURE_TIMEOUT_MS=420000`, `BROWSER_LIFECYCLE_REPORT_LABEL=long-session-5m-<mode>`, and `BENCHMARK_COMMAND_TIMEOUT_MS=900000`, then `pnpm --filter ./benchmarks evidence:browser-lifecycle` |

Lifecycle publication checks are `pnpm --filter ./benchmarks check:browser-lifecycle`, `node benchmarks/browser-lifecycle/check-readiness.mjs --profile long-session-evidence browser-lifecycle/long-session-evidence.json`, and `node benchmarks/browser-lifecycle/compare-stability.mjs` after same-machine repeat reports.

---

# Breakpoints

Source: https://rc.css.master.co/en/guide/breakpoints

Summary: Define viewport breakpoint tokens and use responsive variants for page-level layout, typography, and density changes.

## Overview
Breakpoints are viewport thresholds. They answer one question: when the available page width changes, which product-level decisions should change with it?

Use breakpoint variants for navigation modes, app shells, page grids, typography shifts, and density changes that should follow the viewport. Use [containers](/guide/containers) when a reusable component should respond to the size of its parent instead.

Master CSS defines breakpoint tokens in the theme layer. The variant syntax is `@<name>`, so `@md` reads from `breakpoint-md`.

---

## Define breakpoint variables
Breakpoint variables belong in your project CSS entry. Keep them product-wide and stable; they are part of the layout language shared by docs, components, designers, and tests.

```css name=index.css
@theme {
  --breakpoint-sm: 48rem;
  --breakpoint-md: 64rem;
  --breakpoint-lg: 80rem;
}
```

Use CSS length values for breakpoint tokens; `rem` keeps thresholds aligned with the root font size. Unitless numbers are still accepted and interpreted on the 16px scale for existing projects. The scale tables show px/rem pairs for readability, while generated queries use the normalized rem value from the manifest.

---

## Use breakpoint variants
Append `@<breakpoint>` to a utility when that declaration should start at a viewport threshold.

```html
<!-- @MARK font:2xl --><!-- @MARK font:3xl@md -->
<h1 class="font:2xl font:3xl@md">Build for the current viewport</h1>
```
Unqualified classes are the base state. Breakpoint variants layer changes on top, which makes the default mental model mobile-first without forcing every product to design only for phones.

---

## Breakpoint scale
Use the scale as design vocabulary, not as device names. A token such as `md` should mean "the medium page layout starts here", not "iPad" or "desktop".

The exact values can differ by product. The important part is that the tokens stay semantically consistent: smaller tokens unlock compact layout changes, larger tokens unlock wider page structures.

---

## Manifest changes around decisions
A breakpoint should exist because something meaningful changes. Avoid adding thresholds only because a popular device width exists.

| Decision | Good breakpoint use | Better handled elsewhere |
| --- | --- | --- |
| Navigation | Switch from bottom tabs to top navigation | A single card changing layout inside a sidebar |
| App shell | Add a persistent sidebar at `@md` | Button padding that only belongs to one component |
| Page grid | Move from 4 columns to 8 or 12 columns | A gallery that depends on its rendered container |
| Typography | Increase heading scale when line length and hierarchy need it | Local text measure such as `max-w:72ch` |
| Density | Increase section rhythm and outer margins | Hard-coded spacing values repeated in markup |

```html
<!-- @MARK grid-cols:4 --><!-- @MARK grid-cols:8@sm --><!-- @MARK grid-cols:12@md -->
<section class="grid-cols:4 gap:md grid-cols:8@sm grid-cols:12@md gap:lg@md">
  ...
</section>
```
---

## Query viewport ranges
Use [comparison](/guide/conditional-queries#comparison-operators) and [logical](/guide/conditional-queries#logical-operators) operators when a style belongs to a range instead of every larger viewport.

```html
<!-- @MARK hidden@sm&<=md -->
<aside class="hidden@sm&<=md">...</aside>
```
Ranges should be rare. If a rule appears at one size, disappears, and returns later, check whether the component is really responding to its container or whether the layout hierarchy should change.

---

## Pair with container width caps
Viewport breakpoints decide when the page changes. Container size values decide how wide a wrapper may grow. Keep those roles separate.

```html
<!-- @MARK max-w:4xl@sm --><!-- @MARK max-w:5xl@md --><!-- @MARK max-w:7xl@lg -->
<main class="w:full mx:auto px:md max-w:4xl@sm max-w:5xl@md px:xl@md max-w:7xl@lg">
  ...
</main>
```

Here `@sm`, `@md`, and `@lg` come from the breakpoint namespace. The `4xl`, `5xl`, and `7xl` width values come from the [container namespace](/guide/containers).

---

## Prefer stable breakpoint habits
(x) Breakpoints are named after devices.

```css
@theme {
  --breakpoint-iphone: 24.375rem;
  --breakpoint-ipad: 51.25rem;
}
```

(o) Breakpoints are named after layout thresholds.

```css
@theme {
  --breakpoint-xs: 40rem;
  --breakpoint-sm: 48rem;
  --breakpoint-md: 64rem;
}
```

(x) A reusable card responds to the viewport, so it breaks when placed in a narrow sidebar.

```html
<article class="grid-cols:2@md">...</article>
```

(o) Page structure uses breakpoints, while reusable components use container queries.

```html
<main class="grid-cols:12@md">
  <section class="container">
    <article class="grid-cols:2@container(md)">...</article>
  </section>
</main>
```

Use breakpoints sparingly, name them for layout meaning, and keep component-local responsiveness in [containers](/guide/containers).

---

# Cascade Layers

Source: https://rc.css.master.co/en/guide/cascade-layers

Summary: Understand how theme, base, defaults, components, and utilities layers control style priority.

## How layers control the cascade
CSS cascade layers let a stylesheet decide which groups of rules should win before selector specificity is compared. Master CSS uses that native model as the backbone of its output, so utilities, project styles, presets, variables, and resets can coexist without turning every override into a specificity contest.

The default `@master/css/base.css` stylesheet declares the layer order:

```css
@layer theme, base, defaults, components, utilities;
```

Layers declared later have higher priority for normal declarations. In Master CSS, the practical order is:

```txt
utilities > components > defaults > base > theme
```

Generated CSS emits rules into those layer blocks. Native style rules that use `@compose` or `@variant` lower to ordinary CSS in the stylesheet that contains them. This order is intentional: foundation rules go early, product vocabulary goes in the middle, and one-off utility decisions stay late enough to override project styles when markup asks for it.

---

## The five layers
### Base
Use `base` for low-level resets and normalization. This layer should make the browser environment predictable, not express a brand or component design.

Rules enter the base layer through `@base` syntax or regular CSS written inside `@layer base`.

### Theme
Use `theme` for generated CSS custom properties. Tokens defined in `@theme` are emitted here only when a generated rule references them.

Theme rules are intentionally early: they provide values that later layers consume, but they should not compete with layout, color, or component declarations directly.

### Defaults
Use `defaults` for broad element defaults such as typography inside an article, code styling, or vendor defaults you want to keep below app-level styles.

Rules enter the defaults layer through `@default` syntax or `@defaults` managed definitions. Because defaults sit before `components` and `utilities`, components and utilities can still override it without `!important`.

### Components
Use `components` for project styles that carry product meaning: `.btn`, `.card`, `.field`, `.toolbar`, `.app-shell`. In project CSS, write these managed class definitions in `@components`.

```css name=index.css
@components {
  btn {
    @compose inline-flex;
    background-color: var(--color-primary);
  }
}
```

The compiler converts these definitions into static manifest utilities with `layer: 'components'`. They remain on-demand: defining `.btn` does not emit CSS until `btn` is used or scanned from source.

### Utilities
Use `utilities` for built-in utilities, animation utilities, and custom static utilities written in `@utilities`. Custom utilities can use native declarations, `@compose`, nested selectors, and `@variant` blocks.

```css name=index.css
@utilities {
  flow {
    @compose grid gap:md;
  }

  content-auto {
    content-visibility: auto;
    contain-intrinsic-size: auto 32rem;
  }
}
```

Utilities is the final layer, so utility classes can intentionally override component styles from markup.

---

## A complete flow
This example touches every generated layer. The project CSS entry defines theme variables and a component, while the markup uses base, defaults, and utilities.

```css name=index.css
@theme light {
  --color-primary: #000000;
}

@theme dark {
  --color-primary: #ffffff;
}

@components {
  btn {
    @compose inline-flex;
    background-color: var(--color-primary);
  }
}
```
Notice the shape of the output:

- `@master/css/base.css` defines the global layer order once.
- Theme variables are emitted in `@layer theme`.
- The `.btn` definition is emitted in `@layer components`.
- `flex` and `animation:fade|1s` are emitted in `@layer utilities`.
- `@keyframes` are emitted at the top level, outside cascade layers.

---

## Base is for normalization
Put reset-style rules in the base layer when they should sit below every design decision.

(i) Add base rules in the stylesheet your app loads when the reset is part of the application shell.

```css name=globals.css
@layer base {
  ul {
    list-style: none;
  }
}
```

You can also use `@base` from markup:

In most projects, import the default `@master/css` stylesheet; it includes [base styles](/guide/global-styles#base-layer) in the base layer.

---

## Defaults are for broad defaults
Put brand or content defaults in the defaults layer when they should apply across selected descendants but still remain easy to override.

(x) Do not put brand defaults into the base layer.

```html
<!-- @MARK font:mono_:is(code,pre)@base -->
<body class="font:mono_:is(code,pre)@base">…</body>
```

Base should normalize. Defaults should express broad design defaults.

---

## Utilities can override components
Layer order is checked before selector specificity. That means a utility can override a component style even when the component style comes from a named component.

For example, `.btn` defines `display: inline-flex` in the components layer. Adding `flex` in markup moves the final `display` decision to the utilities layer.

```html
<!-- @MARK btn flex -->
<button class="btn flex">Submit</button>
```

```css
  @layer components {
    .btn {
      display: inline-flex;
      …
    }
  }

  @layer utilities {
    .flex {
      display: flex;
    }
  }
  ```

Use this as the normal override path: keep reusable product styles in `components`, then use utilities in `utilities` for local adjustments.

---

## Defaults stay below local decisions
Defaults rules are useful for descendants because they can establish defaults without blocking local classes.

For example, set paragraph text to `1rem` across an article, then override one paragraph with `text:1.5rem`.

This is the reason defaults sit before components and utilities: defaults should be broad, but final element-level decisions should stay close to the element.

---

## Writing regular CSS
Regular CSS outside `@layer` follows the native cascade outside Master CSS's layer model. If you want a rule to participate in the same priority system, place it in the layer that matches its responsibility.

```css name=app.css
@layer defaults {
  article :is(h1, h2, h3) {
    font-weight: 700;
  }
}

@layer components {
  .card {
    border-radius: .75rem;
  }
}
```

Native `@layer` is never compiler-managed. For on-demand managed definitions, use the explicit directive forms:

```css name=index.css
@utilities {
  content-auto {
    content-visibility: auto;
  }
}

@components {
  card {
    @compose block;
    border-radius: .75rem;
  }
}
```

Native style rules can still compose Master CSS utilities when the rule should remain ordinary stylesheet output:

```css name=app.css
.card {
  @compose block p:md;

  @dark {
    @compose bg:neutral-90;
  }
}
```

---

## Summary
Cascade layers are the contract that makes Master CSS predictable:

1. `base` normalizes the platform.
1. `theme` provides generated variables.
1. `defaults` sets broad defaults.
1. `components` holds project vocabulary from CSS-defined component classes.
1. `utilities` holds utilities and final local adjustments.

When declarations conflict, solve the problem by choosing the correct layer first. Reach for specificity or `!important` only when you are intentionally integrating with CSS that sits outside this layer model.

---

# Code Linting for Master CSS

Source: https://rc.css.master.co/en/guide/code-linting

Summary: An ESLint integration for enforcing team coding styles, making your template markup more organized, and catching syntax errors early.

## Overview
Code linting is the enforceable layer of a team's Master CSS authoring policy. It validates class strings where they are authored: markup attributes, framework templates, JavaScript utility calls, and configured class declarations. The ESLint integration resolves the active project manifest, then checks each class against Master CSS syntax, generated CSS declarations, and team policy.

Use the [installation integrations](/guide/installation/integrations) to add the recommended config to a project. Use [Visual Studio Code setup](/guide/installation/vscode) when you want the VS Code ESLint extension to surface class policy diagnostics and apply sort-on-save.

The Master CSS VS Code extension and the VS Code ESLint extension are complementary. Master CSS provides completion, hover, color tools, highlighting, directive diagnostics, manifest diagnostics, and directive formatting. ESLint provides `sort-classes`, `prefer-canonical-classes`, `no-conflicting-classes`, `no-invalid-classes`, and opt-in raw-value policy diagnostics, so the Master CSS extension does not duplicate these warnings by default.

For scripts, CI probes, and other tools that need a Master CSS native machine interface without loading an ESLint parser stack, use `npx @master/css-cli lint --format json`. Treat it as a preflight diagnostics surface; keep `eslint .` as the normal human development and CI lint command for JavaScript and framework projects.

When an AI client supports tool calls, the [Master CSS MCP server](/guide/mcp-server) can run the same lint policy through `mastercss_lint_project` and preview safe fixes. ESLint should still remain the default human development and CI lint workflow for JavaScript and framework projects.

Use `npx @master/css-cli inspect --format json` when the tool needs scanner state, stylesheet entry metadata, generated CSS size, or explicit missing CSS checks. `inspect` is not a replacement for lint policy rules such as class sorting, canonical classes, conflicts, or raw-value policy.

---

## Install the recommended config
The recommended config enables the canonical rule set:

```js name=eslint.config.js
import { defineConfig } from 'eslint/config'
import css from '@master/eslint-config-css'

export default defineConfig([
  ...css
])
```

| Rule | Default | Fixable | Purpose |
| --- | --- | --- | --- |
| `@master/css/sort-classes` | `warn` | Yes | Sort classes into a stable generated-rule order. |
| `@master/css/no-invalid-classes` | `error` | No | Report invalid Master CSS syntax and invalid generated CSS. |
| `@master/css/no-conflicting-classes` | `warn` | Yes | Report full and partial declaration conflicts in the same variant scope. |
| `@master/css/prefer-canonical-classes` | `warn` | Yes | Prefer semantic utilities, theme tokens, property aliases, composition utilities, and condition order. |

---

## Linting rules
### Sort classes
`@master/css/sort-classes` keeps class strings stable and reviewable. It sorts known Master CSS classes before unknown classes, follows generated layer and condition priority, and groups base classes by their generated CSS intent: position and layout, size, spacing, box, typography, paint, and effects.

```mcss
bg:white font:md flex px:4x rel w:full shadow:lg rounded z:10 gap:2x <!-- [!code --] -->
rel z:10 flex gap:2x w:full px:4x rounded font:md bg:white shadow:lg <!-- [!code ++] -->
```

Variants such as `:hover`, `@dark`, and `@sm` stay after the base class body in generated condition order.

```mcss
bg:black:hover flex p:2x w:full block@dark text-center <!-- [!code --] -->
flex w:full p:2x text-center bg:black:hover block@dark <!-- [!code ++] -->
```

Sorting also removes duplicate class values in the same class string.

```mcss
inline-flex px:md inline-flex <!-- [!code --] -->
inline-flex px:md <!-- [!code ++] -->
```

Ordering is a formatting policy. It does not change generated CSS, but it makes class strings easier to review and keeps automated fixes deterministic across frameworks and editors.

### No invalid classes
`@master/css/no-invalid-classes` reports classes that match Master CSS syntax but generate invalid CSS.

```html
<button class="font:">...</button>
```

(x) Invalid value for `font` property.

By default, unmatched classes are ignored so teams can mix Master CSS with existing global classes during migration.

Enable `disallowUnknownClass` when the project should only use classes known to the active Master CSS manifest:

```js name=eslint.config.js
import { defineConfig } from 'eslint/config'
import css from '@master/eslint-config-css'

export default defineConfig([
  ...css,
  {
    rules: {
      '@master/css/no-invalid-classes': ['error', {
        disallowUnknownClass: true
      }]
    }
  }
])
```

```html
<button class="btn">...</button>
```

(x) `"btn" is not a valid or known class.`

Define project classes in the CSS entry when they are intentional:

```css name=index.css
@components {
  btn {
    @compose inline-flex px:md;
  }
}
```

### Prefer canonical classes
`@master/css/prefer-canonical-classes` keeps committed classes close to the project vocabulary.

```mcss
text-align:center font:16px margin:md <!-- [!code --] -->
text-center font:md m:md <!-- [!code ++] -->
```

It also canonicalizes multi-value tokens and direct CSS variable references when every value maps to the active theme:

```mcss
m:1rem|1.5rem fg:var(--color-red-60) <!-- [!code --] -->
m:md|lg fg:red-60 <!-- [!code ++] -->
```

Related size and spacing pairs can be composed into shorter utilities:

```mcss
w:md h:md mt:md mb:md padding-left:1rem padding-right:1rem <!-- [!code --] -->
size:md my:md px:md <!-- [!code ++] -->
```

Condition suffixes are kept in a stable order for safe breakpoint and mode combinations:

```mcss
block@dark@sm font:16px@dark@sm mt:md@dark@sm mb:md@dark@sm <!-- [!code --] -->
block@sm@dark font:md@sm@dark my:md@sm@dark <!-- [!code ++] -->
```

The same fixes apply inside unquoted `@compose` class lists when ESLint is running on a parsed CSS or style source:

```css
.btn {
  @compose text-align:center contain:content bg:blue-60:hover@sm; /* [!code --] */
  @compose text-center; /* [!code ++] */
  contain: content; /* [!code ++] */
  &:hover { @variant sm { @compose bg:blue-60; } } /* [!code ++] */
}
```

Standalone CSS files are checked by the default `@master/eslint-config-css` export:

```js name=eslint.config.js
import { defineConfig } from 'eslint/config'
import css from '@master/eslint-config-css'

export default defineConfig([
  ...css
])
```

Framework files with parsed `<style>` blocks, such as Vue and Svelte files, can lint `@compose` in those style blocks through the normal framework parser setup.

| Option | Default | Effect |
| --- | --- | --- |
| `preferStaticUtilities` | `true` | Prefer named or semantic utilities such as `text-center` over native declaration forms. |
| `preferThemeTokens` | `true` | Prefer theme token values such as `font:md` over equivalent raw values. |
| `preferPropertyAliases` | `true` | Prefer shorter property aliases such as `m:md` over `margin:md`. |
| `preferVariableReferences` | `true` | Prefer token keys such as `fg:red-60` over direct references such as `fg:var(--color-red-60)`. |
| `preferMultiValueTokens` | `true` | Prefer tokenized multi-value forms such as `m:md|lg` over equivalent raw segments. |
| `preferCompositionUtilities` | `true` | Prefer composed utilities such as `size:md` over equivalent `w:md h:md` pairs. |
| `preferConditionOrder` | `true` | Prefer stable condition suffix order such as `@sm@dark` over `@dark@sm`. |
| `preferNativeDeclarationsInCompose` | `true` | Prefer native declarations over declaration-like classes inside CSS `@compose`. |
| `preferVariantBlocksInCompose` | `true` | Prefer `@variant`, `@dark`, and `@light` blocks over suffixes inside CSS `@compose`. |

Disable one family when a team wants a more literal authoring style:

```js name=eslint.config.js
import { defineConfig } from 'eslint/config'
import css from '@master/eslint-config-css'

export default defineConfig([
  ...css,
  {
    rules: {
      '@master/css/prefer-canonical-classes': ['warn', {
        preferStaticUtilities: true,
        preferThemeTokens: true,
        preferPropertyAliases: false
      }]
    }
  }
])
```

### No conflicting classes
`@master/css/no-conflicting-classes` reports classes that emit the same declaration properties in the same variant scope.

```mcss
m:0.625rem m:5x <!-- [!code --] -->
m:5x <!-- [!code ++] -->
```

(!) `"m:0.625rem" is overridden by "m:5x".`

Variant scope matters. Classes with different selectors, modes, or conditions do not conflict with each other.

```mcss
m:10x@sm m:3.125rem@md
```

When a conflict can be fixed automatically, the rule removes the earlier overridden class and keeps the later class. Review the fix if the authoring order was carrying intent.

Partially overlapping spacing, physical inset, radius, and border width/color/style shorthands are split so the surviving declarations are kept:

```mcss
mx:md ml:lg <!-- [!code --] -->
mr:md ml:lg <!-- [!code ++] -->
```

```mcss
b-solid bt-dashed <!-- [!code --] -->
br-solid bb-solid bl-solid bt-dashed <!-- [!code ++] -->
```

---

## Supported sources
The default config checks class strings in common markup, JavaScript locations, and unquoted `@compose` class lists in parsed CSS/style sources.

| Setting | Default | Use |
| --- | --- | --- |
| `classAttributes` | `['class', 'className']` | Markup attributes that contain class strings. |
| `classFunctions` | `clsx`, `cva`, `ctl`, `cv`, `classnames`, `styled`, `classList.*` | JavaScript callees whose arguments can contain class strings. |
| `classDeclarations` | `[]` | Project-specific variables or object properties that should be treated as class declarations. |
| `ignoredKeys` | `['compoundVariants', 'defaultVariants']` | Object keys ignored while traversing variant config objects. |

Customize settings under the `@master/css` settings key:

```js name=eslint.config.js
import { defineConfig } from 'eslint/config'
import css from '@master/eslint-config-css'

export default defineConfig([
  ...css,
  {
    settings: {
      '@master/css': {
        classAttributes: ['class', 'className', 'containerClass'],
        classFunctions: ['clsx', 'cva'],
        classDeclarations: ['classes']
      }
    }
  }
])
```

---

## Team policy
Use the recommended config for most projects:

```js name=eslint.config.js
import { defineConfig } from 'eslint/config'
import css from '@master/eslint-config-css'

export default defineConfig([
  ...css
])
```

Use stricter validation when the team wants every class to come from Master CSS syntax or the project manifest:

```js name=eslint.config.js
import { defineConfig } from 'eslint/config'
import css from '@master/eslint-config-css'

export default defineConfig([
  ...css,
  {
    rules: {
      '@master/css/no-invalid-classes': ['error', {
        disallowUnknownClass: true
      }]
    }
  }
])
```

Customize canonicalization when a team wants to keep one class family literal while still applying the other recommendations:

```js name=eslint.config.js
import { defineConfig } from 'eslint/config'
import css from '@master/eslint-config-css'

export default defineConfig([
  ...css,
  {
    rules: {
      '@master/css/prefer-canonical-classes': ['warn', {
        preferStaticUtilities: true,
        preferThemeTokens: true,
        preferPropertyAliases: false
      }]
    }
  }
])
```

Enable raw value policy when the team wants token-backed utilities to use tokens unless a value is explicitly allowed:

```js name=eslint.config.js
import { defineConfig } from 'eslint/config'
import css from '@master/eslint-config-css'

export default defineConfig([
  ...css,
  {
    rules: {
      '@master/css/no-unapproved-raw-values': ['warn', {
        allowProperties: ['width', 'height'],
        allowedPatterns: ['^var\\(', '^calc\\(']
      }]
    }
  }
])
```

```mcss
font:15px m:17px fg:#123456
```

(!) Unexpected raw value `"15px"` in `"font:15px"`. Use a token or allow it explicitly.

Use editor sort-on-save for low-friction cleanup:

```json name=.vscode/settings.json
{
  "eslint.codeActionsOnSave.rules": [
    "@master/css/sort-classes"
  ]
}
```

See [Visual Studio Code setup](/guide/installation/vscode) for the full editor flow.

---

## Setup links
- [Installation integrations](/guide/installation/integrations) for framework setup.
- [Visual Studio Code setup](/guide/installation/vscode) for editor diagnostics and sort-on-save.

---

# Colors

Source: https://rc.css.master.co/en/guide/colors

Summary: Choose palette steps, preset color roles, and mode-aware hue aliases for light and dark UI.

## Overview

Master CSS color tokens cover fixed palette steps, preset UI roles, and mode-aware hue aliases. Use palette steps when you need an exact swatch. Use preset roles for the repeated color decisions that define application structure, text hierarchy, and light or dark mode behavior.

---

## Default color palette
The preset palette is a P3-compatible set of fixed color families. Each family ranges from `0`, `5`, `10`, and then by tens through `100`.

Choose palette steps directly for swatches, illustrations, brand accents, and status-color foundations. For page backgrounds, surfaces, lines, and text hierarchy, use preset roles so the same markup can adapt across modes.

```html
<!-- @MARK bg:blue-5 --><!-- @MARK fg:blue-60 -->
<div class="bg:blue-5 fg:blue-60">…</div>
```

---

## Choose a color token
Start with the kind of decision you are making. Most app chrome should use roles first, then reach for palette steps or hue aliases when the color itself is the point.

| Decision | Use | Examples |
| --- | --- | --- |
| Fixed swatch | Palette steps | `bg:blue-5`, `fg:blue-60` |
| App structure and hierarchy | Preset roles | `bg:surface-base`, `surface:raised`, `b:base`, `text:body` |
| Mode-aware hue choice | Hue aliases | `bg:blue`, `fg:blue`, `text:blue` |

```html
<!-- @MARK bg:surface-base --><!-- @MARK text:body --><!-- @MARK surface:raised --><!-- @MARK b:1px|solid|base --><!-- @MARK text:strong --><!-- @MARK text:muted --><!-- @MARK text:link -->
<main class="bg:surface-base text:body">
  <section class="b:1px|solid|base surface:raised">
    <h2 class="text:strong">Project updates</h2>
    <p class="text:muted">Three milestones changed this week.</p>
    <a class="text:link" href="#">Continue</a>
  </section>
</main>
```

---

## Namespaces for color
Color utilities use focused namespaces so role names stay short in markup. A key such as `muted` can mean a line role in `b:muted`, a surface role in `surface:muted`, or a text role in `text:muted`.

Use the narrow role namespace first when the color describes structure, line work, or text hierarchy. Use the general color namespace when the hue or swatch itself is the decision.

---

## Preset color roles
Preset roles describe the job a color performs in the interface. Their values are mode-aware, so `bg:surface-base`, `surface:raised`, `b:base`, and `text:body` can stay stable while light and dark modes choose different underlying colors.

### Surfaces
Surface tokens are for the page background, raised panels, floating layers, and inverse blocks. Use `bg:surface-base` for the root canvas and the dedicated `surface:*` shorthand for surface roles.

```html
<!-- @MARK surface:base -->
<section class="surface:base"></section>
```

### Line roles
Line tokens are for borders, dividers, outlines, and strokes. `base` is the default line role. Border, outline, and stroke utilities search line roles before the general color palette.

```html
<!-- @MARK b:5x|solid|base -->
<div class="b:5x|solid|base"></div>
```

### Text roles
Text roles are for foreground hierarchy and interaction states. Prefer these roles for body copy, emphasis, disabled content, links, and inverse surfaces instead of using hue aliases as text hierarchy.

```html
<!-- @MARK text:body --><!-- @MARK text:strong --><!-- @MARK text:muted --><!-- @MARK text:disabled --><!-- @MARK text:link --><!-- @MARK text:link-hover --><!-- @MARK text:inverse -->
<article class="text:body">
  <h2 class="text:strong">Quarterly report</h2>
  <p class="text:muted">Updated 12 minutes ago</p>
  <button class="text:disabled" disabled>Archive</button>
  <a class="text:link text:link-hover:hover" href="#">Open report</a>
  <span class="surface:inverse text:inverse">Private</span>
</article>
```

---

## Mode-aware hue aliases
Hue aliases are shortcuts for choosing a color family while still letting the preset select a light or dark value. Use them when the hue itself matters; use roles when the color is describing structure or text hierarchy.

### Base hue aliases
Base hue aliases work for backgrounds and foregrounds when you want a named hue that adapts across modes. Use palette steps when you need a fixed swatch instead.

```html
<!-- @MARK bg:yellow -->
<div class="bg:yellow"></div>
```
Use base hue aliases for foreground when you want a mode-aware color choice.
```html
<!-- @MARK fg:yellow -->
<div class="fg:yellow">Aa</div>
```

### Text hue aliases
Text hue aliases choose foreground-oriented palette steps for light and dark modes. They are useful for colored text, but they do not replace semantic text roles such as `text:body`, `text:muted`, or `text:link`.

```html
<!-- @MARK text:yellow -->
<div class="text:yellow">M</div>
```

---

## Customize color roles
Override preset role tokens when a repeated UI decision needs product-specific colors. Keep markup semantic so components do not need separate light and dark color classes.

```css name=index.css
@theme light {
  --color-surface-base: var(--color-white);
  --color-surface-raised: var(--color-white);
  --color-line-base: oklch(0% 0 none / 0.12);
  --color-text-body: var(--color-neutral-70);
  --color-text-muted: var(--color-neutral-60);
}

@theme dark {
  --color-surface-base: var(--color-gray-95);
  --color-surface-raised: var(--color-gray-90);
  --color-line-base: oklch(100% 0 none / 0.12);
  --color-text-body: var(--color-gray-30);
  --color-text-muted: var(--color-gray-40);
}
```

```html
<!-- @MARK bg:surface-base --><!-- @MARK text:body --><!-- @MARK surface:raised --><!-- @MARK b:1px|solid|base --><!-- @MARK text:muted -->
<main class="bg:surface-base text:body">
  <section class="b:1px|solid|base surface:raised">
    <p class="text:muted">The classes stay the same in every mode.</p>
  </section>
</main>
```

Use `@theme {}` when a preset role should keep the same value in every mode. Use `@theme light` and `@theme dark` when the same role needs mode-specific values.

---

# Compatibility

Source: https://rc.css.master.co/en/guide/compatibility

Summary: Learn browser support, native declaration fallback, vendor prefixes, modern CSS feature strategy, and how Master CSS coexists with third-party styles.

## Overview
Master CSS is designed to work with modern browser features, existing CSS files, component libraries, and third-party stylesheets. Compatibility mostly depends on the CSS features your project uses and the way external styles enter the cascade.

Static extraction and server rendering generate regular CSS ahead of time. Runtime rendering uses the browser [MutationObserver](https://developer.mozilla.org/en-US/docs/Web/API/MutationObserver) API to detect class changes and generate only the rules used by connected elements.

The default stylesheet uses native [CSS cascade layers](https://developer.mozilla.org/en-US/docs/Web/CSS/@layer) to keep theme, base, defaults, components, and utilities predictable:

```css
@layer theme, base, defaults, components, utilities;
```

That means Master CSS works best in projects that target browsers with cascade layer support. If your project must support older browsers, treat `@layer` support as the main compatibility boundary and test the generated CSS against your browser matrix.

---

## Browser support
The Master CSS engine does not polyfill every CSS feature. It generates CSS from the classes you use, so browser support is usually determined by the final CSS property, value, selector, at-rule, or platform feature in that output.

For example, `bg:red` depends on normal `background-color` support, while `backdrop-filter:blur(16px)` depends on `backdrop-filter` support. Modern features should be checked in [Can I use](https://caniuse.com/) or MDN before relying on them in production.

Property-like classes can also fall back to native CSS declarations. In the browser runtime, Master CSS validates those declarations with `CSS.supports(property, value)`. Static, server, extraction, compiler, validator, and linting workflows use a CSS syntax matcher so invalid declarations such as `interpolate-size:banana` do not emit CSS. High-frequency native properties such as spacing, sizing, radius, color, and timing still keep curated Master CSS token and unit behavior before this native validation step.

Use this rule of thumb:

- If the browser supports the generated CSS, Master CSS can use it.
- If the browser does not support the generated CSS, use a fallback, avoid that class for that target, or gate it behind a feature query when appropriate.
- If the class relies on a Master CSS runtime workflow, make sure the target browser supports the runtime APIs required by that workflow.

---

## Vendor prefixes
Master CSS includes built-in vendor prefixes for common CSS properties and selectors, so you usually write the standard syntax and let the engine emit the compatibility form.

### CSS properties
Write the unprefixed class:

```html
<div class="backdrop-filter:blur(16px)">…</div>
```
### CSS selectors
Use the Master CSS selector shorthand when one exists:

```html
<div class="bg:#000::scrollbar">…</div>
```
---

## New CSS features
Master CSS does not need a built-in utility for every platform feature before you can try it. It recognizes many explicit CSS declarations directly, while still preserving Master CSS utilities, tokens, and shorthands when they exist.

### Native declarations
Write a property-like class when the declaration is already valid CSS:

```html
<!-- @MARK field-sizing:content --><!-- @MARK interpolate-size:allow-keywords --><!-- @MARK view-transition-name:card --><!-- @MARK transition-behavior:allow-discrete -->
<article class="transition-behavior:allow-discrete field-sizing:content interpolate-size:allow-keywords view-transition-name:card">…</article>
```
Custom properties can use the same direct declaration form:

```html
<!-- @MARK --card-gap:1rem -->
<section class="--card-gap:1rem">…</section>
```
### Master CSS syntax first
Native fallback is intentionally lower priority than Master CSS semantics. Curated aliases, token resolution, unit conversion, transform helpers, and shorthand utilities continue to use Master CSS semantics before a plain native declaration is considered.
```html
<!-- @MARK mt:4x --><!-- @MARK margin:1rem --><!-- @MARK bg:red-60 -->
<div class="mx:md mb:md mt:4x bg:red-60">…</div>
```
This preserves the expected syntax model:

- `mt:4x` uses a curated alias and emits `margin-top:1rem`.
- `margin:1rem` writes the native property value as-is and emits `margin:1rem`.
- `bg:red-60` resolves the theme token and emits `background-color:var(--color-red-60)`.
- Rare native properties without Master CSS token behavior should use valid CSS values directly, such as `field-sizing:content` or `interpolate-size:allow-keywords`.
- `field-sizing:banana` and `interpolate-size:banana` are rejected instead of emitted as raw CSS.

### Arbitrary properties
Arbitrary properties do not need `{}`. If the declaration is valid CSS, write it directly with `property:value` syntax:

```html
<!-- @MARK interpolate-size:allow-keywords --><!-- @MARK scroll-timeline-name:--cards --><!-- @MARK paint-order:stroke|fill -->
<div class="scroll-timeline-name:--cards interpolate-size:allow-keywords paint-order:stroke|fill">…</div>
```
Use `{...}` only as an explicit raw escape hatch, or when several raw declarations should share one selector or query suffix. Static tooling may reject the newest CSS grammar until its syntax data catches up, while the browser runtime follows `CSS.supports(property, value)` for direct native declarations.

### New selectors
Selector suffixes can use native CSS selector syntax as long as the browser supports the selector.

```html
<!-- @MARK :has(:checked) -->
<form class="outline:2px|solid|red:has(:checked)">…</form>
```
---

## Third-party styles
Third-party libraries often ship CSS with their own selector strategy. Put vendor styles in a lower cascade layer when you want Master CSS components and utilities to override them without `!important`.

For example, import Swiper styles into the `defaults` layer:

```css
@import 'swiper/css'; /* [!code --] */
@import 'swiper/css/navigation'; /* [!code --] */
@import 'swiper/css/pagination'; /* [!code --] */

@import 'swiper/css' layer(defaults);
@import 'swiper/css/navigation' layer(defaults);
@import 'swiper/css/pagination' layer(defaults);
```

(!) Some bundlers may not support `@import ... layer(...)` for package CSS. Check your build tool before relying on layered package imports.

Master CSS is meant to sit in the CSS build workflow, so you usually do not need a separate preprocessor just to bundle imports, share variables, add prefixes, or generate utility classes. Prefer native CSS imports, cascade layers, CSS variables, and Master CSS tokens before reaching for Sass, Less, or Stylus.

If your project already uses a preprocessor, keep it at the edge of the workflow: compile it to regular CSS first, then make sure the resulting vendor rules enter the intended layer. Avoid making preprocessor-only features the recommended path for third-party compatibility.

Then define your application overrides in the `components` layer or use utilities in markup:

```css name=index.css
@components {
  swiper {
    @compose max-w:4xl;
  }

  swiper-wrapper {
    @compose bg:red-60;
  }

  swiper-slide {
    @compose bg:blue-60;
  }
}
```

```html
<!-- @MARK bg:blue-60 -->
<div class="bg:blue-60 swiper-slide">Slide 1</div>
```

This keeps vendor defaults below product components and utilities, reducing the need for forceful overrides.

---

## Existing CSS workflows
Master CSS can coexist with native CSS, preprocessors, CSS modules, and framework `<style>` blocks. The most predictable setup is to keep one project CSS entry that imports `@master/css`, then let regular CSS files enter that graph through normal imports when they should share the same theme, layer order, extraction context, and native CSS pruning behavior.

Use native CSS variables from your theme when module-scoped or component-scoped CSS needs shared design values:

```css name=Button.module.css
.button {
  background-color: var(--color-primary);
  border-radius: var(--radius-md);
}
```

Use Master CSS classes in markup for styling that should be generated, validated, ordered, and highlighted by Master CSS tooling:

```html
<button class="h:40px px:md r:md bg:blue">Save</button>
```

When a CSS file imports `@master/css`, it becomes a Master-managed stylesheet. Keep vendor, CMS, or externally injected classes outside managed roots unless the class usage is visible to extraction or protected with [`@preserve native`](/guide/native-css-pruning#default-pruning).

---

## Checklist
- Check browser support for the generated CSS feature, not just the Master CSS class.
- Treat native cascade layers as the main browser compatibility boundary for the default stylesheet.
- Write standard unprefixed properties and selectors when Master CSS already prefixes them.
- Use native declaration syntax for valid CSS declarations; reserve `{...}` groups for explicit raw escape hatches or multi-declaration groups.
- Keep curated Master CSS aliases, tokens, unit conversion, and shorthands ahead of native declaration fallback.
- Expect browser runtime validation and static validation to occasionally differ for the newest CSS grammar; test experimental declarations in the rendering mode you ship.
- Put third-party CSS in `defaults` when you want components and utilities to override it.
- Keep externally injected classes visible to extraction, outside managed roots, or protected from native CSS pruning.

---

# Conditional Queries

Source: https://rc.css.master.co/en/guide/conditional-queries

Summary: Learn how to append condition suffixes for breakpoints, modes, media types, container queries, supports checks, and ranges.

## Overview
CSS at-rules such as `@media`, `@supports`, `@container`, `@layer`, and `@starting-style` apply CSS only when a condition is true. Master CSS writes those conditions as suffixes on the class that needs them.

```text name=master css
hidden@md
hidden@print
hidden@default
hidden@container(xs)
hidden@sidebar(xs)
hidden@md&<lg
hidden@!screen
opacity:0@start
backdrop-filter:blur(5px)@supports(backdrop-filter(0px))
```
Read a conditional class from left to right:

```txt
declaration<selector?>@condition
```

```html
<!-- @MARK :hover@md -->
<button class="bg:blue-60:hover@md">Save</button>
```

This applies `bg:blue-60` only when the button matches `:hover` and the `@md` condition is true.

    <summary>A traditional version needs separate at-rules</summary>
    ```css name=traditional.css
    @media (min-width: 1024px) {
        .target {
            display: none;
        }
    }

    @container (min-width: 1024px) and (max-width: 1289.98px) {
        .target {
            display: none;
        }
    }

    @media print {
        .target {
            display: none;
        }
    }

    @container (min-width: 768px) {
        .target {
            display: none;
        }
    }

    @media not screen {
        .target {
            display: none;
        }
    }
    ```

Use short tokens for common cases, and use raw condition syntax when a condition is specific to one component. Comparison operators, logical operators, and grouped conditions let you express ranges without writing separate CSS blocks.

The same property can have different values under different conditions.
```html
<!-- @MARK @sm @md -->
<h2 class="font:lg font:2xl@sm font:3xl@md …">
```
You can also combine a selector and a query in one class.
```html
<!-- @MARK :hover@sm -->
<div class="fg:white:hover@sm …">
```

---

## Common condition variants
Condition variants are named conditions. Some are built in, while breakpoint tokens and mode tokens come from your project manifest.

| Token                         | CSS                                                       |
|-------------------------------|-----------------------------------------------------------|
| `@base`                       | `css @layer base`                                         |
| `@default`                    | `css @layer defaults`                                     |
| `@component`                  | `css @layer components`                                   |
| `@utility`                    | `css @layer utilities`                                    |
| `@print`                      | `css @media print`                                        |
| `@screen`                     | `css @media screen`                                       |
| `@all`                        | `css @media all`                                          |
| `@speech`                     | `css @media speech`                                       |
| `@container`                  | `css @container`                                          |
| `@start`                      | `css @starting-style`                                     |
| `@starting-style`             | `css @starting-style`                                     |
| `@motion`                     | `css @media (prefers-reduced-motion: no-preference)`      |
| `@reduce-motion`              | `css @media (prefers-reduced-motion: reduce)`             |
| `@landscape`                  | `css @media (orientation: landscape)`                     |
| `@portrait`                   | `css @media (orientation: portrait)`                      |

### `sm`, `md`, `lg`, and more
Use `@sm`, `@md`, `@lg`, and other breakpoint tokens to apply styles based on viewport width. A plain breakpoint token means "at or above this width."
```html
<!-- @MARK @sm -->
<div class="hidden@sm">
```
See [responsive design](/guide/responsive-design), [breakpoints](/guide/breakpoints), and [containers](/guide/containers) for the full responsive query model.

### `light`, `dark`, and custom modes
Mode names also become condition variants. `@dark` and `@light` are available by default, and custom modes are added when you define them in the project CSS entry.

```html
<!-- @MARK @dark -->
<div class="bg:gray-90@dark">
```

The generated CSS depends on [`mode-trigger`](/guide/variables-and-modes#mode-triggers). A mode can become a media query, a class wrapper, or a shadow host wrapper.

### `base`, `default`, `component`, `utility`
Use `@base`, `@default`, `@component`, and `@utility` to place generated rules in those cascade layers.

By default, there are four layer shorthands: `@base`, `@default`, `@component`, and `@utility`.
```html
<!-- @MARK @base -->
<div class="hidden@base">
<!-- @MARK @default -->
<div class="hidden@default">
<!-- @MARK @component -->
<div class="hidden@component">
<!-- @MARK @utility -->
<div class="hidden@utility">
```
You can [create a condition variant](/guide/directives#custom-variant) to simplify longer conditions.

See [cascade layers](/guide/cascade-layers) for layer order and override behavior.

### `print`, `screen`, `all`, `speech`
Use `@print`, `@screen`, `@all`, or `@speech` for media types. For example, hide an element when printing:
```html
<!-- @MARK @print -->
<div class="hidden@print">
```

### `motion`, `reduce-motion`
Use `@motion` for motion-safe animation and `@reduce-motion` for reduced-motion alternatives.

```html
<!-- @MARK @motion -->
<svg class="animation:rotate|slowest|linear|infinite@motion">...</svg>
```

### `orientation`
Use `@landscape` or `@portrait` to apply styles based on device orientation.
```html
<!-- @MARK @landscape -->
<div class="hidden@landscape">
```

### `@starting-style`
`@starting-style` and its alias `@start` define starting values for transitions when an element first appears.

(click) Try opening the popover target to see the zoom in effect.

```html
<!-- @MARK transform:scale(0)@start -->
<div id="target" popover="auto" class="transition:transform|slow|smooth transform:scale(0)@start">
  ...
  <button popovertarget="target" popovertargetaction="hide">Close</button>
</div>
<button popovertarget="target">Open Popover</button>
```
---

## Arbitrary conditions and queries
Use arbitrary conditions when a built-in token would hide too much detail or when the condition is only used once.

| Syntax                        | CSS                                                       |
|-------------------------------|-----------------------------------------------------------|
| `@media(<feature>)`           | `css @media (<feature>)`                                  |
| `@supports(<feature>)`        | `css @supports (<feature>)`                               |
| `@layer(<name>)`              | `css @layer <name>`                                       |
| `@container(<size>)`          | `css @container (<size>)`                                 |
| `@<name>(<size>)`             | `css @container <name> (<size>)`                          |

### `@media(<feature>)`
Use `@media()` for arbitrary [CSS media queries](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_media_queries).
```html
<!-- @MARK @media(pointer:coarse) -->
<div class="hidden@media(pointer:coarse)">
```
Create a [condition variant](/guide/directives#custom-variant) if the same media query appears repeatedly.

### `@supports(<feature>)`
Use `@supports()` to apply a declaration only when the browser supports a feature.
```html
<!-- @MARK @supports(backdrop-filter(0px)) -->
<div class="hidden@supports(backdrop-filter(0px))">
```
Create a [condition variant](/guide/directives#custom-variant) if the same support check appears repeatedly.

### `@layer(<name>)`
Use `@layer()` to put a declaration in a named cascade layer.
```html
<!-- @MARK @layer(modifiers) -->
<div class="hidden@layer(modifiers)">
```
Custom layer output is still organized inside the Master CSS layer model.

### `@container(<size>)`
Use `@container(<size>)` when the nearest container, not the viewport, should control the style.
```html
<div class="container">
  <!-- @MARK @container(sm) -->
  <div class="hidden@container(sm)">...</div>
</div>
```
Create a [condition variant](/guide/directives#custom-variant) if a longer container query appears repeatedly.

See [container queries](/guide/responsive-design#based-on-container-sizes) for the full container workflow.

### `@<container>(<size>)`
Use `@<container>(<size>)` to target a named container.
```html
<aside class="container:sidebar">
  ...
    <!-- @MARK @sidebar(sm) -->
    <div class="hidden@sidebar(sm)">...</div>
</aside>
```
When a suffix name is not a breakpoint token, mode token, or custom condition variant, Master CSS treats it as a named container query.

---

## Comparison operators
Comparison operators turn breakpoint and container tokens into ranges.

| Operator           | Meaning                       | Description                                                                |
|--------------------|-------------------------------|----------------------------------------------------------------------------|
| `@N`               | At or above N                 | Applies when the target is **≥ N**                                         |
| `@>=N`             | At or above N                 | Applies when the target is **≥ N**                                         |
| `@<=N`             | At or below N                 | Applies when the target is **≤ N**                                         |
| `@>N`              | Greater than N                | Applies when the target is **> N**                                         |
| `@<N`              | Less than N                   | Applies when the target is **< N**                                         |
| `@A&<B`            | Within range                  | Applies when **A ≤ target < B**                                            |

Use them when a style should apply below, above, or between theme-defined sizes.

### `width`, `height`
You can prefix a comparison with `w` for `width` or `h` for `height`. If no feature is specified, `width` is used.

(i) Use `@<feature?><operator><size>` to specify the feature query.
```html
<!-- @MARK @sm -->
<div class="hidden@sm">
<!-- @MARK @h<sm -->
<div class="hidden@h<sm">
<!-- @MARK @h>=sm&h<lg -->
<div class="hidden@h>=sm&h<lg">
```
(x) Put the feature name before the operator. Feature names after or between operators are not supported yet.
```html
<div class="hidden@sm<=h">
<div class="hidden@sm<=h<=lg">
```
### `@>=N` — At or above
Use `@N` or `@>=N` when the target width is greater than or equal to a size token. These are interchangeable for width.
```html
<div class="hidden@sm"> <!-- [!code focus] -->
<div class="hidden@>=sm"> <!-- [!code focus] -->
<div class="hidden@h>=sm"> <!-- [!code focus] -->
```
### `@>N` — Greater than
Use `@>N` when the target must be strictly greater than the size token.
```html
<!-- @MARK @>sm -->
<div class="hidden@>sm">
```
### `@<=N` — At or below
Use `@<=N` when the target width can be equal to or below the size token.
```html
<!-- @MARK @<=sm -->
<div class="hidden@<=sm">
```
### `@<N` — Less than
Use `@<N` for targets smaller than a size token. The shorthand `@!N` behaves the same for this breakpoint form.
```html
<!-- @MARK @<sm -->
<div class="hidden@<sm">
<div class="hidden@!sm">
```
### `@A&<B` — Within a range
Use `&` to combine comparisons into one range.

For example, to apply styles between `sm` (inclusive) and `md` (exclusive), use:
```html
<!-- @MARK @sm&<md -->
<div class="hidden@sm&<md">
```
This is useful for layout adjustments that only make sense inside one range.

---

## Logical operators
Logical operators combine conditions inside one suffix.

| Operator           | Meaning / Alias               | Description                                                                |
|--------------------|-------------------------------|----------------------------------------------------------------------------|
| `!`                | Not                           | Negates a condition                                                        |
| `,`                | Or                            | Applies if **any** of the conditions match                                 |
| `&`                | And                           | Applies if **all** conditions match                                        |
| `only`             | Only                          | Adds the native `only` keyword to a media query                            |

### `!` — Not
Negates the condition immediately following it.
```html
<!-- @MARK ! -->
<div class="hidden@!md">
```
For a breakpoint token, `@!md` means "not at or above `md`", which is effectively below `md`.

### `,` — Or
Use `,` when any listed condition can match.
```html
<!-- @MARK , -->
<div class="block@<sm,>=lg">
```
This means: show the element below `sm` or at `lg` and above.

### `&` — And
Use `&` when every condition must match.
```html
<!-- @MARK & -->
<div class="hidden@sm&<lg">
```
This applies only when the target is between `sm` (inclusive) and `lg` (exclusive).

### `only` — Exact match
Use `only` for native media-query `only` semantics.
```html
<!-- @MARK only -->
<div class="hidden@only(print)">
```
This generates `@media only print`.

---

## Grouping conditions
Use parentheses to group conditions before applying a logical operator to the group.
```html
<!-- @MARK !(screen&(any-hover:hover)) -->
<div class="hidden@!(screen&(any-hover:hover))">
```
This applies when the target is **not** a screen with any hover capability.

### Replace whitespace with parentheses
Class names cannot contain whitespace, so condition arguments that would normally contain spaces are written with parentheses.

For example, `@layer(modifiers)` becomes `@layer modifiers`.
```html
<!-- @MARK (modifiers) -->
<div class="hidden@layer(modifiers)">
```

---

# Containers

Source: https://rc.css.master.co/en/guide/containers

Summary: Use container size tokens for reusable width caps, component dimensions, and container query variants.

## Overview
Containers define the size scale for reusable layout surfaces. In Master CSS, the container namespace has two related jobs:

* Provide contextual size values such as `max-w:md`, `w:3xl`, `size:lg`, and `flex-basis:sm`.
* Provide thresholds for `@container(<name>)` queries, so components can respond to the space they actually receive.

Use [breakpoints](/guide/breakpoints) for viewport-level page changes. Use containers for component-level adaptation and shared width caps.

---

## Define container variables
Container tokens belong in the theme layer and use the `container-*` namespace.

```css name=index.css
@theme {
  --container-sm: 24rem;
  --container-md: 28rem;
  --container-7xl: 80rem;
}
```

The same token can drive a width cap and a container query. That keeps component dimensions and responsive thresholds from drifting apart.
Container scale tables read from manifest metadata, so the displayed size and generated query stay aligned when tokens use `rem`, `px`, or legacy unitless numbers.

---

## Namespace for container values
The `container` variable namespace is shared by width, height, min and max constraints, flex basis, intrinsic size, and media sizing utilities.

This lets sizing utilities use `md`, `5xl`, or project token names without the `container-` prefix. Container query variants use the same namespace for thresholds.

---

## Use container values in sizing utilities
Sizing utilities that read from the container namespace use contextual shorthand. Write `max-w:md`; do not repeat the namespace inside the value.

```html
<!-- @MARK w:full --><!-- @MARK max-w:5xl --><!-- @MARK mx:auto -->
<main class="w:full max-w:5xl mx:auto">
  ...
</main>

<!-- @MARK flex-basis:md -->
<aside class="flex-basis:md flex-shrink:0">...</aside>
```
The shorthand is contextual: `md` can mean a container value inside `max-w:md`, and a breakpoint threshold inside `@md`. The utility or variant decides which namespace is active.

---

## Create a query container
Add `container` to the element whose inline size should be observed. Then apply `@container(<size>)` variants to descendants.

```html
<section class="container">
  <!-- @MARK grid-cols:2@container(md) -->
  <article class="grid-cols:1 gap:lg grid-cols:2@container(md)">
    ...
  </article>
</section>
```
Container queries make components portable. The same card can be stacked in a sidebar and split into columns in a wide content region without knowing the viewport width.

---

## Container query scale
Container query variants use the same `container-*` tokens as sizing utilities.

This is different from viewport breakpoints on purpose. A component threshold is usually smaller than a page threshold. For example, `@container(md)` can represent a comfortable card width, while `@md` represents a desktop page shell.

---

## Query container ranges
Use [comparison](/guide/conditional-queries#comparison-operators) and [logical](/guide/conditional-queries#logical-operators) operators when a component needs a bounded range.

```html
<!-- @MARK hidden@container(sm&<=md) -->
<div class="hidden@container(sm&<=md)">...</div>
```
Prefer named container tokens for repeated component states. Use raw container query values only when the threshold belongs to one local component and is unlikely to become part of the shared design language.

---

## Use named containers
Use named containers when a descendant should query a specific ancestor instead of the nearest container.

```html
<!-- @MARK container:card/inline-size -->
<section class="container:card/inline-size">
  <!-- @MARK @card(3xs) -->
  <article class="grid-cols:2@card(3xs)">...</article>
</section>
```
Named containers are useful in nested layouts, but do not add names everywhere. The default nearest-container behavior is simpler and easier to move between compositions.

---

## Choose caps or queries
Container size values and container queries are related, but they solve different problems.

| Need | Use | Example |
| --- | --- | --- |
| Cap a page wrapper | Container value | `w:full max-w:7xl mx:auto` |
| Cap a content measure | Local or container value | `max-w:72ch` or `max-w:5xl` |
| Adapt a reusable component | Container query | `grid-cols:2@container(md)` |
| Coordinate nested responsive regions | Named container | `grid-cols:2@card(3xs)` |
| Change the whole page shell | Breakpoint | `grid-cols:12@md` |

(x) A reusable card depends on the viewport, so it changes at the wrong time inside narrow parents.

```html
<article class="grid-cols:2@md">...</article>
```

(o) The card depends on the space it receives.

```html
<section class="container">
  <article class="grid-cols:2@container(md)">...</article>
</section>
```

(i) If a layout rule describes the whole page, use [breakpoints](/guide/breakpoints). If it describes a reusable component or a wrapper width, use containers.

---

# Corner Radius

Source: https://rc.css.master.co/en/guide/corner-radius

Summary: Use radius tokens, pill shortcuts, circular shapes, and custom corner scales consistently.

## Overview
Corner radius defines the shape language of surfaces, controls, media, and badges. It tells users whether an element is dense and precise, soft and spacious, pill-shaped, or circular.

Master CSS maps repeated shape decisions to the `radius` namespace. Use tokens such as `r:sm`, `r:lg`, and `r:2xl` for shared UI curvature instead of repeating raw values across markup. Use `rounded` and `round` when the shape itself is the decision.

---

## Choose a radius token
Start with the role of the element, then choose the smallest radius that communicates that role. Radius should reinforce hierarchy and interaction density instead of becoming decoration.

Use related tokens for related surfaces. A card, its nested media, and an action group can share the same radius or step down one level for nested elements.

---

## Use radius tokens
Use `r:<token>` for all corners. The utility resolves values from `radius-*` tokens and emits a stable `border-radius: var(--radius-*)` declaration.

```html
<!-- @MARK r:md -->
<input class="r:md" />

<!-- @MARK r:lg -->
<article class="r:lg">
  ...
</article>

<!-- @MARK r:2xl -->
<img class="r:2xl" alt="" />
```
Use `r:*` in product markup. Use the explicit `border-radius:*` form when documenting native property mapping or when surrounding code benefits from the native property name.

---

## Namespace for corner radius
The `radius` variable namespace is shared by the all-corner shorthand, physical corner aliases, and native logical corner radius properties.

This lets radius utilities use scale or project token names such as `md`, `card`, or `panel` without repeating the `radius-` prefix.

---

## Use shape shortcuts
Use `rounded` when the element should behave like a pill, regardless of its width. Use `round` when the element should be circular.

Use shape shortcuts for semantic shapes. Use `r:*` when the element should stay on the shared radius scale.

---

## Round individual corners
Use corner shorthands when only part of a surface should be rounded. This is useful for grouped controls, attached panels, split media, and directional layouts.

```html
<!-- @MARK rtl:lg --><!-- @MARK rtr:lg -->
<section class="rtl:lg rtr:lg">
  Rounded top
</section>

<!-- @MARK rtr:md --><!-- @MARK rbl:sm -->
<div class="rbl:sm rtr:md">
  Offset corners
</div>
```
Use `rtl`, `rtr`, `rbl`, and `rbr` for individual corners. Use native property names such as `border-top-left-radius:*` only when the code needs the native property spelled out.

---

## Customize radius tokens
Override radius variables when your product needs sharper controls, softer panels, or a named shape decision. Keep token names descriptive so markup reads as a design choice.

```css name=index.css
@theme {
  --radius-crisp: 0.25rem;
  --radius-card: 0.75rem;
  --radius-panel: 1.25rem;
}
```

```html
<!-- @MARK r:crisp --><!-- @MARK r:card --><!-- @MARK r:panel -->
<button class="r:crisp">Save</button>
<article class="r:card">...</article>
<section class="r:panel">...</section>
```

Promote repeated raw values into the radius scale. Keep one-off measured geometry as raw values such as `r:1px` or `r:2x` until it becomes a reusable shape.

---

## Avoid radius noise
(x) Every nested surface uses a larger radius than its parent.

```html
<article class="r:lg">
  <img class="r:2xl" alt="" />
  <button class="r:4xl">Open</button>
</article>
```

(o) Nested surfaces share the parent radius or step down.

```html
<article class="r:lg">
  <img class="r:lg" alt="" />
  <button class="r:md">Open</button>
</article>
```

(x) Numeric token names are hard to distinguish from raw values.

```css name=index.css
@theme {
  --radius-1: 0.25rem;
  --radius-2: 0.5rem;
}
```

(o) Name tokens by scale or role.

```css name=index.css
@theme {
  --radius-sm: 0.25rem;
  --radius-card: 0.75rem;
}
```

---

# Directives

Source: https://rc.css.master.co/en/guide/directives

Summary: Use Master CSS stylesheet directives for entries, settings, theme tokens, managed definitions, source scanning, composition, and native CSS preservation.

## Overview
CSS directives are Master CSS instructions inside stylesheets. They are read by the compiler, scanner, and build integrations before browser-facing CSS is emitted.

Directives do not behave like normal CSS rules. Consumed directives are removed from output CSS, while their effects are applied to generated CSS, source scanning, native CSS pruning, or root engine settings.

```css name=index.css
@import "@master/css";

@settings {
  root-size: 16;
  base-unit: 4;
  default-mode: light;
  mode-trigger: media;
  scope: #app;
  important: false;
}

@reference "./theme.css";

@safelist "opacity:1 bg:blue-60@dark";
@blocklist "debug-*";

@preserve native;
```

---

## Entry markers
Entry markers tell integrations where Master CSS should attach generated CSS.

### `@master entry`
Marks the stylesheet as a lightweight Master CSS entry and inserts the generated CSS slot without loading the package stylesheet graph. Use it when a stylesheet should receive generated CSS but should not import the default `@master/css` stylesheet.

```css
@master entry;
```

### `@import "@master/css"`
Marks the stylesheet as a full Master CSS entry, loads the package stylesheet graph, and includes the default layer and base stylesheet behavior. This is the normal entry marker for app stylesheets.

```css
@import "@master/css";
```

Other directive families such as `@settings`, `@theme`, `@custom-variant`, `@defaults`, `@components`, `@utilities`, `@source`, `@reference`, `@safelist`, `@blocklist`, `@compose`, `@variant`, and `@preserve native` are not entry markers by themselves.

---

## Reference context
### `@reference`
Use `@reference` to load another Master CSS stylesheet as compile-time context without including that stylesheet's CSS in the current output. This is useful in CSS Modules and SFC `<style>` blocks that need project tokens, component classes, utility definitions, or custom variants for `@compose` and `@variant`.

```css name=Button.module.css
@reference "../app.css";

.button {
  @compose btn;

  @dark {
    @compose bg:blue-60;
  }
}
```

Referenced stylesheets can define `@settings`, `@theme`, `@custom-variant`, `@defaults`, `@components`, and `@utilities`. Their definitions are available while compiling the current stylesheet, but their native CSS, generated CSS, and managed class definitions are not emitted just because they were referenced.

```css name=app.css
@import "@master/css";

@components {
  btn {
    @compose inline-flex align-items:center px:md h:10x r:lg;
  }
}
```

`@reference` must be a top-level statement with one quoted CSS resource:

```css
@reference "./app.css";
@reference "@master/css";
@reference "@master/css-preset";
```

Relative references resolve from the stylesheet that declares them. Package references are limited to Master CSS package stylesheet entries. `@reference` is not an entry marker, does not insert a generated CSS slot, and does not replace `@master entry;` or `@import "@master/css"` in app entry stylesheets.

(!) Because `@reference` is context-only, it does not copy referenced native CSS or generated class output. If the current stylesheet lowers to CSS that uses `var(--*)` tokens or animation names from the referenced context, local output includes the required theme variables or managed keyframes that the loaded global entry has not already emitted.

---

## Project settings
### `@settings`
Use `@settings` for root engine settings that affect generated CSS.

```css
@settings {
  root-size: 16;
  base-unit: 4;
  default-mode: light;
  mode-trigger: media;
  scope: #app;
  important: false;
}
```

| Setting | Effect |
|---------|--------|
| `root-size` | Controls numeric conversion to root-relative units such as `rem`. |
| `base-unit` | Controls multiplier units such as `1x`, `2x`, and `4x`. |
| `default-mode` | Sets the default mode name, or `none` when no mode should attach by default. |
| `mode-trigger` | Selects how modes are emitted, such as `media`, `class`, or `host`. |
| `scope` | Prefixes generated selectors with a root selector. |
| `important` | Emits generated declarations with `!important` when enabled. |

For token authoring, see [Theme Tokens](/guide/theme). For mode behavior, see [Variables and Modes](/guide/variables-and-modes).

---

## Theme and variants
Theme directives define project tokens, modes, animations, and reusable variant names. They are manifest inputs, not regular stylesheet output.

### `@theme`
Defines theme tokens and managed keyframes. Token names keep their leading `--`; Master CSS uses the name after `--` for namespace resolution.

```css
@theme {
  --color-primary: #4f46e5;
  --spacing-feature: 1.5rem;

  @keyframes fade-in {
    from { opacity: 0; }
    to { opacity: 1; }
  }
}
```

### `@theme <mode>`
Defines mode-specific token values. Mode blocks can override regular theme tokens and add new mode names.

```css
@theme dark {
  --color-panel: #111827;
  --shadow-feature: 0 16px 40px rgb(0 0 0 / .36);
}
```

### `@theme inline`
Defines utility shorthands that are written directly into generated declarations instead of emitting CSS custom properties. Inline tokens cannot be mode-specific.

```css
@theme inline {
  --color-brand: #4f46e5;
  --spacing-feature: 1.5rem;
}
```

### `@theme static`
Emits the token or managed keyframes as initial CSS resources instead of waiting for a matching class to use them. `inline` and `static` cannot be combined.

```css
@theme static {
  --color-primary: #4f46e5;

  @keyframes fade-in {
    to { opacity: 1; }
  }
}
```

### `@custom-variant`
Defines reusable condition variants. Use them as `@` suffixes, such as `animation:fade-in@motion-safe`. Selector aliases are built in; use selector suffixes in markup and nested selectors in CSS rules.

```css
@custom-variant motion-safe {
  @media (prefers-reduced-motion: no-preference) {
    @slot;
  }
}

@custom-variant supports-backdrop {
  @supports (backdrop-filter: blur(0)) {
    @slot;
  }
}
```

For token authoring, see [Theme Tokens](/guide/theme). For mode behavior, see [Variables and Modes](/guide/variables-and-modes). For custom variant strategy, see [Conditional Queries](/guide/conditional-queries).

---

## Managed definitions
Managed definition directives create generated classes in the matching cascade layer. The first level inside each block is a bare class name, not a selector.

### `@defaults`
Defines managed classes in the `defaults` layer.

```css
@defaults {
  prose {
    @compose text:neutral leading:lg;
  }
}
```

### `@components`
Defines managed component classes in the `components` layer.

```css
@components {
  btn {
    @compose inline-flex align-items:center justify-content:center;
  }
}
```

### `@utilities`
Defines managed utility classes in the `utilities` layer. Utilities still win over components because `@master/css/base.css` declares `@layer theme, base, defaults, components, utilities;`.

```css
@utilities {
  content-auto {
    content-visibility: auto;
  }

  text-<left|center|right|start|end|justify> {
    text-align: --value();
  }

  bg-<cover|contain|auto> {
    background-size: --value();
  }

  bg-origin-<border=border-box|content=content-box|padding=padding-box> {
    background-origin: --value();
  }

  font:<~font-size|number> {
    font-size: --value();
  }

  font:<~font-family> {
    font-family: --value();
  }

  bg:<color> {
    background-color: --value();
  }

  user-select:<auto|none|text|all> {
    -webkit-user-select: --value();
    user-select: --value();
  }

  line-clamp:<number|none> {
    -webkit-line-clamp: --value();
  }

  text-decoration:<~color-text|~color|*> {
    -webkit-text-decoration: --value();
    text-decoration: --value();
  }

  size:<~container|number|*> {
    width: --value();
    height: --value();
  }

  grid-cols:<number|*> {
    display: grid;
    grid-template-columns: repeat(--value(), minmax(0, 1fr));
  }

  grid-col-span:<number|*> {
    grid-column: span --value()/span --value();
  }
}
```

Managed definitions accept native declarations, `@compose`, nested selectors, native nested at-rules, and `@variant` condition blocks. Entry names can be bare identifiers like `content-auto` or enum patterns like `text-<left|center|right>`.

Bare entries without `:` are semantic utilities, including enum patterns. Semantic enum patterns stay on the semantic priority tier and still substitute `--value()` for the matched value. Entries containing `:` are dynamic colon entries and keep shorthand or normal priority inference from their declarations.

Enum patterns require exactly one `<...>` segment with at least two pipe-separated values. Use `token=value` when the class token should emit a different CSS value, such as `bg-origin-<border=border-box|content=content-box|padding=padding-box>`. Unmapped entries emit the class token itself, so `text-<left|right>` behaves like `text-<left=left|right=right>`.

Enum patterns do not define theme namespace patterns, so token and shorthand classes keep using the colon value pipeline:

```txt
font:sm
font:16px
m:sm|md
m:sm|-md
bg:#fff
```

Dynamic colon entries use `key:<source-list>` and keep the class syntax as `key:value`. Source entries can be theme namespaces with `~` or `=`, one raw value kind (`number`, `color`, or `image`), literal enum values, or `*` for raw-any values.

```css
@utilities {
  font:<~font-size|number> {
    font-size: --value();
  }

  bg:<color> {
    background-color: --value();
  }

  line-clamp:<number|none> {
    -webkit-line-clamp: --value();
  }

  text-decoration:<~color-text|~color|*> {
    text-decoration: --value();
  }

  size:<~container|number|*> {
    width: --value();
    height: --value();
  }
}
```

`<~font-size|number>` supports `font:sm` through `--font-size-sm` and `font:16px` as a raw number. It does not create dash token classes such as `font-sm`. Bare numbers are emitted as written; use `4x` when you want Master CSS base-unit conversion to `rem`.

`<color>` supports both the `~color` theme namespace and raw CSS color values. For example, `bg:<color>` behaves like `bg:<~color|color>`, so `bg:primary` can resolve `--color-primary` while `bg:#fff` remains a raw color. Use a specific namespace when raw colors should not be accepted, such as `text:<~color-text>`.

Literal enum values can stand alone when at least two values are provided, such as `user-select:<auto|none|text|all>`, or combine with one raw kind, such as `line-clamp:<number|none>`. Enum values cannot be mixed with namespaces.

`*` is for raw-any full-value wrappers, such as paired vendor declarations or shorthand values that should accept `var(...)`. It may be used alone, with namespace refs, or with one raw kind, as in `text-decoration:<~color-text|~color|*>`, `accent:<color|*>`, or `size:<~container|number|*>`. It cannot be mixed with enum values. A standalone `*` does not imply a color namespace; include `~color` or `color` when raw-any values should also resolve color tokens.

`--value()` accepts no arguments and is only valid inside managed enum pattern or dynamic colon entry declarations. It represents a complete CSS value placeholder, so it may be reused in value slots such as `span --value()/span --value()` or inside CSS functions such as `repeat(--value(), minmax(0, 1fr))`. It cannot be joined into identifiers or function names, so forms such as `--value()-box` or `space---value()` should use enum mapping instead.

For abstraction guidance, see [Global styles](/guide/global-styles#shared-vocabulary).

---

## Source boundaries
Integrations and CLI flows scan ordinary project sources with defaults. Use `@source` directives only when the stylesheet needs an explicit source exception, such as external content, shared workspace source, or a scoped native CSS pruning root.

### `@source`
Adds files that may contain classes to the stylesheet source set.

```css
@source "../content/**/*.mdx";
```

### `@source not`
Removes files from the stylesheet source set.

```css
@source not "../content/drafts/**";
```

Multiple source directives are evaluated as one include set minus one exclude set:

```txt
(@source A ∪ @source B ∪ @source C) - (@source not X ∪ @source not Y)
```

For example, these directives scan content files and a shared UI package, then remove draft content and Storybook files:

```css
@source "../content/**/*.mdx";
@source "../packages/ui/**/*.{ts,tsx}";

@source not "../content/drafts/**";
@source not "../packages/ui/**/*.stories.tsx";
```

Bare source globs are resolved from the scanner `cwd`. Globs that start with `./` or `../` are resolved relative to the CSS file that declares the directive.

For the scanning model, see [Scanning latent classes](/guide/scanning-latent-classes).

---

## Candidate policy
Use `@safelist` and `@blocklist` for direct class candidate policy.

### `@safelist`
`@safelist` adds bounded class candidates that do not exist in scanned source. Safelisted candidates are still validated before CSS is generated.

```css
@safelist "opacity:1 transform:translateY(-5px):hover bg:blue-60@dark";
```

### `@blocklist`
`@blocklist` removes candidates that broad scanning accepted by accident. CSS `@blocklist` values accept exact strings and wildcard patterns with `*` and `?`.

```css
@blocklist "debug-*";
@blocklist "example-token";
```

Use these directives for explicit source-scanning exceptions, not as a replacement for complete class strings in source.

---

## Rule-local composition
### `@compose`
Use `@compose` inside a style rule to lower an unquoted Master CSS class list into native declarations for the current selector.

```css
.card {
  @compose grid gap:md p:lg r:xl shadow:md surface:raised b:1px|solid|base;
}

@components {
  btn {
    @compose inline-flex align-items:center justify-content:center px:md py:xs r:lg;

    &:hover {
      @compose bg:blue-60/.9;
    }
  }
}
```

`@compose` accepts only unquoted class lists:

```css
.card {
  @compose p:md r:lg;
}

.overlay {
  @compose bg:transparent! bg:blue-60!@dark;
}
```

The language-service formatter keeps `!` important markers attached to their class token, so `bg:transparent !` is formatted as `bg:transparent!`.

Do not put quotes, grouped class syntax, or class tokens that need CSS quoted strings inside `@compose`. Use ordinary CSS declarations for declaration-like values, and use nested selectors or `@variant` blocks for grouped selector behavior:

```css
.empty-state::before {
  @compose block size:12x r:full;
  content: '';
}

.btn {
  @compose text-center;
  contain: content;

  &:hover {
    @variant sm {
      @compose bg:blue-60;
    }
  }
}
```

Top-level `@compose` is invalid because there is no selector context to receive the lowered declarations.

Use `@compose` in these contexts:

- Managed class definitions inside `@defaults`, `@components`, or `@utilities`.
- Native style rules such as `.card { ... }`.
- Nested selectors and nested native at-rules inside those style rules.
- CSS Modules and SFC `<style>` blocks handled by build integrations.

Master CSS lowers `@compose` before CSS Modules or framework scoped CSS rewrite selectors. A local stylesheet that contains `@compose`, `@reference`, or rule-local `@variant` does not need `@master entry;`, does not import `@master/css`, does not create a generated CSS slot, and does not become a native CSS pruning root.

Composed declarations are merged by Master CSS rule priority. Native declarations follow normal source order: declarations after `@compose` override earlier composed declarations, and a later `@compose` can override earlier native declarations unless the earlier declaration is `!important`.

---

## Conditional blocks
### `@variant`
Use `@variant` inside managed definitions or native style rules to share the current selector under a Master CSS condition.

```css
.notice {
  @compose p:md r:lg;

  @dark {
    @compose bg:gray-90 fg:white;
  }

  @variant <sm {
    @compose p:sm;
  }
}
```

Use `@dark` and `@light` as shorthands for the default mode conditions. Use `@variant` for custom condition variants, custom modes such as `@variant chrisma`, breakpoint tokens, and raw Master CSS condition syntax such as `<sm`. These blocks are rule-local compiler directives, not native CSS at-rules or entry markers.

For selector states, write a nested selector directly. A selector can contain `@variant` inside it when it also needs a condition.

---

## Native CSS preservation
### `@preserve native`
Use `@preserve native;` when a Master-managed stylesheet contains native CSS class rules that must not be removed by native CSS pruning.

```css
@import "@master/css";
@preserve native;

.injected-by-payment-widget {
  color: blue;
}
```

The stylesheet is still processed by Master CSS, but native class selector rules are preserved as written instead of being pruned against detected source usage.

For the full native CSS pruning model, see [Native CSS pruning](/guide/native-css-pruning).

---

# Elevation

Source: https://rc.css.master.co/en/guide/elevation

Summary: Create depth with light and dark shadow tokens, layered surfaces, and state-aware elevation.

## Overview
Elevation describes the relationship between surfaces. In CSS, that relationship is usually rendered with [box-shadow](https://developer.mozilla.org/en-US/docs/Web/CSS/box-shadow), but the design decision is broader than the property: a surface can be grounded on the canvas, raised as a reusable card, detached as an overlay, or placed above the workflow as a modal.

Master CSS maps elevation to the `shadow` namespace. Use `shadow:*` tokens for repeated product surfaces instead of copying raw multi-part shadow values into markup. The preset scale is mode-aware, so the same class resolves to a light shadow recipe in light mode and a stronger dark-mode recipe in dark mode.

---

## Choose an elevation token
Start with the surface relationship, then choose the lowest token that makes that relationship clear. More shadow does not create more hierarchy when every surface competes for depth.

The role of each token should stay stable across modes. Light and dark recipes can use different opacity, offset, and blur values, but `shadow:sm` should still mean a standard raised surface in both modes.

---

## Pair elevation with color roles
Elevation needs a visible ground. Pair shadows with `surface:*`, `text:*`, and radius tokens so depth reads correctly in light and dark themes.

```html
<!-- @MARK shadow:lg -->
<article class="r:lg surface:raised shadow:lg">
  <h2 class="text:strong">Raised surface</h2>
  <p class="text:muted">Cards need a clear surface before they need a large shadow.</p>
</article>
```

Use surface roles for the ground and shadows for separation. A strong shadow on every panel makes the page noisy, even when the surfaces use different color roles.

---

## Use shadow tokens
Use `shadow:<token>` for common elevation levels. The utility resolves values from `shadow-*` tokens and emits a stable `box-shadow: var(--shadow-*)` declaration; the active mode changes the variable value.

```html
<!-- @MARK shadow:sm -->
<article class="r:lg surface:raised shadow:sm">
  ...
</article>

<!-- @MARK shadow:lg -->
<div class="r:lg surface:overlay shadow:lg">
  ...
</div>
```
Use `shadow:*` in product markup. Use the explicit `box-shadow:*` form when documenting native property mapping or when surrounding code benefits from the native property name.

---

## Namespace for elevation
The `shadow` variable namespace is shared by the elevation shorthand and the native shadow property.

This lets elevation utilities use `sm`, `lg`, or project token names without repeating the `shadow-` prefix.

---

## Change elevation by state
State elevation should communicate interaction, not decoration. A hover shadow can make a card feel liftable; a focus shadow should not replace an accessible focus indicator.

```html
<!-- @MARK shadow:sm --><!-- @MARK shadow:md:hover --><!-- @MARK shadow:none@print -->
<article class="shadow:sm shadow:md:hover shadow:none@print">
  ...
</article>
```
Keep state changes small. Moving from `shadow:sm` to `shadow:md` is usually enough for hover. Jumping from `shadow:sm` to `shadow:2xl` makes a normal card feel like a modal.

---

## Customize mode-aware shadows
Override the same `shadow-*` keys in `@theme light` and `@theme dark` when your product needs softer depth, sharper enterprise surfaces, or stronger overlays. Keep the token names size-based and mode-neutral so the markup does not fork by theme.

```css name=index.css
@theme light {
  --shadow-sm: 0 0 0 1px oklch(0% 0 none / .05), 0 2px 4px -2px oklch(0% 0 none / .08), 0 8px 20px -6px oklch(0% 0 none / .12);
  --shadow-lg: 0 0 0 1px oklch(0% 0 none / .06), 0 10px 20px -8px oklch(0% 0 none / .12), 0 24px 56px -16px oklch(0% 0 none / .16);
}

@theme dark {
  --shadow-sm: 0 0 0 1px oklch(100% 0 none / .05), 0 2px 8px -4px oklch(0% 0 none / .36);
  --shadow-lg: 0 0 0 1px oklch(100% 0 none / .07), 0 12px 28px -10px oklch(0% 0 none / .48), 0 28px 64px -18px oklch(0% 0 none / .40);
}
```

```html
<!-- @MARK shadow:sm --><!-- @MARK shadow:lg -->
<article class="shadow:sm">...</article>
<div class="shadow:lg">...</div>
```

Promote repeated raw shadows into the scale. Keep one-off art direction in local markup or component CSS until it proves reusable. If a one-off shadow must differ by mode, prefer promoting it to a token instead of duplicating conditional raw values in markup.

---

## Avoid elevation noise
(x) Every panel competes for depth.

```html
<main class="shadow:lg">
  <section class="shadow:xl">
    <article class="shadow:2xl">...</article>
  </section>
</main>
```

(o) Only the surfaces that need separation are elevated.

```html
<main class="bg:surface-base">
  <section class="bg:surface-base">
    <article class="surface:raised shadow:sm">...</article>
  </section>
</main>
```

(x) Raw shadows become repeated product decisions without a name.

```html
<article class="shadow:0|4px|12px|black/.12">...</article>
<aside class="shadow:0|4px|12px|black/.12">...</aside>
```

(o) Repeated decisions override a shadow scale token.

```css name=index.css
@theme light {
  --shadow-sm: 0 0 0 1px oklch(0% 0 none / .05), 0 4px 8px -2px oklch(0% 0 none / .08), 0 12px 24px -4px oklch(0% 0 none / .10);
}

@theme dark {
  --shadow-sm: 0 0 0 1px oklch(100% 0 none / .06), 0 8px 18px -8px oklch(0% 0 none / .44), 0 18px 40px -12px oklch(0% 0 none / .36);
}
```

```html
<aside class="shadow:sm">...</aside>
```

---

# Preventing flash of unstyled content

Source: https://rc.css.master.co/en/guide/flash-of-unstyled-content

Summary: Improve the page loading experience and ensure seamless rendering of content.

Upon accessing the page, the browser starts rendering the document. However, the page styles may not be loaded yet, causing a [FOUC (flash of unstyled content)](https://en.wikipedia.org/wiki/Flash_of_unstyled_content).

  <figcaption>A simulated example of FOUC. At left is the front page without styles. At right is the same page with styles applied. ( [web.dev](https://web.dev/preload-scanner) )</figcaption>

The unstyled state can occur in a flash if the browser doesn't block rendering while a stylesheet is downloaded and processed.

### Prevent premature rendering
When you [pre-render](/guide/rendering-modes#progressive-rendering) the page, the required styles will be included during the page load. FOUC occurs when using only [runtime rendering](/guide/rendering-modes#runtime-rendering).

(o) Add `html <html hidden>` to avoid FOUC.
```html
<!-- @MARK hidden -->
<html hidden>…</html>
```
Once the style is injected, the engine will remove the above and notify the browser that the page can be displayed.

The initialization is typically completed within milliseconds, and you don't need to worry about the impact of `hidden` as it's instantaneous.

By [preloading critical resources](/guide/preload-critical-resources), there will be a bonus effect.

---

## Benefits
By avoiding rendering unstyled content, the browser enhances performance and improves related metrics:

1. **Time to Interactive (TTI)**: TTI refers to the time at which users can interact with the web page. When FOUC is resolved and the web content is styled quickly, it accelerates the interactivity of the web page, thus improving TTI.
2. **First Input Delay (FID)**: FID measures the delay in user interaction with the web page for the first time. When FOUC is resolved, users can start interacting with the web page more quickly, reducing FID.
3. **Bounce Rate**: Bounce Rate represents the percentage of users who leave the website after viewing only one page. When a web page experiences FOUC, users may quickly leave due to a poor experience. Resolving FOUC can reduce the bounce rate and improve user retention.
4. **User Engagement**: Resolving FOUC allows users to browse and read web page content more quickly, increasing user engagement and involvement.
5. **Conversion Rate**: Conversion Rate refers to the percentage of users who complete desired actions such as making a purchase, subscribing, filling out a form, etc. When FOUC issues are resolved and user experience is improved, it can enhance the conversion rate.

In summary, resolving FOUC issues promotes better user interaction with the website, improves user engagement and experience, and positively impacts website performance and business metrics.

---

# Global Styles

Source: https://rc.css.master.co/en/guide/global-styles

Summary: Set up the global Master CSS entry, base layer, theme tokens, native global CSS, and shared component or utility vocabulary.

## Overview
Global styles are the project-level CSS that every page can depend on. They define the Master CSS entry, default layer order, base styles, shared tokens, custom variants, generated class vocabulary, and native CSS that belongs to the whole app.

Most applications should have exactly one app stylesheet that starts with the default Master CSS entry:

```css name=app.css
@import "@master/css";
```

That import marks the file as a full Master CSS entry. It loads the package stylesheet graph, declares the stable layer order, includes the preset theme and base styles, and gives integrations the stylesheet that receives generated CSS.

---

## Entry stylesheet
Use the app stylesheet for project-wide styling inputs:

```css name=app.css
@import "@master/css";

@theme {
  --color-brand: var(--color-blue-60);
  --spacing-action-x: 1rem;
}

@custom-variant motion-safe {
  @media (prefers-reduced-motion: no-preference) {
    @slot;
  }
}
```

Load this stylesheet once from the app root, framework layout, or build entry. Do not import it again from page-level CSS. A second import duplicates global native CSS and makes ownership harder to trace.

Use the lightweight marker only when a stylesheet should be a generated CSS entry without loading the package defaults:

```css
@master entry;
```

Most apps should prefer `@import "@master/css";`. Use `@master entry;` for advanced split entries that already receive the package base and theme from somewhere else.

---

## Base layer
The default entry includes the base layer. Base styles are normalization and document baseline rules emitted before project defaults, components, and utilities.

The package base entry declares the stable layer order:

```css
@layer theme, base, defaults, components, utilities;
```

Write project-wide element defaults in native CSS and put them in `@layer base` when they should behave like document baseline styles:

```css name=app.css
@import "@master/css";

@layer base {
  html {
    color-scheme: light dark;
  }

  body {
    background: var(--color-surface-base);
    color: var(--color-text-body);
  }

  :where(button, input, textarea, select) {
    font: inherit;
  }
}
```

Keep base styles broad and structural. Use later layers, component classes, and utilities for product UI roles or local page decisions.

Use the split base import only when a stylesheet needs the default layer order and browser normalization without the full Master CSS entry:

```css
@import "@master/css/base.css";
```

That is a specialized import. It does not replace the app entry in ordinary projects.

---

## Site typeface
Treat the app typeface as global vocabulary. Put reusable font families and OpenType feature sets in `@theme`; the default base layer applies them to the inherited document targets for you.

```css name=globals.css
@import "@master/css";

@theme {
  --font-sans: "Geist", "Noto Sans TC";
  --font-mono: "IBM Plex Mono";
  --font-feature-sans: "ss02", "ss03", "ss04", "ss06", "ss07", "ss08";
  --font-feature-mono: "cv01", "cv02", "cv29";
}
```

The base layer resolves `--font-sans` through `--font-family-sans` and applies it to `body` and shadow hosts. It resolves `--font-mono` through `--font-family-mono` and applies it to `code`, `kbd`, `samp`, and `pre`. Define `--font-feature-sans` and `--font-feature-mono` when those stacks need shared OpenType features; otherwise the base layer falls back to `normal`. Form controls inherit the surrounding font and feature settings.

Load the matching font files with normal `@font-face` rules or a provider stylesheet before depending on those family names. Keep one-off typeface changes in markup utilities such as `font:mono`; reserve the global typeface tokens for typography that should be inherited by the whole app.

---

## Shared vocabulary
Reusable styling is an ownership decision. Keep local choices in markup while a pattern is changing. Promote only the part that has become shared.

Use this order:

1. Keep one-off styling in markup utilities.
2. Move repeated values into theme tokens.
3. Write native global CSS for global selectors and app-wide stylesheet surfaces.
4. Create custom utilities for reusable low-level primitives.
5. Create component classes for repeated product UI roles.
6. Use defaults sparingly for early-layer generated classes that intentionally sit before components.

Start with utilities when the style belongs to one element or one usage site:

```html
<button class="inline-flex items-center justify-center gap:xs px:md py:xs r:lg font:medium font:sm bg:blue fg:white">
  Save changes
</button>
```

Do not abstract just to shorten a class list. Abstract when the name improves product vocabulary, such as `btn`, `card`, `field`, `toolbar`, or `empty-state`.

When the repeated part is a value, make it a token instead of a class:

```css name=app.css
@theme {
  --color-brand: var(--color-blue-60);
  --spacing-action-x: 1rem;
}
```

```html
<button class="r:lg fg:white bg:brand px:action-x">
  Submit
</button>
```

Use [Theme Tokens](/guide/theme) for shared colors, spacing, typography, radius, shadow, motion, breakpoints, container sizes, and mode-specific values.

Write native CSS when the selector itself is global output you always ship:

```css name=app.css
.skip-link {
  @compose fixed left:0 top:0 z:1 px:md py:xs bg:blue fg:white;
  transform: translateY(-100%);
}

.skip-link:focus {
  transform: translateY(0);
}
```

Native global CSS is emitted as part of the app stylesheet. It is not generated on demand, so use it for global surfaces and selectors that should always exist.

---

## Component classes
Use component classes when a repeated UI role should behave like a generated Master CSS class. Define them in the global entry graph and apply them from markup:

```css name=app.css
@components {
  btn {
    @compose inline-flex items-center justify-center gap:xs px:md py:xs r:lg font:medium font:sm;
    @compose bg:blue fg:white;
  }
}
```

```html
<button class="btn">Save changes</button>
```

Component definitions are manifest inputs, not immediate CSS output. Defining `btn` does not generate `.btn` until the class appears in scanned source or is composed by another generated style.

Keep component classes small enough to combine:

```css name=app.css
@components {
  btn {
    @compose inline-flex items-center justify-center font:medium;
  }

  btn-sm {
    @compose h:8x px:sm r:md font:xs;
  }

  btn-md {
    @compose h:10x px:md r:md font:sm;
  }

  btn-primary {
    @compose bg:blue fg:white;
  }
}
```

```html
<button class="btn btn-md btn-primary">Submit</button>
```

Put state behavior inside the component only when it belongs to every usage:

```css name=app.css
@components {
  btn-primary {
    @compose bg:blue fg:white;

    &:hover {
      @compose bg:blue-60;
    }

    &:focus-visible {
      @compose outline:2px|solid|blue outline-offset:4xs;
    }
  }
}
```

Use markup utilities for one-off variations at a specific call site.

---

## Custom utilities
Use custom utilities for reusable primitives that are lower-level than product components. Good utility names describe a styling capability, not a UI role.

```css name=app.css
@utilities {
  flow {
    @compose grid gap:md;
  }

  content-auto {
    content-visibility: auto;
    contain-intrinsic-size: auto 32rem;
  }

  print-hidden {
    @variant print {
      display: none;
    }
  }
}
```

```html
<section class="content-auto flow print-hidden">...</section>
```

Custom utilities are generated only when used. Use them for shared layout helpers, rendering hints, print behavior, or other primitives that should feel like part of the project class language.

Use component classes when the name describes a UI role. Use theme tokens when the reusable part is a value.

---

## Organize global files
Split global CSS files by ownership, then import them from the app entry. Imported CSS becomes one project entry graph.

```txt
styles/
  app.css
  theme.css
  base.css
  buttons.css
```

```css name=styles/app.css
@import "@master/css";
@import "./theme.css";
@import "./base.css";
@import "./buttons.css";
```

```css name=styles/buttons.css
@components {
  btn {
    @compose inline-flex items-center justify-center font:medium;
  }

  btn-primary {
    @compose bg:blue fg:white;
  }
}
```

Keep project-wide tokens, variants, generated vocabulary, and native global CSS in the global entry graph. Keep route-specific selectors in [Route-level styles](/guide/route-level-styles), and promote them here only after they become shared.

---

# Installing Master CSS

Source: https://rc.css.master.co/en/guide/installation

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

## 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.

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

      ```bash name=Terminal
      npm create vite@latest my-app
      cd 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.

      ```bash name=Terminal
      npm create @master/css@rc -- --yes
      ```

      ### Run and style
      Start the dev server, then use Master CSS classes in your markup.

      ```bash name=Terminal&action=run
      dev
      ```

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

---

# Progressive Rendering in Angular

Source: https://rc.css.master.co/en/guide/installation/angular

Summary: Guide to setting up Master CSS progressive rendering in your Angular project.

### Create a project
      If you don't have an Angular project, create one first.

      ```bash name=Terminal
      ng new my-app
      cd my-app
      ```

      ### Add Master CSS
      Run the installer from the Angular project root.

      ```bash name=Terminal
      npm create @master/css@rc -- --framework angular --yes
      ```

      ### Launch server
      Run the Angular development server.

      ```bash name=Terminal
      npm start
      ```

    ### Start using Master CSS
    Now style your first template using Master CSS syntax.

```html name=src/app/app.component.html
<h1 class="m:2xl italic font:5xl font:heavy text:neutral">Hello World</h1>
```

---

Use [Angular runtime rendering](/guide/installation/angular/runtime-rendering) or [Angular static rendering](/guide/installation/angular/static-rendering) when you need rendering-mode details.

---

# Runtime Rendering in Angular

Source: https://rc.css.master.co/en/guide/installation/angular/runtime-rendering

Summary: Guide to setting up Master CSS runtime rendering in your Angular project.

### Create a project
      If you don&#39;t have a Angular project, create one first. It&#39;s recommended to refer [Angular CLI](https://angular.io/cli).

        {[
          {
            name: 'Terminal',
            lang: 'bash',
            code: `
              ng new my-app
              cd my-app
            `
          }
        ]}

      ### Install Master CSS
      Install Master CSS into your project via package managers.

      ```bash action=install
      @master/css@rc @master/css-runtime@rc
      ```

      ### Set up CSS runtime engine
      Initialize the runtime engine in the entry file `src/main.ts`.

      ```ts name=src/main.ts
         import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
         import { AppModule } from './app/app.module';
         import defaultManifest from '@master/css-preset/default-manifest.json' with { type: 'json' }; // [!code ++]
         import CSSRuntime from '@master/css-runtime'; // [!code ++]

         CSSRuntime.create({ manifest: defaultManifest }).observe(); // [!code ++]

         platformBrowserDynamic().bootstrapModule(AppModule)
           .catch(err => console.error(err));
      ```

      ### Import the default stylesheet
      Import Master CSS from Angular's app stylesheet. This stylesheet is also the project CSS entry.

      ```css name=src/styles.css
      @import '@master/css';
      ```

      ### Prevent flash of unstyled content
      Add `html <html hidden>` to avoid [FOUC](https://en.wikipedia.org/wiki/Flash_of_unstyled_content) caused by the runtime engine not yet injecting CSS rules.

      ```html name=src/index.html
      <!doctype html>
      <!-- @MARK hidden -->
      <html lang="en" hidden>
      ```

      ### Launch server
      Run the development server.

      ```bash name=Terminal
      npm run start
      ```

    ### Start using Master CSS
    Now style your first element using Master CSS syntax!
    Open your browser to watch the changes.

```html name=src/app/app.component.html
<h1 class="m:2xl italic font:5xl font:heavy text:neutral">Hello World</h1>
```

---

# Static Rendering in Angular

Source: https://rc.css.master.co/en/guide/installation/angular/static-rendering

Summary: Guide to setting up Master CSS static rendering in your Angular project.

### Create a project
      If you don&#39;t have a Angular project, create one first. It&#39;s recommended to refer [Angular CLI](https://angular.io/cli).

        {[
          {
            name: 'Terminal',
            lang: 'bash',
            code: `
              ng new my-app
              cd my-app
            `
          }
        ]}

      ### Install Master CSS and others
      Install the Master CSS and Angular custom webpack plugin into your project via package managers.

      ```bash action=install
      @master/css.webpack@rc @angular-builders/custom-webpack
      ```

      ### Set up static rendering
      - Create a `webpack.config.js` file
      - Add a `MasterCSSPlugin` to the plugins

      ```js name=webpack.config.js
      import MasterCSSPlugin from '@master/css.webpack' // [!code ++]

      export default (config) => { // [!code ++]
        config.plugins.push( // [!code ++]
          new MasterCSSPlugin() // [!code ++]
        ) // [!code ++]
        return config // [!code ++]
      } // [!code ++]
      ```

      ### Configure Angular
      Use `@angular-builders/custom-webpack` instead of the default builder for custom webpack configuration.

        {[
          {
            name: 'angular.json',
            lang: 'js',
            code: `
                {
                  …,
                  "projects": {
                    "my-app": {
                      …,
                      "architect": {
                        "build": {
                           "builder": "@angular-devkit/build-angular:browser", // [!code --]
                           "builder": "@angular-builders/custom-webpack:browser", // [!code ++]
                           "options": {
                             "customWebpackConfig": { // [!code ++]
                               "path": "./webpack.config.js" // [!code ++]
                             }, // [!code ++]
                            …
                          },
                          …
                        },
                        "serve": {
                           "builder": "@angular-devkit/build-angular:dev-server", // [!code --]
                           "builder": "@angular-builders/custom-webpack:dev-server", // [!code ++]
                           "options": { // [!code ++]
                             "browserTarget": "my-app:build" // [!code ++]
                           }, // [!code ++]
                          …
                        },
                        …
                      }
                    },
                    …
                  }
                }
            `
          }
        ]}

      ### Import stylesheets
      Import Master CSS into Angular's app stylesheet `src/styles.css`. This stylesheet is also the project CSS entry.

      (!) Don&#39;t import it in the <code>src/main.ts</code>, you&#39;ll get some errors about webpack loaders.

      ```css name=src/styles.css
      /* You can add global styles to this file, and also import other style files */
      @import '@master/css'; /* [!code ++] */
      ```

      ### Launch server
      Run the development server.

      ```bash name=Terminal
      npm run start
      ```

    ### Start using Master CSS
    Now style your first element using Master CSS syntax!
    Open your browser to watch the changes.

```html name=src/app/app.component.html
<h1 class="m:2xl italic font:5xl font:heavy text:neutral">Hello World</h1>
```

---

# Set up Master CSS in ASP.NET Core

Source: https://rc.css.master.co/en/guide/installation/aspnet-core

Summary: Guide to setting up Master CSS in ASP.NET Core Razor Pages or MVC projects.

Use Vite runtime rendering when ASP.NET Core owns Razor Pages or MVC views. ASP.NET Core serves the app, while the Vite-built Master CSS runtime generates class rules in the browser as Razor output appears.

      ### Create a project
      If you do not have an ASP.NET Core project, create one first.

      ```bash name=Terminal
      dotnet new webapp -o my-app
      cd my-app
      npm init -y
      ```

      ### Install Vite and Master CSS
      Install Vite and the Master CSS Vite integration in the project root.

      ```bash name=Terminal
      npm install -D vite @master/css.vite@rc
      ```

      ### Configure Vite
      Build the runtime entry and base stylesheet into `wwwroot/assets`.

      ```ts name=vite.config.ts
      import { defineConfig } from 'vite'
      import masterCSS from '@master/css.vite'

      export default defineConfig({
        plugins: [
          masterCSS({ mode: 'runtime', injectRuntime: false })
        ],
        build: {
          outDir: 'wwwroot/assets',
          emptyOutDir: true,
          rollupOptions: {
            input: 'src/main.ts',
            output: {
              entryFileNames: 'app.js',
              assetFileNames: 'app[extname]'
            }
          }
        }
      })
      ```

      ### Create the asset entry
      Import the Vite-managed runtime and the Master CSS stylesheet.

      ```ts name=src/main.ts
      import '@master/css.vite/runtime'
      import './app.css'
      ```

      ```css name=src/app.css
      @import "@master/css";
      ```

      ### Load the assets
      Reference the Vite output from your shared layout. Add `hidden` so the runtime can avoid a flash of unstyled content before it injects class rules.

      ```html name=Pages/Shared/_Layout.cshtml
      <html lang="en" hidden>
      <head>
        <link rel="stylesheet" href="~/assets/app.css" asp-append-version="true">
      </head>
      <body>
        @RenderBody()
        <script type="module" src="~/assets/app.js" asp-append-version="true"></script>
      </body>
      </html>
      ```

      ### Add build scripts
      Build or watch the frontend assets beside the .NET server.

      ```json name=package.json
      {
        "scripts": {
          "build:assets": "vite build",
          "watch:assets": "vite build --watch"
        }
      }
      ```

    ### Hello world
    Now style your first Razor page using Master CSS syntax.

```html name=Pages/Index.cshtml
<h1 class="m:2xl italic font:5xl font:heavy text:neutral">
  Hello World
</h1>
```

Use [ASP.NET Core static rendering](/guide/installation/aspnet-core/static-rendering) when Razor class strings are complete at build time and you want a generated CSS asset.

---

# Static Rendering in ASP.NET Core

Source: https://rc.css.master.co/en/guide/installation/aspnet-core/static-rendering

Summary: Guide to setting up Master CSS static rendering in ASP.NET Core Razor Pages or MVC projects.

Use static rendering when ASP.NET Core Razor Pages or MVC views contain complete class strings and you want Vite to build a generated CSS asset before .NET serves the page.

      ### Create a project
      If you do not have an ASP.NET Core project, create one first.

      ```bash name=Terminal
      dotnet new webapp -o my-app
      cd my-app
      npm init -y
      ```

      ### Install Vite and Master CSS
      Install Vite and the Master CSS Vite integration in the project root.

      ```bash name=Terminal
      npm install -D vite @master/css.vite@rc
      ```

      ### Configure Vite
      Build static CSS into `wwwroot/assets`.

      ```ts name=vite.config.ts
      import { defineConfig } from 'vite'
      import masterCSS from '@master/css.vite'

      export default defineConfig({
        plugins: [
          masterCSS({ mode: 'static' })
        ],
        build: {
          outDir: 'wwwroot/assets',
          emptyOutDir: true,
          rollupOptions: {
            input: 'src/main.ts',
            output: {
              entryFileNames: 'app.js',
              assetFileNames: 'app[extname]'
            }
          }
        }
      })
      ```

      ### Create the asset entry
      Import Master CSS and scan Razor Pages and MVC views where classes are authored.

      ```ts name=src/main.ts
      import './app.css'
      ```

      ```css name=src/app.css
      @import "@master/css";

      @source "../Pages/**/*.cshtml";
      @source "../Views/**/*.cshtml";
      @source not "../bin/**";
      @source not "../obj/**";
      ```

      ### Load the stylesheet
      Reference the generated CSS from your shared layout.

      ```html name=Pages/Shared/_Layout.cshtml
      <link rel="stylesheet" href="~/assets/app.css" asp-append-version="true">
      ```

    ### Hello world
    Now style your first Razor page using Master CSS syntax.

```html name=Pages/Index.cshtml
<h1 class="m:2xl italic font:5xl font:heavy text:neutral">
  Hello World
</h1>
```

Static rendering depends on complete class strings in scanned source files. If a Razor view assembles class names from fragments, map states to complete class strings or add bounded candidates with [`@safelist`](/guide/directives#safelist).

---

# Set up Master CSS in Astro

Source: https://rc.css.master.co/en/guide/installation/astro

Summary: Guide to setting up Master CSS progressive rendering in your Astro project.

### Create a project
      If you don't have an Astro project, create one first.

      ```bash name=Terminal
      npm create astro@latest my-app
      cd my-app
      ```

      ### Add Master CSS
      Run the installer from the Astro project root.

      ```bash name=Terminal
      npm create @master/css@rc -- --framework astro --yes
      ```

      ### Start dev server
      Run the command to start the Astro dev server.

      ```bash name=Terminal&action=run
      dev
      ```

    ### Start using Master CSS
    Now style your first Astro page using Master CSS syntax.

```astro name=src/pages/index.astro
<h1 class="m:2xl italic font:5xl font:heavy text:neutral">
  Hello World
</h1>
```

---

# Runtime Rendering in Astro

Source: https://rc.css.master.co/en/guide/installation/astro/runtime-rendering

Summary: Guide to setting up Master CSS runtime rendering in your Astro project.

### Create a project
      If you don't have an Astro project, create one first.

      ```bash name=Terminal
      npm create astro@latest my-app
      cd my-app
      ```

      ### Add Master CSS
      Run the installer in runtime mode from the Astro project root. Runtime mode generates CSS in the browser and skips Astro middleware pre-rendering.

      ```bash name=Terminal
      npm create @master/css@rc -- --framework astro --mode runtime --yes
      ```

      ### Start dev server
      Run the command to start the Astro dev server.

      ```bash name=Terminal&action=run
      dev
      ```

    ### Start using Master CSS
    Now style your first Astro page using Master CSS syntax.

```astro name=src/pages/index.astro
<h1 class="m:2xl italic font:5xl font:heavy text:neutral">
  Hello World
</h1>
```

---

# Static Rendering in Astro

Source: https://rc.css.master.co/en/guide/installation/astro/static-rendering

Summary: Guide to setting up Master CSS static rendering in your Astro project.

### Create a project
      If you don't have an Astro project, create one first.

      ```bash name=Terminal
      npm create astro@latest my-app
      cd my-app
      ```

      ### Add Master CSS
      Run the installer in static mode from the Astro project root. Static mode scans complete class strings and emits generated CSS at build time.

      ```bash name=Terminal
      npm create @master/css@rc -- --framework astro --mode static --yes
      ```

      ### Start dev server
      Run the command to start the Astro dev server.

      ```bash name=Terminal&action=run
      dev
      ```

    ### Start using Master CSS
    Now style your first Astro page using Master CSS syntax.

```astro name=src/pages/index.astro
<h1 class="m:2xl italic font:5xl font:heavy text:neutral">
  Hello World
</h1>
```

---

# Set up Master CSS in Blazor

Source: https://rc.css.master.co/en/guide/installation/blazor

Summary: Guide to setting up Master CSS in your Blazor project.

Use Vite to build the browser runtime entry for a Blazor app. Vite owns the frontend assets, while Blazor and .NET still own the app host page, project files, and server/runtime lifecycle.

      ### Create a Blazor project
      If you don't have a Blazor project, create one first.

      ```bash name=Terminal
      dotnet new blazor -o my-app
      cd my-app
      ```

      ### Install Vite and Master CSS
      Install Vite and the Master CSS Vite integration in the Blazor project root.

      ```bash name=Terminal
      npm init -y
      npm install -D vite @master/css.vite@rc
      ```

      ### Configure Vite
      Build the runtime entry and base stylesheet into `wwwroot/assets` so the Blazor host page can load them as static assets.

      ```ts name=vite.config.ts
      import { defineConfig } from 'vite'
      import masterCSS from '@master/css.vite'

      export default defineConfig({
        plugins: [
          masterCSS({ mode: 'runtime', injectRuntime: false })
        ],
        build: {
          outDir: 'wwwroot/assets',
          emptyOutDir: true,
          rollupOptions: {
            input: 'src/main.ts',
            output: {
              entryFileNames: 'app.js',
              assetFileNames: 'app[extname]'
            }
          }
        }
      })
      ```

      ### Create the asset entry
      Import the Vite-managed runtime and the Master CSS stylesheet from the browser entry.

      ```ts name=src/main.ts
      import '@master/css.vite/runtime'
      import './app.css'
      ```

      ```css name=src/app.css
      @import "@master/css";
      ```

      ### Add build scripts
      Run Vite before serving the app, or keep it watching while the .NET dev server runs.

      ```json name=package.json
      {
        "scripts": {
          "build:assets": "vite build",
          "watch:assets": "vite build --watch"
        },
        "devDependencies": {
          "@master/css.vite": "rc",
          "vite": "latest"
        }
      }
      ```

      ### Load the built assets
      Reference the Vite output from the Blazor host page your project uses, such as `Components/App.razor`, `wwwroot/index.html`, or `Pages/_Host.cshtml`. Add `hidden` to the root document so the runtime can avoid a flash of unstyled content before it injects class rules.

      ```html name=Components/App.razor
      <html lang="en" hidden>
      <head>
        <link rel="stylesheet" href="/assets/app.css">
      </head>
      <body>
        <Routes />
        <script type="module" src="/assets/app.js"></script>
      </body>
      </html>
      ```

      ### Launch the app
      Build or watch the frontend assets, then run the Blazor app.

      ```bash name=Terminal
      npm run build:assets
      dotnet run
      ```

    ### Start using Master CSS
    Now style your first Razor component using Master CSS syntax.

```html name=Components/Pages/Home.razor
<h1 class="m:2xl italic font:5xl font:heavy text:neutral">
  Hello World
</h1>
```

Runtime rendering generates CSS in the browser as Blazor renders and updates elements. Use [Blazor static rendering](/guide/installation/blazor/static-rendering) when classes are statically visible and you need build-time CSS output.

---

# Runtime Rendering in Blazor

Source: https://rc.css.master.co/en/guide/installation/blazor/runtime-rendering

Summary: Guide to setting up Master CSS runtime rendering in your Blazor project.

Use Vite to build the browser runtime entry for a Blazor app. Vite owns the frontend assets, while Blazor and .NET still own the app host page, project files, and server/runtime lifecycle.

      ### Create a Blazor project
      If you don't have a Blazor project, create one first.

      ```bash name=Terminal
      dotnet new blazor -o my-app
      cd my-app
      ```

      ### Install Vite and Master CSS
      Install Vite and the Master CSS Vite integration in the Blazor project root.

      ```bash name=Terminal
      npm init -y
      npm install -D vite @master/css.vite@rc
      ```

      ### Configure Vite
      Build the runtime entry and base stylesheet into `wwwroot/assets` so the Blazor host page can load them as static assets.

      ```ts name=vite.config.ts
      import { defineConfig } from 'vite'
      import masterCSS from '@master/css.vite'

      export default defineConfig({
        plugins: [
          masterCSS({ mode: 'runtime', injectRuntime: false })
        ],
        build: {
          outDir: 'wwwroot/assets',
          emptyOutDir: true,
          rollupOptions: {
            input: 'src/main.ts',
            output: {
              entryFileNames: 'app.js',
              assetFileNames: 'app[extname]'
            }
          }
        }
      })
      ```

      ### Create the asset entry
      Import the Vite-managed runtime and the Master CSS stylesheet from the browser entry.

      ```ts name=src/main.ts
      import '@master/css.vite/runtime'
      import './app.css'
      ```

      ```css name=src/app.css
      @import "@master/css";
      ```

      ### Add build scripts
      Run Vite before serving the app, or keep it watching while the .NET dev server runs.

      ```json name=package.json
      {
        "scripts": {
          "build:assets": "vite build",
          "watch:assets": "vite build --watch"
        },
        "devDependencies": {
          "@master/css.vite": "rc",
          "vite": "latest"
        }
      }
      ```

      ### Load the built assets
      Reference the Vite output from the Blazor host page your project uses, such as `Components/App.razor`, `wwwroot/index.html`, or `Pages/_Host.cshtml`. Add `hidden` to the root document so the runtime can avoid a flash of unstyled content before it injects class rules.

      ```html name=Components/App.razor
      <html lang="en" hidden>
      <head>
        <link rel="stylesheet" href="/assets/app.css">
      </head>
      <body>
        <Routes />
        <script type="module" src="/assets/app.js"></script>
      </body>
      </html>
      ```

      ### Launch the app
      Build or watch the frontend assets, then run the Blazor app.

      ```bash name=Terminal
      npm run build:assets
      dotnet run
      ```

    ### Start using Master CSS
    Now style your first Razor component using Master CSS syntax.

```html name=Components/Pages/Home.razor
<h1 class="m:2xl italic font:5xl font:heavy text:neutral">
  Hello World
</h1>
```

Runtime rendering generates CSS in the browser as Blazor renders and updates elements. Use [Blazor static rendering](/guide/installation/blazor/static-rendering) when classes are statically visible and you need build-time CSS output.

---

# Static Rendering in Blazor

Source: https://rc.css.master.co/en/guide/installation/blazor/static-rendering

Summary: Guide to setting up Master CSS static rendering in your Blazor project with Vite.

Use Vite to build the browser assets for a Blazor app, then let Master CSS scan `.razor`, `.cshtml`, and host HTML files during that asset build. Vite owns the frontend asset pipeline; Blazor and .NET still own the app host page, project files, and server/runtime lifecycle.

      ### Create a Blazor project
      If you don't have a Blazor project, create one first.

      ```bash name=Terminal
      dotnet new blazor -o my-app
      cd my-app
      ```

      ### Install Vite and Master CSS
      Install Vite and the Master CSS Vite integration in the project root.

      ```bash name=Terminal
      npm init -y
      npm install -D vite @master/css.vite@rc
      ```

      ### Configure Vite
      Build static CSS into `wwwroot/assets` so the Blazor host page can load it as a normal static asset.

      ```ts name=vite.config.ts
      import { defineConfig } from 'vite'
      import masterCSS from '@master/css.vite'

      export default defineConfig({
        plugins: [
          masterCSS({ mode: 'static' })
        ],
        build: {
          outDir: 'wwwroot/assets',
          emptyOutDir: true,
          rollupOptions: {
            input: 'src/main.ts',
            output: {
              entryFileNames: 'app.js',
              assetFileNames: 'app[extname]'
            }
          }
        }
      })
      ```

      ### Create the asset entry
      Import the Master CSS entry from the Vite stylesheet and explicitly include Blazor source files.

      ```ts name=src/main.ts
      import './app.css'
      ```

      ```css name=src/app.css
      @import "@master/css";

      @source "../**/*.{razor,cshtml,html}";
      @source not "../bin/**";
      @source not "../obj/**";
      @source not "../node_modules/**";
      @source not "../wwwroot/assets/**";
      ```

      ### Add build scripts
      Run Vite before serving the app, or keep it watching while the .NET dev server runs.

      ```json name=package.json
      {
        "scripts": {
          "build:assets": "vite build",
          "watch:assets": "vite build --watch"
        },
        "devDependencies": {
          "@master/css.vite": "rc",
          "vite": "latest"
        }
      }
      ```

      ### Load the built assets
      Reference the Vite output from the Blazor host page your project uses, such as `Components/App.razor`, `wwwroot/index.html`, or `Pages/_Host.cshtml`.

      ```html name=Components/App.razor
      <head>
        <link rel="stylesheet" href="/assets/app.css">
      </head>
      <body>
        <Routes />
        <script type="module" src="/assets/app.js"></script>
      </body>
      ```

      ### Launch the app
      Build or watch the frontend assets, then run the Blazor app.

      ```bash name=Terminal
      npm run build:assets
      dotnet run
      ```

    ### Start using Master CSS
    Now style your first Razor component using Master CSS syntax.

```html name=Components/Pages/Home.razor
<h1 class="m:2xl italic font:5xl font:heavy text:neutral">
  Hello World
</h1>
```

Static rendering depends on complete class strings in scanned source files. If a Razor component assembles class names from fragments, map states to complete class strings or add bounded candidates with [`@safelist`](/guide/directives#safelist).

---

# Using CDNs

Source: https://rc.css.master.co/en/guide/installation/cdn

Summary: Copy and paste the CDN links to start the Master CSS runtime in your browser.

Copy and paste the CDN links to instantly launch the [runtime](/guide/rendering-modes#runtime-rendering) in your browser with the default preset.

    ### Start in one step
    Add the default stylesheet and runtime script to your document, then start using Master CSS classes.

    Open your browser to watch the changes.

```html name=index.html
<!DOCTYPE html>
<html lang="en" hidden>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="preload" as="style" href="https://cdn.master.co/css@rc/base.css">
  <link rel="preload" as="script" href="https://cdn.master.co/css-runtime@rc">
  <link rel="modulepreload" as="json" crossorigin href="https://cdn.master.co/css-runtime@rc/default-manifest.json">
  <link rel="stylesheet" href="https://cdn.master.co/css@rc/base.css">
  <script src="https://cdn.master.co/css-runtime@rc"></script>
</head>
<body>
  <h1 class="m:2xl italic font:5xl font:heavy text:neutral">Hello World</h1>
</body>
</html>
```

The CDN runtime only includes the default preset. Use a package-manager installation when you need custom theme tokens, utilities, modes, emitted globals, or framework integration. See [preload critical resources](/guide/preload-critical-resources#preload-runtime-engine) for the request preload details.

---

# Using CLI

Source: https://rc.css.master.co/en/guide/installation/cli

Summary: Using the CLI as a standalone static renderer when no integration fits.

Use the CLI as a standalone [static rendering](/guide/rendering-modes#static-rendering) fallback when a project does not have a Vite asset build, framework integration, or server rendering hook. Integration guides should prefer the matching Vite, runtime, static, or progressive setup first.

## Installation

      ### Install Master CSS
      Install Master CSS [CLI](https://www.npmjs.com/package/@master/css-cli) as a development dependency.

      ```bash name=Terminal
      npm install -D @master/css-cli@rc
      ```

      ### Create your CSS entry
      Create a stylesheet that imports the default Master CSS entry.

      ```css name=main.css
      @import "@master/css";
      ```

      ### Run the build command
      Run the command to scan sources and write `master.css`.

      ```bash name=Terminal
      npx @master/css-cli "index.html" --output master.css --watch
      ```

    ### Start using Master CSS
    Master CSS scans raw sources and generates the `./master.css` file for you.

    Now style your first element using Master CSS syntax!

```html name=index.html
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="./master.css"> <!-- [!code highlight] -->
</head>
<body>
  <!-- @MARK italic m:2xl text:neutral font:5xl font:heavy -->
  <h1 class="m:2xl italic font:5xl font:heavy text:neutral">Hello World</h1>
</body>
</html>
```

---

# Set up Master CSS in Express

Source: https://rc.css.master.co/en/guide/installation/express

Summary: Guide to setting up Master CSS in Express server-rendered templates.

Use progressive rendering when Express owns the HTML response. Express renders the template, `@master/css-server` injects the first-response CSS, and the Vite runtime asset adopts that CSS in the browser for later dynamic classes.

      ### Open your project
      Start from an Express project root.

      ```bash name=Terminal
      cd my-express-app
      npm init -y
      ```

      ### Install Master CSS
      Install the server renderer, Vite, and the Vite integration.

      ```bash name=Terminal
      npm install express ejs @master/css-server@rc
      npm install -D vite @master/css.vite@rc
      ```

      ### Configure Vite
      Build the browser runtime entry and base stylesheet into `public/assets`.

      ```ts name=vite.config.ts
      import { defineConfig } from 'vite'
      import masterCSS from '@master/css.vite'

      export default defineConfig({
        plugins: [
          masterCSS({ mode: 'runtime', injectRuntime: false })
        ],
        build: {
          outDir: 'public/assets',
          emptyOutDir: true,
          rollupOptions: {
            input: 'src/main.ts',
            output: {
              entryFileNames: 'app.js',
              assetFileNames: 'app[extname]'
            }
          }
        }
      })
      ```

      ### Create the browser entry
      Import the Vite-managed runtime and the Master CSS stylesheet.

      ```ts name=src/main.ts
      import '@master/css.vite/runtime'
      import './app.css'
      ```

      ```css name=src/app.css
      @import "@master/css";
      ```

      ### Render with Master CSS
      Render the template first, then pass the full document to `@master/css-server`.

      ```js name=app.js
      import express from 'express'
      import ejs from 'ejs'
      import { render } from '@master/css-server'

      const app = express()

      app.use('/assets', express.static('public/assets'))

      app.get('/', async (_request, response) => {
        const body = await ejs.renderFile('views/index.ejs')
        const document = `<!doctype html>
      <html lang="en">
      <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link rel="stylesheet" href="/assets/app.css">
      </head>
      <body>
        ${body}
        <script type="module" src="/assets/app.js"></script>
      </body>
      </html>`

        response.send(render(document, undefined, {
          hydrationManifest: 'inject'
        }).html)
      })

      app.listen(3000)
      ```

      ### Add build scripts
      Build or watch the frontend assets beside the Express server.

      ```json name=package.json
      {
        "scripts": {
          "build:assets": "vite build",
          "watch:assets": "vite build --watch",
          "start": "node app.js"
        }
      }
      ```

    ### Hello world
    Now style your first server-rendered template using Master CSS syntax.

```html name=views/index.ejs
<h1 class="m:2xl italic font:5xl font:heavy text:neutral">
  Hello World
</h1>
```

Progressive rendering sends the first response with `style#master-css`, then the runtime adopts the injected hydration manifest and keeps handling classes added after the initial response. Use [Express static rendering](/guide/installation/express/static-rendering) when templates contain complete class strings and you want a generated CSS asset instead.

---

# Static Rendering in Express

Source: https://rc.css.master.co/en/guide/installation/express/static-rendering

Summary: Guide to setting up Master CSS static rendering in Express server-rendered templates.

Use static rendering when Express templates contain complete class strings and you want Vite to build a generated CSS asset before the server responds.

      ### Open your project
      Start from an Express project root.

      ```bash name=Terminal
      cd my-express-app
      npm init -y
      ```

      ### Install Vite and Master CSS
      Install Vite and the Master CSS Vite integration.

      ```bash name=Terminal
      npm install -D vite @master/css.vite@rc
      ```

      ### Configure Vite
      Build static CSS into `public/assets`.

      ```ts name=vite.config.ts
      import { defineConfig } from 'vite'
      import masterCSS from '@master/css.vite'

      export default defineConfig({
        plugins: [
          masterCSS({ mode: 'static' })
        ],
        build: {
          outDir: 'public/assets',
          emptyOutDir: true,
          rollupOptions: {
            input: 'src/main.ts',
            output: {
              entryFileNames: 'app.js',
              assetFileNames: 'app[extname]'
            }
          }
        }
      })
      ```

      ### Create the asset entry
      Import Master CSS and scan the server templates where classes are written.

      ```ts name=src/main.ts
      import './app.css'
      ```

      ```css name=src/app.css
      @import "@master/css";

      @source "../views/**/*.{ejs,hbs,pug}";
      @source "../public/**/*.html";
      ```

      ### Serve the CSS
      Serve `public` from Express and link the generated stylesheet from your layout.

      ```js name=app.js
      app.use(express.static('public'))
      ```

      ```html name=views/layout.ejs
      <link rel="stylesheet" href="/assets/app.css">
      ```

    ### Hello world
    Now style your first server-rendered template using Master CSS syntax.

```html name=views/index.ejs
<h1 class="m:2xl italic font:5xl font:heavy text:neutral">
  Hello World
</h1>
```

Static rendering depends on complete class strings in scanned source files. If a template assembles class names from fragments, map states to complete class strings or add bounded candidates with [`@safelist`](/guide/directives#safelist).

---

# Integrations

Source: https://rc.css.master.co/en/guide/installation/integrations

Summary: Master CSS allows you to install from package managers, copy-paste CDNs, and integrate with frameworks.

Installation guides for popular frameworks and build tools integrated with Master CSS.

  {[
    brands['vscode'],
    brands['react'],
    brands['vite'],
    brands['nextjs'],
    brands['express'],
    brands['aspnet-core'],
    brands['php'],
    brands['webpack'],
    brands['angular'],
    brands['vuejs'],
    brands['wordpress'],
    brands['laravel'],
    brands['svelte'],
    brands['blazor'],
    brands['rails'],
    brands['astro'],
    brands['nuxtjs'],
    brands['storybook'],
    brands['shopify'],
    brands['react-router'],
    brands['lit'],
    brands['rspack'],
    brands['rsbuild'],
    brands['tanstack-start'],
  ]}

---

Don't have a preferred framework or tool yet? Try the [online playground](/play), C&P the [Runtime CDN](/guide/installation/cdn), use the [quick start](/guide/installation), or set up the [`@master/css-runtime`](https://www.npmjs.com/package/@master/css-runtime) package from scratch by initializing it in your app’s entry point.

---

# Set up Master CSS in Laravel

Source: https://rc.css.master.co/en/guide/installation/laravel

Summary: Guide to setting up Master CSS in your Laravel project.

### Create a project
      If you don't have a Laravel project, create one first.

      ```bash name=Terminal
      laravel new my-app
      cd my-app
      ```

      ### Add Master CSS
      Run the installer in static mode from the Laravel project root.

      ```bash name=Terminal
      npm create @master/css@rc -- --framework laravel --mode static --yes
      ```

      ### Launch server
      Run Laravel and Vite development servers.

      ```bash name=Terminal
      composer run dev
      ```

    ### Hello world
    Now style your first Blade view using Master CSS syntax.

```html name=resources/views/app.blade.php
<h1 class="m:2xl italic font:5xl font:heavy text:neutral">
  Hello World
</h1>
```

---

# Set up Master CSS in Lit

Source: https://rc.css.master.co/en/guide/installation/lit

Summary: Guide to setting up Master CSS in your Lit project.

### Create a Lit project
      If you don't have a Lit project, create one first.

      ```bash name=Terminal
      npm create vite@latest my-app -- --template lit-ts
      cd my-app
      ```

      ### Add Master CSS
      Run the installer from the Lit project root. Lit uses the default Vite runtime mode so classes can be generated as components render.

      ```bash name=Terminal
      npm create @master/css@rc -- --framework lit --yes
      ```

      ### Use the runtime decorator
      Master CSS styles inside a Lit shadow root need a runtime attached to that root. The installer adds this to the standard `src/my-element.ts` file when it exists.

      ```ts name=src/my-element.ts
      import { LitElement, html } from 'lit'
      import { customElement } from 'lit/decorators.js'
      import { cssRuntime } from '@master/css-runtime'
      import type CSSRuntime from '@master/css-runtime'
      import manifest from 'virtual:master-css-manifest'
      import emittedGlobals from 'virtual:master-css-emitted-globals'

      @customElement('my-element')
      @cssRuntime({ manifest, emittedGlobals })
      export class MyElement extends LitElement {
        cssRuntime?: CSSRuntime

        render() {
          return html`
            <button class="inline-flex items-center gap:xs px:md py:xs r:lg bg:blue fg:white">
              Hello Lit
            </button>
          `
        }
      }
      ```

      ### Start dev server
      Run the command to start the Vite dev server.

      ```bash name=Terminal&action=run
      dev
      ```

    ### Start using Master CSS
    Now style elements inside your Lit templates using Master CSS syntax.

---

# Progressive Rendering in Next.js

Source: https://rc.css.master.co/en/guide/installation/nextjs

Summary: Guide to setting up Master CSS progressive rendering in your Next.js project.

### Create a Next.js project
      If you don't have a Next.js project, create one first.

      ```bash name=Terminal
      npx create-next-app@latest my-app --ts --app --no-tailwind
      cd my-app
      ```

      ### Add Master CSS
      Run the installer from the Next.js project root.

      ```bash name=Terminal
      npm create @master/css@rc -- --framework nextjs --yes
      ```

      ### Launch server
      Run the development server.

      ```bash name=Terminal&action=run
      dev
      ```

    ### Start using Master CSS
    Now style your first page using Master CSS syntax.

```tsx name=app/page.tsx
export default function Home() {
  return (
    <h1 className="m:2xl italic font:5xl font:heavy text:neutral">
      Hello World
    </h1>
  )
}
```

---

Use [Next.js runtime rendering](/guide/installation/nextjs/runtime-rendering) when CSS should be generated only in the browser. Use [Next.js static rendering](/guide/installation/nextjs/static-rendering) when classes are statically visible and you need build-time CSS output.

---

# Runtime Rendering in Next.js

Source: https://rc.css.master.co/en/guide/installation/nextjs/runtime-rendering

Summary: Guide to setting up Master CSS runtime rendering in your Next.js project.

### Create a Next.js project
      If you don't have a Next.js project, create one first.

      ```bash name=Terminal
      npx create-next-app@latest my-app --ts --app --no-tailwind
      cd my-app
      ```

      ### Add Master CSS
      Run the installer in runtime mode from the Next.js project root. This injects the Master CSS runtime through Next.js client instrumentation without using the build adapter to pre-render page CSS.

      ```bash name=Terminal
      npm create @master/css@rc -- --framework nextjs --mode runtime --yes
      ```

      ### Launch server
      Run the development server.

      ```bash name=Terminal&action=run
      dev
      ```

    ### Start using Master CSS
    Now style your first page using Master CSS syntax.

```tsx name=app/page.tsx
export default function Home() {
  return (
    <h1 className="m:2xl italic font:5xl font:heavy text:neutral">
      Hello World
    </h1>
  )
}
```

---

# Static Rendering in Next.js

Source: https://rc.css.master.co/en/guide/installation/nextjs/static-rendering

Summary: Guide to setting up Master CSS static rendering in your Next.js project.

### Create a Next.js project
      If you don't have a Next.js project, create one first.

      ```bash name=Terminal
      npx create-next-app@latest my-app --ts --app --no-tailwind
      cd my-app
      ```

      ### Add Master CSS
      Run the installer in static mode from the Next.js project root. Static setup writes the generated stylesheet before Next.js loads the config.

      (i) Keep the installer-added `@import '@master/css';` in `app/globals.css`. Static mode replaces that import with the generated stylesheet and uses source scanning as the correctness baseline.

      ```bash name=Terminal
      npm create @master/css@rc -- --framework nextjs --mode static --yes
      ```

      ### Launch server
      Run the development server.

      ```bash name=Terminal&action=run
      dev
      ```

    ### Start using Master CSS
    Now style your first page using Master CSS syntax.

```tsx name=app/page.tsx
export default function Home() {
  return (
    <h1 className="m:2xl italic font:5xl font:heavy text:neutral">
      Hello World
    </h1>
  )
}
```

---

# Set up Master CSS in Nuxt.js

Source: https://rc.css.master.co/en/guide/installation/nuxtjs

Summary: Guide to setting up Master CSS in your Nuxt.js project.

### Create a project
      If you don't have a Nuxt project, create one first.

      ```bash name=Terminal
      npx nuxi@latest init my-app
      cd my-app
      ```

      ### Add Master CSS
      Run the installer from the Nuxt project root.

      ```bash name=Terminal
      npm create @master/css@rc -- --framework nuxt --yes
      ```

      ### Launch server
      Run the development server.

      ```bash name=Terminal&action=run
      dev
      ```

    ### Start using Master CSS
    Now style your first component using Master CSS syntax.

```vue name=app.vue
<template>
  <h1 class="m:2xl italic font:5xl font:heavy text:neutral">
    Hello World
  </h1>
</template>
```

---

# Runtime Rendering in Nuxt.js

Source: https://rc.css.master.co/en/guide/installation/nuxtjs/runtime-rendering

Summary: Guide to setting up Master CSS runtime rendering in your Nuxt.js project.

### Create a project
      If you don't have a Nuxt project, create one first.

      ```bash name=Terminal
      npx nuxi@latest init my-app
      cd my-app
      ```

      ### Add Master CSS
      Run the installer in runtime mode from the Nuxt project root. Runtime mode generates CSS in the browser and skips server-side first-page CSS rendering.

      ```bash name=Terminal
      npm create @master/css@rc -- --framework nuxt --mode runtime --yes
      ```

      ### Launch server
      Run the development server.

      ```bash name=Terminal&action=run
      dev
      ```

    ### Start using Master CSS
    Now style your first component using Master CSS syntax.

```vue name=app.vue
<template>
  <h1 class="m:2xl italic font:5xl font:heavy text:neutral">
    Hello World
  </h1>
</template>
```

---

# Static Rendering in Nuxt.js

Source: https://rc.css.master.co/en/guide/installation/nuxtjs/static-rendering

Summary: Guide to setting up Master CSS static rendering in your Nuxt.js project.

### Create a project
      If you don't have a Nuxt project, create one first.

      ```bash name=Terminal
      npx nuxi@latest init my-app
      cd my-app
      ```

      ### Add Master CSS
      Run the installer in static mode from the Nuxt project root. Static mode scans complete class strings and emits generated CSS at build time.

      ```bash name=Terminal
      npm create @master/css@rc -- --framework nuxt --mode static --yes
      ```

      ### Launch server
      Run the development server.

      ```bash name=Terminal&action=run
      dev
      ```

    ### Start using Master CSS
    Now style your first component using Master CSS syntax.

```vue name=app.vue
<template>
  <h1 class="m:2xl italic font:5xl font:heavy text:neutral">
    Hello World
  </h1>
</template>
```

---

# Set up Master CSS in PHP

Source: https://rc.css.master.co/en/guide/installation/php

Summary: Guide to setting up Master CSS in plain PHP or CodeIgniter projects.

Use Vite runtime rendering when PHP renders pages directly from templates. PHP serves the page, while the Vite-built Master CSS runtime generates class rules in the browser as templates render.

      ### Open your project
      Start from the PHP or CodeIgniter project root.

      ```bash name=Terminal
      cd my-php-app
      npm init -y
      ```

      ### Install Vite and Master CSS
      Install Vite and the Master CSS Vite integration.

      ```bash name=Terminal
      npm install -D vite @master/css.vite@rc
      ```

      ### Configure Vite
      Build the runtime entry and base stylesheet into `public/assets`.

      ```ts name=vite.config.ts
      import { defineConfig } from 'vite'
      import masterCSS from '@master/css.vite'

      export default defineConfig({
        plugins: [
          masterCSS({ mode: 'runtime', injectRuntime: false })
        ],
        build: {
          outDir: 'public/assets',
          emptyOutDir: true,
          rollupOptions: {
            input: 'resources/main.ts',
            output: {
              entryFileNames: 'app.js',
              assetFileNames: 'app[extname]'
            }
          }
        }
      })
      ```

      ### Create the asset entry
      Import the Vite-managed runtime and the Master CSS stylesheet.

      ```ts name=resources/main.ts
      import '@master/css.vite/runtime'
      import './app.css'
      ```

      ```css name=resources/app.css
      @import "@master/css";
      ```

      ### Add build scripts
      Build the frontend assets before deploying, or keep Vite watching in development.

      ```json name=package.json
      {
        "scripts": {
          "build:assets": "vite build",
          "watch:assets": "vite build --watch"
        }
      }
      ```

    ### Hello world
    Load the Vite output and style your first PHP template.

```html name=public/index.php
<html lang="en" hidden>
<head>
  <link rel="stylesheet" href="/assets/app.css">
</head>
<body>
  <h1 class="m:2xl italic font:5xl font:heavy text:neutral">
    Hello World
  </h1>
  <script type="module" src="/assets/app.js"></script>
</body>
</html>
```

For CodeIgniter, load `/assets/app.css` and `/assets/app.js` with your normal asset helper. Use [PHP static rendering](/guide/installation/php/static-rendering) when complete PHP template class strings should be compiled into a CSS asset.

---

# Static Rendering in PHP

Source: https://rc.css.master.co/en/guide/installation/php/static-rendering

Summary: Guide to setting up Master CSS static rendering in plain PHP or CodeIgniter projects.

Use static rendering when PHP templates contain complete class strings and you want Vite to build a generated CSS asset before PHP serves the page.

      ### Open your project
      Start from the PHP or CodeIgniter project root.

      ```bash name=Terminal
      cd my-php-app
      npm init -y
      ```

      ### Install Vite and Master CSS
      Install Vite and the Master CSS Vite integration.

      ```bash name=Terminal
      npm install -D vite @master/css.vite@rc
      ```

      ### Configure Vite
      Build static CSS into `public/assets`.

      ```ts name=vite.config.ts
      import { defineConfig } from 'vite'
      import masterCSS from '@master/css.vite'

      export default defineConfig({
        plugins: [
          masterCSS({ mode: 'static' })
        ],
        build: {
          outDir: 'public/assets',
          emptyOutDir: true,
          rollupOptions: {
            input: 'resources/main.ts',
            output: {
              entryFileNames: 'app.js',
              assetFileNames: 'app[extname]'
            }
          }
        }
      })
      ```

      ### Create the asset entry
      Import Master CSS and scan PHP files where complete class strings are written.

      ```ts name=resources/main.ts
      import './app.css'
      ```

      ```css name=resources/app.css
      @import "@master/css";

      @source "../app/**/*.php";
      @source "../public/**/*.php";
      ```

    ### Hello world
    Load the generated CSS and style your first PHP template.

```html name=public/index.php
<link rel="stylesheet" href="/assets/app.css">

<h1 class="m:2xl italic font:5xl font:heavy text:neutral">
  Hello World
</h1>
```

For CodeIgniter, scan `app/Views/**/*.php` and load `/assets/app.css` with your normal asset helper. Static rendering depends on complete class strings in scanned source files.

---

# Set up Master CSS in Rails

Source: https://rc.css.master.co/en/guide/installation/rails

Summary: Guide to setting up Master CSS in Ruby on Rails views.

Use Vite runtime rendering when Rails owns the page lifecycle. Rails renders ERB views, while the Vite-built Master CSS runtime generates class rules in the browser as pages and Turbo updates appear.

      ### Create a project
      If you do not have a Rails project, create one first.

      ```bash name=Terminal
      rails new my-app
      cd my-app
      npm init -y
      ```

      ### Install Vite and Master CSS
      Install Vite and the Master CSS Vite integration in the Rails project root.

      ```bash name=Terminal
      npm install -D vite @master/css.vite@rc
      ```

      ### Configure Vite
      Build the runtime entry and base stylesheet into `public/assets`.

      ```ts name=vite.config.ts
      import { defineConfig } from 'vite'
      import masterCSS from '@master/css.vite'

      export default defineConfig({
        plugins: [
          masterCSS({ mode: 'runtime', injectRuntime: false })
        ],
        build: {
          outDir: 'public/assets',
          emptyOutDir: true,
          rollupOptions: {
            input: 'app/frontend/main.ts',
            output: {
              entryFileNames: 'app.js',
              assetFileNames: 'app[extname]'
            }
          }
        }
      })
      ```

      ### Create the asset entry
      Import the Vite-managed runtime and the Master CSS stylesheet.

      ```ts name=app/frontend/main.ts
      import '@master/css.vite/runtime'
      import './app.css'
      ```

      ```css name=app/frontend/app.css
      @import "@master/css";
      ```

      ### Load the assets
      Reference the Vite output from the Rails application layout. Add `hidden` so the runtime can avoid a flash of unstyled content before it injects class rules.

      ```erb name=app/views/layouts/application.html.erb
      <html lang="en" hidden>
      <head>
        <%= stylesheet_link_tag "/assets/app.css" %>
      </head>
      <body>
        <%= yield %>
        <%= javascript_include_tag "/assets/app.js", type: "module" %>
      </body>
      </html>
      ```

      ### Add build scripts
      Build or watch the frontend assets beside the Rails server.

      ```json name=package.json
      {
        "scripts": {
          "build:assets": "vite build",
          "watch:assets": "vite build --watch"
        }
      }
      ```

    ### Hello world
    Now style your first ERB view using Master CSS syntax.

```html name=app/views/home/index.html.erb
<h1 class="m:2xl italic font:5xl font:heavy text:neutral">
  Hello World
</h1>
```

Use [Rails static rendering](/guide/installation/rails/static-rendering) when ERB class strings are complete at build time and you want a generated CSS asset.

---

# Static Rendering in Rails

Source: https://rc.css.master.co/en/guide/installation/rails/static-rendering

Summary: Guide to setting up Master CSS static rendering in Ruby on Rails views.

Use static rendering when Rails ERB views contain complete class strings and you want Vite to build a generated CSS asset before Rails serves the page.

      ### Create a project
      If you do not have a Rails project, create one first.

      ```bash name=Terminal
      rails new my-app
      cd my-app
      npm init -y
      ```

      ### Install Vite and Master CSS
      Install Vite and the Master CSS Vite integration in the Rails project root.

      ```bash name=Terminal
      npm install -D vite @master/css.vite@rc
      ```

      ### Configure Vite
      Build static CSS into `public/assets`.

      ```ts name=vite.config.ts
      import { defineConfig } from 'vite'
      import masterCSS from '@master/css.vite'

      export default defineConfig({
        plugins: [
          masterCSS({ mode: 'static' })
        ],
        build: {
          outDir: 'public/assets',
          emptyOutDir: true,
          rollupOptions: {
            input: 'app/frontend/main.ts',
            output: {
              entryFileNames: 'app.js',
              assetFileNames: 'app[extname]'
            }
          }
        }
      })
      ```

      ### Create the asset entry
      Import Master CSS and scan ERB views where classes are authored.

      ```ts name=app/frontend/main.ts
      import './app.css'
      ```

      ```css name=app/frontend/app.css
      @import "@master/css";

      @source "../views/**/*.erb";
      ```

      ### Load the stylesheet
      Reference the generated stylesheet from the application layout.

      ```erb name=app/views/layouts/application.html.erb
      <%= stylesheet_link_tag "/assets/app.css", "data-turbo-track": "reload" %>
      ```

    ### Hello world
    Now style your first ERB view using Master CSS syntax.

```html name=app/views/home/index.html.erb
<h1 class="m:2xl italic font:5xl font:heavy text:neutral">
  Hello World
</h1>
```

Static rendering depends on complete class strings in scanned source files. If an ERB view assembles class names from fragments, map states to complete class strings or add bounded candidates with [`@safelist`](/guide/directives#safelist).

---

# Set up Master CSS in React

Source: https://rc.css.master.co/en/guide/installation/react

Summary: Guide to setting up Master CSS in your React project.

### Create a project
      If you don't have a React project, create one first.

      ```bash name=Terminal
      npm create vite@latest my-app -- --template react-ts
      cd my-app
      ```

      ### Add Master CSS
      Run the installer from the React project root.

      ```bash name=Terminal
      npm create @master/css@rc -- --framework react --yes
      ```

      ### Start dev server
      Run the command to start the Vite dev server.

      ```bash name=Terminal&action=run
      dev
      ```

    ### Start using Master CSS
    Now style your first component using Master CSS syntax.

```tsx name=src/App.tsx
export default function App() {
  return (
    <h1 className="m:2xl italic font:5xl font:heavy text:neutral">
      Hello World
    </h1>
  )
}
```

---

A full-stack framework, such as [Next.js](/guide/installation/nextjs), is recommended for better application performance and experience.

---

# Set up Master CSS in React Router

Source: https://rc.css.master.co/en/guide/installation/react-router

Summary: Guide to setting up Master CSS in your React Router project.

### Create a project
      If you don't have a React Router framework project, create one first.

      ```bash name=Terminal
      npx create-react-router@latest my-app
      cd my-app
      ```

      ### Add Master CSS
      Run the installer from the React Router project root.

      ```bash name=Terminal
      npm create @master/css@rc -- --framework react-router --yes
      ```

      ### Start dev server
      Run the command to start the React Router dev server.

      ```bash name=Terminal&action=run
      dev
      ```

    ### Start using Master CSS
    Now style your first route module using Master CSS syntax.

```tsx name=app/routes/home.tsx
export default function Home() {
  return (
    <h1 className="m:2xl italic font:5xl font:heavy text:neutral">
      Hello World
    </h1>
  )
}
```

---

# Static Rendering in React Router

Source: https://rc.css.master.co/en/guide/installation/react-router/static-rendering

Summary: Guide to setting up Master CSS static rendering in your React Router project.

### Create a project
      If you don't have a React Router framework project, create one first.

      ```bash name=Terminal
      npx create-react-router@latest my-app
      cd my-app
      ```

      ### Add Master CSS
      Run the installer in static mode from the React Router project root. Static mode scans complete class strings and emits generated CSS at build time.

      ```bash name=Terminal
      npm create @master/css@rc -- --framework react-router --mode static --yes
      ```

      ### Start dev server
      Run the command to start the React Router dev server.

      ```bash name=Terminal&action=run
      dev
      ```

    ### Start using Master CSS
    Now style your first route module using Master CSS syntax.

```tsx name=app/routes/home.tsx
export default function Home() {
  return (
    <h1 className="m:2xl italic font:5xl font:heavy text:neutral">
      Hello World
    </h1>
  )
}
```

---

# Static Rendering in React

Source: https://rc.css.master.co/en/guide/installation/react/static-rendering

Summary: Guide to setting up Master CSS static rendering in your React project.

### Create a project
      If you don't have a React project, create one first.

      ```bash name=Terminal
      npm create vite@latest my-app -- --template react-ts
      cd my-app
      ```

      ### Add Master CSS
      Run the installer in static mode from the React project root. Static mode scans complete class strings and emits generated CSS at build time.

      ```bash name=Terminal
      npm create @master/css@rc -- --framework react --mode static --yes
      ```

      ### Start dev server
      Run the command to start the Vite dev server.

      ```bash name=Terminal&action=run
      dev
      ```

    ### Start using Master CSS
    Now style your first component using Master CSS syntax.

```tsx name=src/App.tsx
export default function App() {
  return (
    <h1 className="m:2xl italic font:5xl font:heavy text:neutral">
      Hello World
    </h1>
  )
}
```

---

# Set up Master CSS in Rsbuild

Source: https://rc.css.master.co/en/guide/installation/rsbuild

Summary: Guide to setting up Master CSS in your Rsbuild project.

### Create a project
      If you don't have an Rsbuild project, create one first.

      ```bash name=Terminal
      npm create rsbuild@latest my-app
      cd my-app
      ```

      ### Add Master CSS
      Run the installer from the Rsbuild project root.

      ```bash name=Terminal
      npm create @master/css@rc -- --framework rsbuild --yes
      ```

      ### Start dev server
      Run the command to start the Rsbuild dev server.

      ```bash name=Terminal&action=run
      dev
      ```

    ### Start using Master CSS
    Now style your first Rsbuild page using Master CSS syntax.

The installer uses Rsbuild's `tools.rspack` hook to register the Webpack-compatible plugin and creates `src/index.css` as the Master CSS entry.

```ts name=rsbuild.config.ts
import { defineConfig } from '@rsbuild/core'
import MasterCSSPlugin from '@master/css.webpack'

export default defineConfig({
  tools: {
    rspack(config) {
      config.plugins ||= []
      config.plugins.push(new MasterCSSPlugin())
      return config
    }
  }
})
```

```css name=src/index.css
@import '@master/css';
```

```tsx
export default function App() {
  return (
    <h1 className="m:2xl italic font:5xl font:heavy text:neutral">
      Hello World
    </h1>
  )
}
```

---

# Static Rendering in Rsbuild

Source: https://rc.css.master.co/en/guide/installation/rsbuild/static-rendering

Summary: Guide to setting up Master CSS static rendering in your Rsbuild project.

### Create a project
      If you don't have an Rsbuild project, create one first.

      ```bash name=Terminal
      npm create rsbuild@latest my-app
      cd my-app
      ```

      ### Add Master CSS
      Run the installer in static mode from the Rsbuild project root. Static mode scans complete class strings and emits generated CSS at build time.

      ```bash name=Terminal
      npm create @master/css@rc -- --framework rsbuild --mode static --yes
      ```

      ### Start dev server
      Run the command to start the Rsbuild dev server.

      ```bash name=Terminal&action=run
      dev
      ```

    ### Start using Master CSS
    Now style your first Rsbuild page using Master CSS syntax.

The installer uses Rsbuild's `tools.rspack` hook to register the Webpack-compatible plugin and creates `src/index.css` as the Master CSS entry.

```ts name=rsbuild.config.ts
import { defineConfig } from '@rsbuild/core'
import MasterCSSPlugin from '@master/css.webpack'

export default defineConfig({
  tools: {
    rspack(config) {
      config.plugins ||= []
      config.plugins.push(new MasterCSSPlugin({ mode: 'static' }))
      return config
    }
  }
})
```

```css name=src/index.css
@import '@master/css';
```

```tsx
export default function App() {
  return (
    <h1 className="m:2xl italic font:5xl font:heavy text:neutral">
      Hello World
    </h1>
  )
}
```

---

# Set up Master CSS in Rspack

Source: https://rc.css.master.co/en/guide/installation/rspack

Summary: Guide to setting up Master CSS in your Rspack project.

### Create a project
      If you don't have a Rspack project, create one first.

      ```bash name=Terminal
      npm create rspack@latest my-app
      cd my-app
      ```

      ### Add Master CSS
      Run the installer from the Rspack project root.

      ```bash name=Terminal
      npm create @master/css@rc -- --framework rspack --yes
      ```

      ### Start dev server
      Run the command to start the Rspack dev server.

      ```bash name=Terminal&action=run
      dev
      ```

    ### Start using Master CSS
    Now style your first Rspack page using Master CSS syntax.

The installer registers the Webpack-compatible plugin in `rspack.config.*` and creates `src/index.css` as the Master CSS entry.

```js name=rspack.config.mjs
import MasterCSSPlugin from '@master/css.webpack'

export default {
  module: {
    rules: [
      {
        test: /\.css$/i,
        type: 'css/auto'
      }
    ]
  },
  plugins: [
    new MasterCSSPlugin()
  ]
}
```

```css name=src/index.css
@import '@master/css';
```

```html
<h1 class="m:2xl italic font:5xl font:heavy text:neutral">
  Hello World
</h1>
```

---

# Static Rendering in Rspack

Source: https://rc.css.master.co/en/guide/installation/rspack/static-rendering

Summary: Guide to setting up Master CSS static rendering in your Rspack project.

### Create a project
      If you don't have a Rspack project, create one first.

      ```bash name=Terminal
      npm create rspack@latest my-app
      cd my-app
      ```

      ### Add Master CSS
      Run the installer in static mode from the Rspack project root. Static mode scans complete class strings and emits generated CSS at build time.

      ```bash name=Terminal
      npm create @master/css@rc -- --framework rspack --mode static --yes
      ```

      ### Start dev server
      Run the command to start the Rspack dev server.

      ```bash name=Terminal&action=run
      dev
      ```

    ### Start using Master CSS
    Now style your first Rspack page using Master CSS syntax.

The installer registers the Webpack-compatible plugin in `rspack.config.*` and creates `src/index.css` as the Master CSS entry.

```js name=rspack.config.mjs
import MasterCSSPlugin from '@master/css.webpack'

export default {
  module: {
    rules: [
      {
        test: /\.css$/i,
        type: 'css/auto'
      }
    ]
  },
  plugins: [
    new MasterCSSPlugin({ mode: 'static' })
  ]
}
```

```css name=src/index.css
@import '@master/css';
```

```html
<h1 class="m:2xl italic font:5xl font:heavy text:neutral">
  Hello World
</h1>
```

---

# Set up Master CSS in Shopify

Source: https://rc.css.master.co/en/guide/installation/shopify

Summary: Guide to setting up Master CSS in Shopify Liquid themes.

Use Vite static rendering to build a CSS asset for Shopify Liquid themes. Shopify still serves the theme; Vite only turns complete class strings from Liquid templates into `assets/master.css`.

      ### Open your theme
      Start from a local Shopify theme directory.

      ```bash name=Terminal
      cd my-shopify-theme
      npm init -y
      ```

      ### Install Vite and Master CSS
      Install Vite and the Master CSS Vite integration.

      ```bash name=Terminal
      npm install -D vite @master/css.vite@rc
      ```

      ### Configure Vite
      Emit the compiled CSS into Shopify's `assets` directory.

      ```ts name=vite.config.ts
      import { defineConfig } from 'vite'
      import masterCSS from '@master/css.vite'

      export default defineConfig({
        plugins: [
          masterCSS({ mode: 'static' })
        ],
        build: {
          outDir: '.',
          emptyOutDir: false,
          rollupOptions: {
            input: 'src/master.ts',
            output: {
              entryFileNames: 'assets/master.js',
              assetFileNames: 'assets/[name][extname]'
            }
          }
        }
      })
      ```

      ### Create the asset entry
      Import Master CSS and scan Liquid theme files explicitly.

      ```ts name=src/master.ts
      import './master.css'
      ```

      ```css name=src/master.css
      @import "@master/css";

      @source "../layout/**/*.liquid";
      @source "../sections/**/*.liquid";
      @source "../snippets/**/*.liquid";
      @source "../templates/**/*.liquid";
      @source "../templates/**/*.json";
      ```

      ### Load the asset
      Reference the generated stylesheet from the theme layout.

      ```liquid name=layout/theme.liquid
      {{ 'master.css' | asset_url | stylesheet_tag }}
      ```

    ### Hello world
    Now style your first Liquid template using Master CSS syntax.

```html name=sections/main-page.liquid
<h1 class="m:2xl italic font:5xl font:heavy text:neutral">
  Hello World
</h1>
```

Run `vite build --watch` beside `shopify theme dev` while editing. If your theme has no asset build at all, use the [CLI guide](/guide/installation/cli) with the same Liquid globs and output to `assets/master.css`.

---

# Set up Master CSS in Storybook

Source: https://rc.css.master.co/en/guide/installation/storybook

Summary: Guide to setting up Master CSS in your Storybook project.

## Storybook setup

Install Storybook in the application that already uses Master CSS.

```bash name=Terminal
npm create storybook@latest
```

When Storybook uses the app's Vite configuration, keep Master CSS registered in `vite.config.ts` and import the app stylesheet from the Storybook preview.

```ts name=.storybook/preview.ts
import type { Preview } from '@storybook/react-vite'

import '../src/index.css'

const preview: Preview = {
  parameters: {},
}

export default preview
```

If Storybook does not load the app's Vite configuration, register Master CSS in `viteFinal`.

```ts name=.storybook/main.ts
import type { StorybookConfig } from '@storybook/react-vite'

const config: StorybookConfig = {
  framework: '@storybook/react-vite',
  async viteFinal(config) {
    const { mergeConfig } = await import('vite')
    const { default: masterCSS } = await import('@master/css.vite')

    return mergeConfig(config, {
      plugins: [
        masterCSS()
      ]
    })
  }
}

export default config
```

Use the matching Storybook framework package for Vue, Svelte, Angular, or Web Components projects, and keep the stylesheet import pointed at the CSS entry used by your app.

---

# Set up Master CSS in Svelte

Source: https://rc.css.master.co/en/guide/installation/svelte

Summary: Guide to setting up Master CSS in your Svelte project.

### Create a project
      If you don't have a Svelte project, create one first. It's recommended to refer to [Svelte Kit](https://kit.svelte.dev/).

      ```bash name=Terminal
      npm create svelte@latest my-app
      cd my-app
      npm install
      ```

      ### Add Master CSS
      Run the Svelte CLI add-on from the SvelteKit project root.

      ```bash name=Terminal
      npx sv add @master/css-sv
      ```

      ### Launch server
      Run `npm run dev -- --open` to start your Svelte development server

      ```bash name=Terminal
      npm run dev -- --open
      ```

    ### Start using Master CSS
    Now style your first element using Master CSS syntax!

```svelte name=src/routes/%2Bpage.svelte
<h1 class="m:2xl italic font:5xl font:heavy text:neutral">
  Hello World
</h1>
```

---

# Set up Master CSS in TanStack Start

Source: https://rc.css.master.co/en/guide/installation/tanstack-start

Summary: Guide to setting up Master CSS in your TanStack Start project.

TanStack Start supports Vite and Rsbuild. This guide uses the Vite setup path.

      ### Create a project
      If you don't have a TanStack Start project, create one first.

      ```bash name=Terminal
      npx @tanstack/cli@latest create
      cd my-app
      ```

      ### Add Master CSS
      Run the installer from the TanStack Start project root. The default TanStack Start setup uses runtime rendering.

      ```bash name=Terminal
      npm create @master/css@rc -- --framework tanstack-start --yes
      ```

      ### Start dev server
      Run the command to start the TanStack Start dev server.

      ```bash name=Terminal&action=run
      dev
      ```

    ### Start using Master CSS
    Now style your first route using Master CSS syntax.

The installer registers `@master/css.vite` in runtime mode, creates `src/styles/app.css`, and imports it from `src/routes/__root.tsx`.

```tsx name=src/routes/index.tsx
import { createFileRoute } from '@tanstack/react-router'

export const Route = createFileRoute('/')({
  component: Home
})

function Home() {
  return (
    <h1 className="m:2xl italic font:5xl font:heavy text:neutral">
      Hello World
    </h1>
  )
}
```

---

# Static Rendering in TanStack Start

Source: https://rc.css.master.co/en/guide/installation/tanstack-start/static-rendering

Summary: Guide to setting up Master CSS static rendering in your TanStack Start project.

TanStack Start supports Vite and Rsbuild. This guide uses the Vite setup path.

      ### Create a project
      If you don't have a TanStack Start project, create one first.

      ```bash name=Terminal
      npx @tanstack/cli@latest create
      cd my-app
      ```

      ### Add Master CSS
      Run the installer in static mode from the TanStack Start project root. Static mode scans complete class strings and emits generated CSS at build time.

      ```bash name=Terminal
      npm create @master/css@rc -- --framework tanstack-start --mode static --yes
      ```

      ### Start dev server
      Run the command to start the TanStack Start dev server.

      ```bash name=Terminal&action=run
      dev
      ```

    ### Start using Master CSS
    Now style your first route using Master CSS syntax.

The installer registers `@master/css.vite` in static mode, creates `src/styles/app.css`, and imports it from `src/routes/__root.tsx`.

```tsx name=src/routes/index.tsx
import { createFileRoute } from '@tanstack/react-router'

export const Route = createFileRoute('/')({
  component: Home
})

function Home() {
  return (
    <h1 className="m:2xl italic font:5xl font:heavy text:neutral">
      Hello World
    </h1>
  )
}
```

---

# Set up Master CSS in Vite

Source: https://rc.css.master.co/en/guide/installation/vite

Summary: Guide to setting up Master CSS in your Vite project.

### Create a Vite project
      If you don't have a Vite project, create one first.

      ```bash name=Terminal
      npm create vite@latest my-app
      cd my-app
      ```

      ### Add Master CSS
      Run the installer from the Vite project root.

      ```bash name=Terminal
      npm create @master/css@rc -- --yes
      ```

      ### Start dev server
      Run the command to start the Vite dev server.

      ```bash name=Terminal&action=run
      dev
      ```

    ### Start using Master CSS
    Now style your first element using Master CSS syntax.

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

---

# Static Rendering in Vite

Source: https://rc.css.master.co/en/guide/installation/vite/static-rendering

Summary: Guide to setting up Master CSS static rendering in your Vite project.

### Create a Vite project
      If you don't have a Vite project, create one first.

      ```bash name=Terminal
      npm create vite@latest my-app
      cd my-app
      ```

      ### Add Master CSS
      Run the installer in static mode from the Vite project root. Static mode scans complete class strings and emits generated CSS at build time.

      ```bash name=Terminal
      npm create @master/css@rc -- --framework vite --mode static --yes
      ```

      ### Start dev server
      Run the command to start the Vite dev server.

      ```bash name=Terminal&action=run
      dev
      ```

    ### Start using Master CSS
    Now style your first element using Master CSS syntax.

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

---

# Set up Master CSS in Visual Studio Code

Source: https://rc.css.master.co/en/guide/installation/vscode

Summary: Install the Master CSS extension, enable language-service features, and configure ESLint diagnostics and sort-on-save in Visual Studio Code.

The full Master CSS experience in Visual Studio Code uses two extensions together: the Master CSS extension for completion, hover, color tools, highlighting, directive diagnostics, manifest diagnostics, and directive formatting; and the ESLint extension for class policy diagnostics and sort-on-save.

      ### Install the Master CSS extension
      Install the official [Master CSS extension](https://marketplace.visualstudio.com/items?itemName=masterco.master-css) from the Visual Studio Marketplace.

        <span>Install to Visual Studio Code</span>

      ### Enable suggestions in strings
      Enable quick suggestions inside strings so Master CSS completions appear in markup, JSX, template strings, and helper calls.

      ```json name=.vscode/settings.json
      {
        "editor.quickSuggestions": {
          "strings": true
        }
      }
      ```

      ### Use a project-aware entry
      Make sure the project has a CSS entry that imports `@master/css`, or declares a Master CSS package dependency in `package.json`. This lets the language service load project variables, components, utilities, and modes.

      ```css name=index.css
      @import '@master/css';

      @theme {
        --color-primary: #4f46e5;
      }

      @components {
        btn {
          @compose inline-flex items-center gap:xs px:md py:xs r:md fg:primary;
        }
      }
      ```

      ### Install the ESLint extension
      Install the [ESLint extension](https://marketplace.visualstudio.com/items?itemName=dbaeumer.vscode-eslint) for class policy diagnostics and sort-on-save for committed class strings. The Master CSS extension does not duplicate these ESLint policy warnings by default.

        <span>Install to Visual Studio Code</span>

      ### Set up project linting
      Add Master CSS linting to the project's ESLint flat config. Use the setup step in the matching framework installation guide, or add the recommended config directly when the project already has parser support.

      ```js name=eslint.config.js
      import { defineConfig } from 'eslint/config'
      import css from '@master/eslint-config-css'

      export default defineConfig([
        ...css
      ])
      ```

      ### Enable sort on save
      Add `@master/css/sort-classes` to `eslint.codeActionsOnSave.rules` so Visual Studio Code applies the class sorting fix when the ESLint extension runs on save.

      ```json name=.vscode/settings.json
      {
        "editor.quickSuggestions": {
          "strings": true
        },
        "eslint.codeActionsOnSave.rules": [
          "@master/css/sort-classes"
        ]
      }
      ```

---

For editor intelligence details, see [Language Service](/guide/language-service). For rule behavior, options, and team policy examples, see [Code linting](/guide/code-linting).

---

# Set up Master CSS in Vue.js

Source: https://rc.css.master.co/en/guide/installation/vuejs

Summary: Guide to setting up Master CSS in your Vue.js project.

### Create a project
      If you don't have a Vue.js project, create one first.

      ```bash name=Terminal
      npm create vue@latest my-app
      cd my-app
      ```

      ### Add Master CSS
      Run the installer from the Vue.js project root.

      ```bash name=Terminal
      npm create @master/css@rc -- --framework vue --yes
      ```

      ### Start dev server
      Run the command to start the Vite dev server.

      ```bash name=Terminal&action=run
      dev
      ```

    ### Start using Master CSS
    Now style your first Vue.js component using Master CSS syntax.

```vue name=src/App.vue
<template>
  <h1 class="m:2xl italic font:5xl font:heavy text:neutral">
    Hello World
  </h1>
</template>
```

---

# Static Rendering in Vue.js

Source: https://rc.css.master.co/en/guide/installation/vuejs/static-rendering

Summary: Guide to setting up Master CSS static rendering in your Vue.js project.

### Create a project
      If you don't have a Vue.js project, create one first.

      ```bash name=Terminal
      npm create vue@latest my-app
      cd my-app
      ```

      ### Add Master CSS
      Run the installer in static mode from the Vue.js project root. Static mode scans complete class strings and emits generated CSS at build time.

      ```bash name=Terminal
      npm create @master/css@rc -- --framework vue --mode static --yes
      ```

      ### Start dev server
      Run the command to start the Vite dev server.

      ```bash name=Terminal&action=run
      dev
      ```

    ### Start using Master CSS
    Now style your first Vue.js component using Master CSS syntax.

```vue name=src/App.vue
<template>
  <h1 class="m:2xl italic font:5xl font:heavy text:neutral">
    Hello World
  </h1>
</template>
```

---

# Set up Master CSS in Webpack

Source: https://rc.css.master.co/en/guide/installation/webpack

Summary: Guide to setting up Master CSS in your Webpack project.

### Create a project
      If you don't have a Webpack project, create one first.

      ```bash name=Terminal
      mkdir my-app
      cd my-app
      npm init -y
      npm install -D webpack webpack-cli webpack-dev-server
      ```

      ### Add Master CSS
      Run the installer from the Webpack project root. The default Webpack setup uses runtime rendering, registers the Webpack plugin, and creates the Master CSS entry stylesheet.

      ```bash name=Terminal
      npm create @master/css@rc -- --framework webpack --yes
      ```

      ### Launch server
      Run your Webpack development command.

      ```bash name=Terminal
      npm run dev
      ```

    ### Hello world
    Now style your first element using Master CSS syntax.

The installer registers the Webpack plugin in `webpack.config.*` and creates `src/index.css` as the Master CSS entry.

```js name=webpack.config.mjs
import MasterCSSPlugin from '@master/css.webpack'

export default {
  plugins: [
    new MasterCSSPlugin()
  ]
}
```

```css name=src/index.css
@import '@master/css';
```

```html
<h1 class="m:2xl italic font:5xl font:heavy text:neutral">
  Hello World
</h1>
```

---

# Static Rendering in Webpack

Source: https://rc.css.master.co/en/guide/installation/webpack/static-rendering

Summary: Guide to setting up Master CSS static rendering in your Webpack project.

### Create a project
      If you don't have a Webpack project, create one first.

      ```bash name=Terminal
      mkdir my-app
      cd my-app
      npm init -y
      npm install -D webpack webpack-cli webpack-dev-server
      ```

      ### Add Master CSS
      Run the installer in static mode from the Webpack project root. It registers the Webpack plugin and creates the Master CSS entry stylesheet.

      ```bash name=Terminal
      npm create @master/css@rc -- --framework webpack --mode static --yes
      ```

      ### Launch server
      Run your Webpack development command.

      ```bash name=Terminal
      npm run dev
      ```

    ### Hello world
    Now style your first element using Master CSS syntax.

The installer registers the Webpack plugin in `webpack.config.*` and creates `src/index.css` as the Master CSS entry.

```js name=webpack.config.mjs
import MasterCSSPlugin from '@master/css.webpack'

export default {
  plugins: [
    new MasterCSSPlugin({ mode: 'static' })
  ]
}
```

```css name=src/index.css
@import '@master/css';
```

```html
<h1 class="m:2xl italic font:5xl font:heavy text:neutral">
  Hello World
</h1>
```

---

# Set up Master CSS in WordPress

Source: https://rc.css.master.co/en/guide/installation/wordpress

Summary: Guide to setting up Master CSS in your WordPress theme.

Use Vite runtime rendering when WordPress owns the PHP template lifecycle. WordPress renders the theme, while the Vite-built Master CSS runtime generates class rules in the browser for theme and plugin output.

      ### Open your theme
      Start from a theme directory inside your WordPress installation.

      ```bash name=Terminal
      cd wp-content/themes/my-theme
      npm init -y
      ```

      ### Install Vite and Master CSS
      Install Vite and the Master CSS Vite integration in the theme.

      ```bash name=Terminal
      npm install -D vite @master/css.vite@rc
      ```

      ### Configure Vite
      Build the runtime entry and base stylesheet into the theme `assets` directory.

      ```ts name=vite.config.ts
      import { defineConfig } from 'vite'
      import masterCSS from '@master/css.vite'

      export default defineConfig({
        plugins: [
          masterCSS({ mode: 'runtime', injectRuntime: false })
        ],
        build: {
          outDir: '.',
          emptyOutDir: false,
          rollupOptions: {
            input: 'resources/master.ts',
            output: {
              entryFileNames: 'assets/master.js',
              assetFileNames: 'assets/[name][extname]'
            }
          }
        }
      })
      ```

      ### Create the asset entry
      Import the Vite-managed runtime and the Master CSS stylesheet.

      ```ts name=resources/master.ts
      import '@master/css.vite/runtime'
      import './master.css'
      ```

      ```css name=resources/master.css
      @import "@master/css";
      ```

      ### Enqueue the assets
      Load the generated stylesheet and runtime script from `functions.php`.

      ```php name=functions.php
      add_action('wp_enqueue_scripts', function () {
        $theme_dir = get_template_directory();
        $theme_uri = get_template_directory_uri();

        wp_enqueue_style(
          'master-css',
          $theme_uri . '/assets/master.css',
          [],
          filemtime($theme_dir . '/assets/master.css')
        );

        wp_enqueue_script(
          'master-css-runtime',
          $theme_uri . '/assets/master.js',
          [],
          filemtime($theme_dir . '/assets/master.js'),
          true
        );
      });
      ```

      ### Prevent unstyled first paint
      Add `hidden` to the root document in the theme header so the runtime can reveal the page after it starts.

      ```php name=header.php
      <html <?php language_attributes(); ?> hidden>
      ```

    ### Hello world
    Now style your first PHP template using Master CSS syntax.

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

Use [WordPress static rendering](/guide/installation/wordpress/static-rendering) when theme template class strings are complete at build time and you want a generated CSS asset. For WooCommerce templates, include your theme overrides and avoid scanning plugin internals unless your theme stores complete class strings there.

---

# Static Rendering in WordPress

Source: https://rc.css.master.co/en/guide/installation/wordpress/static-rendering

Summary: Guide to setting up Master CSS static rendering in your WordPress theme.

Use static rendering when WordPress theme templates contain complete class strings and you want Vite to build a generated CSS asset before WordPress serves the page.

      ### Open your theme
      Start from a theme directory inside your WordPress installation.

      ```bash name=Terminal
      cd wp-content/themes/my-theme
      npm init -y
      ```

      ### Install Vite and Master CSS
      Install Vite and the Master CSS Vite integration in the theme.

      ```bash name=Terminal
      npm install -D vite @master/css.vite@rc
      ```

      ### Configure Vite
      Build static CSS into the theme `assets` directory.

      ```ts name=vite.config.ts
      import { defineConfig } from 'vite'
      import masterCSS from '@master/css.vite'

      export default defineConfig({
        plugins: [
          masterCSS({ mode: 'static' })
        ],
        build: {
          outDir: '.',
          emptyOutDir: false,
          rollupOptions: {
            input: 'resources/master.ts',
            output: {
              entryFileNames: 'assets/master.js',
              assetFileNames: 'assets/[name][extname]'
            }
          }
        }
      })
      ```

      ### Create the asset entry
      Import Master CSS and point the stylesheet at PHP templates in the theme.

      ```ts name=resources/master.ts
      import './master.css'
      ```

      ```css name=resources/master.css
      @import "@master/css";

      @source "../**/*.php";
      @source not "../vendor/**";
      @source not "../node_modules/**";
      ```

      ### Enqueue the stylesheet
      Load the generated stylesheet from `functions.php`.

      ```php name=functions.php
      add_action('wp_enqueue_scripts', function () {
        wp_enqueue_style(
          'master-css',
          get_template_directory_uri() . '/assets/master.css',
          [],
          filemtime(get_template_directory() . '/assets/master.css')
        );
      });
      ```

    ### Hello world
    Now style your first PHP template using Master CSS syntax.

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

Static rendering depends on complete class strings in scanned source files. For WooCommerce templates, include your theme overrides such as `@source "../woocommerce/**/*.php"` and avoid scanning plugin internals unless your theme stores complete class strings there.

---

# Introduction to Master CSS

Source: https://rc.css.master.co/en/guide/introduction

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

## Overview

Master CSS is a markup-driven CSS language and framework. This quick introduction shows the basic class syntax, the project CSS entry, the main delivery choices, and the next guides to read.

---

## What is Master CSS?
Master CSS lets you write styling decisions in markup using CSS-like class strings, then generates the CSS those classes need.

Use it when you want the style to stay close to the element while still keeping access to real CSS features such as tokens, selectors, media queries, cascade layers, and generated stylesheets.

Each class is a small styling instruction:

- `surface:raised` gives the example panel a shared surface treatment.
- `p:lg` applies padding from the spacing scale.
- `text:blue` uses a theme color.
- `bg:blue-70:hover` changes the button background on hover.

You do not need to learn every shorthand before starting. Use the classes that read clearly, then move deeper into the syntax guides when you need more control.

---

## Write your first class
Start with local styling in markup. This is enough for a first screen, prototype, or component draft:

```html
<section class="grid gap:md p:lg r:lg bg:blue-60 fg:white">
  <h2 class="m:0 font:2xl font:semibold">Dashboard</h2>
  <p class="m:0 fg:white/.8">A compact panel styled from its class list.</p>
</section>
```

Master CSS reads those class names, validates them against the active project vocabulary, and emits CSS for the classes that are actually used.

When a value or pattern becomes shared across the product, promote it later. Repeated values usually belong in [theme tokens](/guide/theme), and repeated product roles can become [component classes](/guide/global-styles#component-classes).

---

## Add states and conditions
A Master CSS class can carry the condition that controls when it applies.

```html
<!-- @MARK :hover --><!-- @MARK @md -->
<button class="px:md py:xs r:md bg:blue-60 fg:white bg:blue-70:hover grid-cols:2@md">
  Save
</button>
```

Read the suffixes after the declaration:

- `bg:blue-70:hover` changes the background on hover.
- `grid-cols:2@md` applies at the `md` breakpoint.

The same idea extends to responsive design, dark mode, print styles, container queries, feature queries, attributes, pseudo-classes, and custom variants. Learn the pieces in [Style Declarations](/guide/style-declarations), [State Selectors](/guide/state-selectors), and [Conditional Queries](/guide/conditional-queries).

---

## Add a project CSS entry
Most projects start by importing Master CSS from the stylesheet the app already loads:

```css name=app.css
@import "@master/css";
```

That stylesheet becomes the project CSS entry. It can later define shared styling vocabulary:

```css name=app.css
@import "@master/css";

@theme {
  --color-brand: #4f46e5;
  --spacing-card: 1.5rem;
}
```

```html
<article class="fg:white bg:brand p:card">
  ...
</article>
```

Keep this simple at first. Add tokens, component classes, custom utilities, and custom variants only when the project has a repeated decision worth naming.

---

## Choose how CSS is delivered
Master CSS uses the same class syntax across different delivery modes. Choose the mode that fits the app:

- Runtime rendering watches class names in the browser and generates CSS as elements appear or change.
- Static rendering scans source files during the build and emits CSS before deployment.
- Server or pre-rendered CSS generates CSS from rendered HTML.
- Progressive rendering sends first-page CSS early, then lets the runtime handle later dynamic classes.

You can start with the recommended setup for your framework, then revisit delivery once the project shape is clearer. See [Rendering Modes](/guide/rendering-modes) when you need to compare the tradeoffs.

---

## Keep going
If you are new to Master CSS, read these next:

1. [Installation](/guide/installation) to add Master CSS to a project.
2. [Style Declarations](/guide/style-declarations) to learn how class names map to CSS.
3. [State Selectors](/guide/state-selectors) and [Conditional Queries](/guide/conditional-queries) to control when styles apply.
4. [Theme Tokens](/guide/theme) when you need shared values, [Variables and Modes](/guide/variables-and-modes) when those values need modes, and [Global Styles](/guide/global-styles) when repeated roles become components or utilities.
5. [Rendering Modes](/guide/rendering-modes) when CSS delivery matters.
6. [Language Service](/guide/language-service), [Code Linting](/guide/code-linting), and [AI Coding](/guide/ai-coding) when you want editor help, team checks, or AI-assisted styling.

---

# Language Service for Master CSS

Source: https://rc.css.master.co/en/guide/language-service

Summary: Use manifest-aware editor intelligence for Master CSS classes, directives, project tokens, generated CSS previews, colors, and workspace-specific configuration.

## Overview
The Master CSS Language Service brings the project manifest into the editor. It reads the same variables, components, utilities, modes, selectors, and conditions that Master CSS uses to generate CSS, then uses that knowledge to make class strings easier to read and edit.

Use [Visual Studio Code setup](/guide/installation/vscode) to install the official extension. Use it with the VS Code ESLint extension when you need team rules, diagnostics for committed markup, and automated class sorting.

---

## Editor features
### Syntax suggestions
Completion works inside configured class sources, including markup attributes, bound framework attributes, JavaScript helper calls, tagged templates, and project-specific class declarations.

```html
<button class="inline-flex items-center gap:xs px:md py:xs r:md bg:blue-60 fg:white">
  Save
</button>
```

Suggestions include utilities, property values, color tokens, selectors, queries, groups, and directive syntax. They are manifest-aware, so project tokens become completion items after the language service finds the correct workspace manifest.

### Hover inspection
Hover inspection shows the generated CSS for a class at the cursor. This is useful when a class combines a declaration, value, selector state, and query in one compact string.

```html
<button class="fg:white bg:blue-60:hover@sm">
  Save
</button>
```

Hovering `bg:blue-60:hover@sm` previews the CSS that Master CSS would emit for the hover state at the `sm` breakpoint.

### Syntax highlighting
The extension highlights Master CSS directive syntax in CSS-family documents and uses semantic tokens for class-list spans. Embedded utilities can show their declaration, value, selector, query, unit, important marker, quoted segment, and component boundaries.

The default highlighting mode is active-context highlighting. It keeps long markup calm until the cursor enters a class string, then highlights the current class context.

### Color tools
Color syntax can use VS Code color decorators and the color picker. This includes supported Master CSS color utilities and manifest colors that resolve through the active project.

```html
<span class="bg:blue-60/.1 fg:#4f46e5">Primary</span>
```

### Directive formatting
Document and range formatting can repair Master CSS directive source without changing compiler semantics, cascade behavior, or generated CSS. It is enabled by default with `masterCSS.formatDirectives`.

The formatter supports CSS, SCSS, and LESS documents. It also scans CSS-family `<style>` blocks in Vue, Svelte, and Astro documents when the Master CSS formatter handles the request.

For class-list directives, formatting keeps important markers attached to the class token:

```css
.card {
  @compose bg:transparent !;
}
```

becomes:

```css
.card {
  @compose bg:transparent!;
}
```

### Diagnostics
The language server reports Master CSS directive errors in CSS, SCSS, LESS, and style blocks inside Vue, Svelte, and Astro files. It also reports project manifest loading errors so workspace setup issues are visible in the editor.

Class-string syntax, policy, and sort-on-save diagnostics in markup and JavaScript are owned by [code linting](/guide/code-linting). The language server does not duplicate `sort-classes`, `prefer-canonical-classes`, `no-conflicting-classes`, `no-invalid-classes`, or `no-unapproved-raw-values` warnings.

---

## Supported class sources
The default settings cover common web, framework, and content files: HTML, PHP, JavaScript, TypeScript, JSX, TSX, CSS, SCSS, LESS, Vue, Svelte, Rust, Astro, Markdown, and MDX.

| Setting | Default | Use |
| --- | --- | --- |
| `masterCSS.includedLanguages` | Common web and template language IDs | Languages that receive Master CSS language-service features. |
| `masterCSS.classAttributes` | `class`, `className` | Markup attributes whose quoted values contain class strings. |
| `masterCSS.classAttributeBindings` | Framework binding defaults | Bound attributes such as `:class`, `v-bind:class`, `[ngClass]`, and `class:list`. |
| `masterCSS.classFunctions` | `clsx`, `cva`, `ctl`, `cv`, `class`, `classnames`, `classVariant`, `styled`, `classList.*` | JavaScript callees whose string arguments contain class strings. |
| `masterCSS.classDeclarations` | `[]` | Project-specific variables or object properties whose strings should be treated as class declarations. |
| `masterCSS.exclude` | `.git`, `node_modules`, `.hg` | Files excluded from all Master CSS language-service features. |

Customize the source settings when a project uses its own class helpers or naming conventions:

```json name=.vscode/settings.json
{
  "masterCSS.classAttributes": [
    "class",
    "className",
    "ui"
  ],
  "masterCSS.classDeclarations": [
    "classes",
    "styles"
  ],
  "masterCSS.classFunctions": [
    "clsx",
    "cva",
    "cn"
  ]
}
```

---

## Workspace-aware manifests
The language server creates a root workspace, then `masterCSS.workspaces` controls whether additional project workspaces are detected.

With the default `auto` mode, it detects:

- CSS files importing `@master/css`
- CSS files containing the lightweight `@master entry;` marker
- `package.json` files that declare Master CSS package dependencies

Each detected workspace gets its own language service and manifest. In a monorepo, this keeps completions, hover previews, colors, directive diagnostics, and component names aligned with the nearest Master CSS project.

```json name=.vscode/settings.json
{
  "masterCSS.workspaces": [
    "apps/admin",
    "apps/shop",
    "packages/design-system"
  ]
}
```

Use explicit workspace globs when auto-detection does not match the repository layout. See [Monorepo](/guide/monorepo) for project-boundary guidance.

---

## Highlighting modes
Embedded syntax highlighting is controlled by `masterCSS.embeddedSyntaxHighlighting`.

| Mode | Behavior |
| --- | --- |
| `active` | Highlights the active class context at the editor selection. This is the default and keeps dense markup quieter. |
| `always` | Highlights every discovered embedded utility class in supported documents. |
| `off` | Disables embedded utility highlighting. Master CSS directive syntax in CSS documents remains highlighted by the extension grammar. |

```json name=.vscode/settings.json
{
  "masterCSS.embeddedSyntaxHighlighting": "active"
}
```

If semantic colors do not appear, confirm that semantic highlighting is enabled in the active VS Code theme.

---

## Settings
Set options in `.vscode/settings.json` or VS Code user settings with the `masterCSS.` prefix.

```json name=.vscode/settings.json
{
  "editor.quickSuggestions": {
    "strings": true
  },
  "masterCSS.suggestSyntax": true,
  "masterCSS.inspectSyntax": true,
  "masterCSS.renderSyntaxColors": true,
  "masterCSS.formatDirectives": true,
  "masterCSS.embeddedSyntaxHighlighting": "active"
}
```

| Setting | Default | Effect |
| --- | --- | --- |
| `masterCSS.suggestSyntax` | `true` | Enables Master CSS completion items. |
| `masterCSS.inspectSyntax` | `true` | Enables hover inspection and generated CSS previews. |
| `masterCSS.renderSyntaxColors` | `true` | Enables color information for supported Master CSS color syntax. |
| `masterCSS.formatDirectives` | `true` | Enables Master CSS directive formatting in CSS-family documents and style blocks. |
| `masterCSS.embeddedSyntaxHighlighting` | `active` | Controls semantic highlighting for embedded utility classes. |
| `masterCSS.workspaces` | `auto` | Controls workspace detection for project-aware manifests. |

Run `Master CSS: Restart Language Server` after dependency changes, major workspace-layout changes, or manifest edits if VS Code has not reloaded the language server automatically.

---

## Troubleshooting
| Symptom | Fix |
| --- | --- |
| Completions do not show inside strings. | Enable `editor.quickSuggestions.strings`. |
| Project variables, components, or utilities are missing. | Add a CSS entry that imports `@master/css`, or declare a Master CSS package dependency, then restart the language server. |
| The wrong monorepo package is used. | Set `masterCSS.workspaces` to explicit workspace directories. |
| Embedded highlighting is too noisy or too quiet. | Change `masterCSS.embeddedSyntaxHighlighting` to `active`, `always`, or `off`. |
| Color decorators do not appear. | Keep `masterCSS.renderSyntaxColors` enabled and confirm the editor theme supports semantic highlighting. |

---

## Setup links
- [Visual Studio Code setup](/guide/installation/vscode) for extension installation, string completions, project-aware entries, ESLint diagnostics, and sort-on-save.
- [Code linting](/guide/code-linting) for rule behavior, options, and team policy examples.
- [Monorepo](/guide/monorepo) for workspace boundaries across multiple projects.

---

# Layout System

Source: https://rc.css.master.co/en/guide/layout-system

Summary: Build responsive layout systems with containers, columns, gutters, breakpoints, container sizes, spacing tokens, CSS Grid, and Flexbox.

## Overview
CSS layout is built from native primitives. [CSS Grid](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_grid_layout) arranges content across two axes. [Flexbox](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_flexible_box_layout) distributes content along one axis. A layout system turns those primitives into repeatable decisions: page containers, column counts, gutters, outer margins, content regions, and responsive rules.

In Master CSS, those decisions stay close to the markup and share the same foundations as the rest of the interface:

* [Breakpoints](/guide/breakpoints) define when page-level layout changes.
* [Containers](/guide/containers) define component-level changes and shared width caps.
* [Spacing](/guide/spacing) defines gutters, margins, and section rhythm.
* [Sizing](/guide/sizing) defines wrappers, fixed regions, fluid regions, and constraints.
* Grid and Flex utilities express the actual composition.

(resize) Drag the edges to see the surface move from a compact stacked layout to an 8-column composition.

```html
<!-- @MARK max-w:3xl --><!-- @MARK grid-cols:4 --><!-- @MARK grid-cols:8@2xs --><!-- @MARK gap:md@2xs -->
<main class="w:full max-w:3xl mx:auto p:md">
  <section class="grid-cols:4 gap:sm grid-cols:8@2xs gap:md@2xs">
    <header class="grid-col-span:4 grid-col-span:8@2xs">...</header>
    <article class="grid-col-span:4 grid-col-span:4@2xs">...</article>
    <article class="grid-col-span:4 grid-col-span:5@2xs">...</article>
    <aside class="grid-col-span:4 grid-col-span:3@2xs">...</aside>
  </section>
</main>
```
---

## Define the system
A layout system should answer five questions before individual components start styling themselves.

| Decision | Master CSS foundation | Typical utilities |
| --- | --- | --- |
| Canvas width | Container sizes and sizing | `w:full`, `max-w:7xl`, `mx:auto` |
| Outer margin | Spacing | `px:md`, `px:xl@md` |
| Columns | Grid | `grid-cols:4`, `grid-cols:12@md` |
| Gutters | Spacing | `gap:md`, `gap-x:lg`, `gap-y:xl` |
| Region behavior | Grid, Flex, and queries | `grid-col-span:8@md`, `flex-row@2xs`, `@container(md)` |

These decisions are separate on purpose. A page can keep the same maximum width while changing column count. A component can keep the same columns while increasing its gutter. A reusable card can respond to its container instead of the viewport.

---

## Start with a page container
The container defines the live area for the layout. Use `w:full` so the wrapper can shrink, `max-w:*` so it aligns with the [container size scale](/guide/containers), `mx:auto` to center it, and horizontal padding from the [spacing scale](/guide/spacing) for the outer margin.

```html
<!-- @MARK w:full --><!-- @MARK max-w:7xl --><!-- @MARK mx:auto --><!-- @MARK px:md --><!-- @MARK px:xl@md -->
<main class="w:full max-w:7xl mx:auto px:md px:xl@md">
  ...
</main>
```
Use the wrapper for page-level alignment. Use inner grids for content relationships. This keeps outer margins, columns, and card padding from competing with each other.

(i) Use `container-*` values for layout wrappers that should follow the shared container scale. Use local `x`, `ch`, or `clamp()` values when the maximum width is based on content measure instead of the responsive scale.

---

## Build column grids
Column grids are most useful when several regions need to align across a page. A 4, 8, or 12 column structure is a practical default because it supports halves, thirds, quarters, and asymmetrical content regions without forcing narrow columns everywhere.

Use `grid-cols:<count>` to create equal-width columns. It also sets `display:grid`, so a separate `grid` class is not required for this pattern.

```html
<!-- @MARK grid-cols:4 --><!-- @MARK grid-cols:8@2xs --><!-- @MARK grid-cols:12@md --><!-- @MARK gap:lg -->
<section class="grid-cols:4 gap:lg grid-cols:8@2xs grid-cols:12@md">
  <article class="grid-col-span:4 grid-col-span:5@2xs grid-col-span:8@md">...</article>
  <aside class="grid-col-span:4 grid-col-span:3@2xs grid-col-span:4@md">...</aside>
</section>
```
Start with the smallest layout that works, then add breakpoint-specific column counts and spans only where the relationship changes. This keeps the markup readable and avoids maintaining unused breakpoints.

---

## Use gutters from spacing
Gutters are the spaces between columns and rows. They should come from spacing tokens so grid rhythm matches component padding, form spacing, and section separation.

Use `gap:*` when both axes share the same rhythm. Use `gap-x:*` and `gap-y:*` when horizontal gutters and vertical stacking need different values.

```html
<!-- @MARK gap:md --><!-- @MARK gap-x:lg@md --><!-- @MARK gap-y:xl@md -->
<section class="grid-cols:1 gap:md grid-cols:3@md gap-x:lg@md gap-y:xl@md">
  ...
</section>
```
(x) Do not use arbitrary gutters as the default language of a design system.

```html
<section class="grid-cols:3 gap:1.438rem">...</section>
```

(o) Use a shared spacing token, or add one when the product has a named gutter.

```html
<section class="grid-cols:3 gap:lg">...</section>
```

---

## Place regions intentionally
Grid placement should describe the region's role in the layout, not the visual size of an individual card. Use spans for common regions and line placement when the design needs a specific start or end.

| Goal | Utility |
| --- | --- |
| Span columns | `grid-col-span:<count>` |
| Place between lines | `grid-col:<start>/<end>` |
| Set explicit start | `grid-col-start:<line>` |
| Set explicit end | `grid-col-end:<line>` |
| Span rows | `grid-row-span:<count>` |
| Assign a named area | `grid-area:<name>` |

```html
<!-- @MARK grid-col-span:12 --><!-- @MARK grid-col:3/11@md --><!-- @MARK grid-row-span:2@md -->
<section class="grid-cols:12 gap:lg">
  <header class="grid-col-span:12">...</header>
  <article class="grid-col:3/11@md grid-row-span:2@md">...</article>
</section>
```
For regular content pages, spans are usually easier to maintain than exact line numbers. Use exact lines for editorial layouts, dashboards, and app shells where the page has a stable structural grid.

---

## Choose CSS Grid or Flexbox
Use Grid when the parent owns the columns, rows, or area placement. Use Flexbox when the content owns its natural size and the parent only needs to distribute, align, wrap, or switch direction.

| Use Grid for | Use Flexbox for |
| --- | --- |
| Page regions | Toolbars |
| Card galleries | Menus and tabs |
| Editorial spans | Media objects |
| Dashboards | Inline controls |
| Two-axis alignment | One-axis distribution |

      Flex media object

```html
<!-- @MARK container --><!-- @MARK w:full --><!-- @MARK flex --><!-- @MARK flex-col --><!-- @MARK flex-row@container(2xs) -->
<article class="flex container flex-col gap:md w:full flex-row@container(2xs)">
  <img class="w:full flex:0@container(2xs) w:36x@container(2xs)" alt="" />
  <div class="flex:1 min-w:0">...</div>
</article>
```
`min-w:0` is important for flexible text regions. It allows long content to shrink inside a flex or grid item instead of forcing the whole layout wider than the container.

---

## Use container queries for components
Viewport breakpoints are a good fit for page-level layout. Container queries are a better fit for reusable components because the same component can appear in a narrow sidebar, a modal, or a wide content column.

Add `container` to the component boundary, then use `@container(<size>)` on descendants.

```html
<section class="container">
  <!-- @MARK grid-cols:2@container(2xs) --><!-- @MARK gap:lg@container(2xs) -->
  <article class="grid-cols:1 gap:md grid-cols:2@container(2xs) gap:lg@container(2xs)">
    ...
  </article>
</section>
```
Use viewport breakpoints for global decisions such as page shell, navigation mode, and maximum canvas width. Use container queries for cards, forms, media objects, and reusable panels.

---

## Add explicit tracks only when needed
`grid-cols:*` is best for equal columns. Use `grid-template-columns:*` when the layout needs fixed, intrinsic, or mixed tracks.

```html
<!-- @MARK grid --><!-- @MARK grid-template-columns:18x|minmax(0,1fr) --><!-- @MARK gap:md -->
<section class="grid grid-template-columns:18x|minmax(0,1fr) gap:md">
  <nav>...</nav>
  <main class="min-w:0">...</main>
</section>
```
Use explicit tracks for app shells, data views, split panes, and content that has a real fixed region. For ordinary responsive content, equal columns plus spans are usually more flexible.

---

## Common patterns
### Page shell
```html
<!-- @MARK max-w:7xl --><!-- @MARK px:lg --><!-- @MARK px:2xl@lg -->
<main class="w:full max-w:7xl mx:auto px:lg px:2xl@lg">
  ...
</main>
```

### Content with sidebar
```html
<!-- @MARK grid-cols:12@md --><!-- @MARK grid-col-span:8@md --><!-- @MARK grid-col-span:4@md -->
<section class="grid-cols:1 gap:xl grid-cols:12@md">
  <article class="grid-col-span:8@md">...</article>
  <aside class="grid-col-span:4@md">...</aside>
</section>
```

### Responsive card gallery
```html
<!-- @MARK grid-cols:2@2xs --><!-- @MARK grid-cols:3@md --><!-- @MARK gap:lg -->
<section class="grid-cols:1 gap:lg grid-cols:2@2xs grid-cols:3@md">
  ...
</section>
```

### Wrapping toolbar
```html
<!-- @MARK flex --><!-- @MARK flex-wrap --><!-- @MARK gap:sm --><!-- @MARK items-center -->
<div class="flex flex-wrap items-center gap:sm">
  ...
</div>
```

### Media object
```html
<!-- @MARK flex-row@2xs --><!-- @MARK w:32x@2xs --><!-- @MARK min-w:0 -->
<article class="flex flex-col gap:md flex-row@2xs">
  <img class="w:full flex:0@2xs w:32x@2xs" alt="" />
  <div class="min-w:0">...</div>
</article>
```

---

## Common mistakes
### Changing columns without changing spans
(x) The grid becomes 12 columns, but each region still spans the mobile 4-column structure.

```html
<section class="grid-cols:4 gap:lg grid-cols:12@md">
  <article class="grid-col-span:4">...</article>
  <aside class="grid-col-span:4">...</aside>
</section>
```

(o) Update the spans at the same breakpoint as the column change.

```html
<section class="grid-cols:4 gap:lg grid-cols:12@md">
  <article class="grid-col-span:4 grid-col-span:8@md">...</article>
  <aside class="grid-col-span:4 grid-col-span:4@md">...</aside>
</section>
```

### Using viewport breakpoints inside every component
(x) The card changes based on the page viewport, even when it appears in a narrow parent.

```html
<article class="grid-cols:1 gap:lg grid-cols:2@md">...</article>
```

(o) Let the card respond to the space it actually receives.

```html
<section class="container">
  <article class="grid-cols:1 gap:lg grid-cols:2@container(2xs)">...</article>
</section>
```

### Treating CSS Grid and Flexbox as interchangeable
Use Grid when children need to share a column system. Use Flexbox when children need to wrap, align, or distribute along one axis. This distinction keeps page layout predictable and keeps components simple.

---

## Summary
Build layout systems from stable foundations:

* Use breakpoint tokens for viewport decisions and container tokens for wrapper decisions.
* Use spacing tokens for gutters, outer margins, and section rhythm.
* Use `grid-cols:*` and placement utilities for page regions and galleries.
* Use `flex`, direction, wrapping, and `flex:*` for one-axis component layout.
* Use container queries when a reusable component should adapt to its own available width.

The result is a layout language that is explicit in markup, token-aligned with the design system, and flexible enough for both page-level grids and component-level composition.

---

# MCP Server for Master CSS

Source: https://rc.css.master.co/en/guide/mcp-server

Summary: Connect AI clients to Master CSS project context, diagnostics, generated CSS previews, and safe write previews through the Model Context Protocol.

## Overview
The Master CSS MCP server gives AI clients a project-aware interface for Master CSS. It runs locally over stdio, reads the workspace you point it at, and exposes tools for setup audits, manifest inspection, directive inspection, class diagnostics, generated CSS previews, syntax suggestions, CSS output comparison, and safe fix previews.

Use it when an AI coding agent should reason from the same Master CSS setup as the project: the CSS entry manifest, theme tokens, component classes, scanner state, stylesheet entries, and lint policy. It is not a replacement for editor completions, ESLint, or CI commands. It is a tool surface for AI clients that speak the [Model Context Protocol](https://modelcontextprotocol.io/).

---

## Install and start
Install the package in the project or run it with `npx`. The server uses stdio, so it is usually started by an MCP client rather than by a long-running terminal session.

```bash name=Terminal
npx -y @master/css-mcp@rc --root /absolute/path/to/project
```

Use an absolute `--root` path so the server can resolve the intended workspace. When `--root` is omitted, the current working directory becomes the workspace root.

You can also set the preview confirmation token lifetime:

```bash name=Terminal
npx -y @master/css-mcp@rc --root /absolute/path/to/project --preview-ttl 300000
```

### Ask an agent to set it up
You can ask a local AI coding agent to register the MCP server for you. The agent should identify the MCP client first, then use that client's native setup path instead of assuming every client reads the same project config file.

```text name=prompt
Set up the Master CSS MCP server for this project.

Project root: /absolute/path/to/project
Package: @master/css-mcp@rc

First identify which MCP client is being configured. Use the client's native registration path:
- Codex App: use `codex mcp add`
- Claude Code: use `claude mcp add --transport stdio`
- Clients that accept `mcpServers` JSON: add the command/args shape to that client's config

Use this stdio command:
npx -y @master/css-mcp@rc --root /absolute/path/to/project

Do not assume a project `mcp.json` is read automatically by every client. Do not commit machine-specific absolute paths unless I explicitly ask for a project-scoped team config.

After setup, verify the server is registered, restart or open a new client session if needed, then call `mastercss_workspace_info` to confirm the MCP server is connected to the intended project root.
```

---

## Configure an MCP client
MCP clients that accept `mcpServers` JSON can use the same command you would run from the terminal. Treat this as a copyable config shape, not a universal project file that every client automatically reads. For example, Claude Desktop uses this shape in `claude_desktop_config.json` and requires a restart after config changes.

```json name=mcp-client-config.json
{
  "mcpServers": {
    "master-css": {
      "command": "npx",
      "args": ["-y", "@master/css-mcp@rc", "--root", "/absolute/path/to/project"]
    }
  }
}
```

### Use with Codex App
Codex App can register stdio MCP servers through the Codex CLI:

```bash name=Terminal
codex mcp add master-css -- npx -y @master/css-mcp@rc --root /absolute/path/to/project
```

This writes an equivalent entry to `~/.codex/config.toml`:

```toml name=~/.codex/config.toml
[mcp_servers.master-css]
command = "npx"
args = ["-y", "@master/css-mcp@rc", "--root", "/absolute/path/to/project"]
startup_timeout_sec = 120
```

Restart Codex App or open a new thread after changing MCP settings. Verify the server is registered with:

```bash name=Terminal
codex mcp list
codex mcp get master-css
```

If `codex mcp` cannot read the configuration, fix the local Codex config parse error first, then run the add command again.

### Use with Claude Code
Claude Code can register the same local stdio server through its MCP CLI:

```bash name=Terminal
claude mcp add --transport stdio master-css -- npx -y @master/css-mcp@rc --root /absolute/path/to/project
```

For a team-maintained project config, use project scope:

```bash name=Terminal
claude mcp add --transport stdio --scope project master-css -- npx -y @master/css-mcp@rc --root /absolute/path/to/project
```

Review the generated `.mcp.json` before committing it because absolute `--root` paths are machine-specific.

After connecting, ask the client to inspect the workspace before editing. Good first tasks include scanning the project, inspecting one class, linting changed files, and previewing fixes without applying them.

```text name=prompt
Use the Master CSS MCP server to inspect this workspace before editing.

Check the project manifest, scan source files, lint the affected class strings, and inspect any classes whose generated CSS is unclear. If fixes are needed, create a preview first and explain the diff before applying it.
```

---

## Available tools
The server exposes focused tools instead of asking the agent to infer Master CSS behavior from files alone.

### Project tools

| Tool | Use |
| --- | --- |
| `mastercss_workspace_info` | Report workspace roots, resolved Master CSS package locations, and manifest status. |
| `mastercss_setup_audit` | Audit package, entry stylesheet, manifest, integration, and package-resolution setup. |
| `mastercss_inspect_class` | Inspect one class and return semantic parts, generated rules, variables, and CSS text. |
| `mastercss_trace_class` | Trace one class through source extraction, scanner state, missing CSS classification, and generated rules. |
| `mastercss_extract_classes` | Extract class positions and validation summaries from project files or an in-memory source buffer. |
| `mastercss_inspect_directives` | Inspect CSS-first directives and report manifest, dependency, warning, and CSS effects. |
| `mastercss_render_css` | Generate CSS from an HTML fragment or a whitespace-separated class list. |
| `mastercss_scan_project` | Scan source files, register stylesheet entries, check optional classes, and report scanner state, generated CSS metadata, and missing CSS diagnostics. |
| `mastercss_manifest_query` | Query active manifest tokens, utilities, variants, modes, conditions, and aliases. |
| `mastercss_css_compare` | Compare generated CSS for before/after class lists, HTML fragments, or source buffers. |
| `mastercss_lint_project` | Run Master CSS class-list diagnostics for workspace files and return fix proposals without writing files. |
| `mastercss_lint_content` | Run Master CSS class-list diagnostics on an in-memory source buffer without writing files. |
| `mastercss_suggest_syntax` | Return language-service completions and hover context for a document position. |
| `mastercss_preview_fixes` | Create a diff preview for lint fixes or generated CSS output and return a confirmation token. |
| `mastercss_preview_directive_format` | Preview Master CSS directive formatting for files, or format in-memory content without writing. |
| `mastercss_apply_preview` | Apply a previously generated preview after validating the token, file hashes, and workspace containment. |

### Contributor tools

These read-only tools are for Master CSS repository contributors, AI coding agents, review bots, and CI support. They return repository-specific routing as compact JSON: affected packages, required context files, risk flags, and focused validation commands. In non-Master CSS workspaces they return limited package data instead of guessing.

| Tool | Use |
| --- | --- |
| `mastercss_repo_context` | Route changed paths or a diff to affected packages, required context files, risks, and validation commands. |
| `mastercss_change_impact` | Summarize contributor change risk for CSS output, runtime, extraction, language tooling, ESLint, docs, and package boundaries. |
| `mastercss_test_router` | Return focused validation commands for contributor changes. |
| `mastercss_package_graph` | Report workspace package ownership, scripts, exports, workspace dependencies, and dependents. |

The server also exposes workspace resources for the loaded manifest, entry files, and resolved Master CSS package locations.

---

## Prompt templates
Prompt templates guide common AI workflows without asking the client to infer the right tool sequence.

| Prompt | Use |
| --- | --- |
| `debug-missing-css` | Inspect scanner coverage, manifest loading, syntax, native CSS pruning, and stylesheet entry configuration when classes do not produce CSS. |
| `review-mastercss-classes` | Run class diagnostics and propose only safe, scoped write previews. |
| `migrate-to-mastercss` | Audit an existing styling system and produce an incremental migration plan before editing. |

Use `migrate-to-mastercss` when a project is moving from CSS, CSS Modules, Sass, Tailwind CSS, CSS-in-JS, component-library styling, or Master CSS v1. The prompt should make the agent inspect the workspace first, then return a plan with:

- the current framework, package manager, and styling systems
- stylesheet entries, source extraction coverage, and existing Master CSS tokens or component classes
- the recommended rendering mode and first reviewable migration batch
- CSS output risks, validation commands, and manual visual checks

The migration prompt is a planning workflow, not a one-shot converter. Keep the previous styling system in place until each migrated slice builds, runs, and visually matches the old UI. Use write previews only for safe, scoped changes that can be reviewed before applying.

```text name=prompt
Use the Master CSS MCP prompt `migrate-to-mastercss` for this workspace.

Inspect the project with MCP tools first. Do not edit yet. Return an incremental migration plan with the current styling inventory, recommended rendering mode, first migration batch, validation commands, and visual review risks.
```

---

## Machine-readable results
Project scan, lint, setup audit, directive inspection, class extraction, class tracing, CSS comparison, manifest query, and contributor routing reports use `version: 1`. Tooling can rely on stable top-level fields such as `version`, `root`, `manifest`, `inputs`, `files`, `diagnostics`, `risks`, `validation`, and `summary` when present. Nested diagnostic `data` and generated detail objects may gain fields as diagnostics become more precise.

For CLI fallback reports, `cwd` is the command root. For MCP reports, `root` is the configured workspace root.

---

## Safe write previews
Read-only tools never write files. Tools that can lead to writes use a two-step flow:

1. A preview tool such as `mastercss_preview_fixes` or `mastercss_preview_directive_format` creates a diff preview and returns a confirmation token.
2. The client shows or explains the preview.
3. `mastercss_apply_preview` applies the preview only after validating the token, workspace containment, and the original file hash.

This keeps AI-assisted edits reviewable. If a file changes after the preview is created, applying the preview fails instead of overwriting newer work.

Use `includeDirectiveFixes` only when structural `@compose` rewrites are acceptable. Class-list fixes are safer because they replace class-list text in place; directive fixes can rewrite CSS directive structure. Directive formatting previews are separate from lint fixes and use the same preview/apply safety checks.

---

## Choose the right tool
Use each Master CSS tool surface for the workflow it owns.

| Surface | Best for |
| --- | --- |
| MCP server | AI client tool calls with project context, setup audits, scanner diagnostics, class tracing, manifest queries, CSS comparison, syntax suggestions, and safe fix previews. |
| CLI JSON output | Terminal, CI, scripts, and native preflight checks that need machine-readable lint or scan reports. |
| ESLint | Human development workflow, editor diagnostics through ESLint extensions, team policy, and JavaScript/framework CI linting. |
| Language Service | Editor completion, hover previews, color tools, directive formatting, highlighting, and manifest diagnostics. |

When an AI client supports MCP, prefer the MCP server because it can call specific tools and keep write previews explicit. When a client cannot use MCP, use CLI JSON output as the fallback:

```bash name=Terminal
npx @master/css-cli lint --format json --exit-code never
```

For scanner state, stylesheet entry metadata, generated CSS size, or explicit missing CSS checks, use:

```bash name=Terminal
npx @master/css-cli inspect --format json --exit-code never
```

---

## Next steps
- Use [AI Coding](/guide/ai-coding) for prompts and review habits around AI-generated styling.
- Use [Project agent rules](/guide/ai-coding#add-project-agent-rules) when you want a reusable rules block for local AI coding agents.
- Use [Code Linting](/guide/code-linting) for the ESLint rules that enforce class policy in normal development.
- Use [Language Service](/guide/language-service) for editor intelligence and generated CSS previews.
- Use [Scanning latent classes](/guide/scanning-latent-classes) when generated CSS is missing because source discovery needs inspection.

---

# Migrating to Master CSS

Source: https://rc.css.master.co/en/guide/migration

Summary: Migrate existing projects to Master CSS with incremental setup, styling-system audits, and review workflow.

Migrating a real product to Master CSS is rarely a one-to-one syntax rewrite. Treat the work as a product styling change: inspect the existing styling systems, add Master CSS beside them, convert one reviewable slice at a time, and remove old dependencies only after the migrated UI is validated.

If you use a local AI coding agent, start with [AI Coding with Master CSS](/guide/ai-coding) for setup, context, prompts, and review habits. When your client supports MCP, connect the [Master CSS MCP server](/guide/mcp-server) and use the `migrate-to-mastercss` prompt so the agent can inspect the workspace before planning migration batches. This page keeps the migration-specific checklist and fallback prompt focused on converting an existing project.

---

## Frameworks
Migration guides for source styling systems with enough differences to need their own migration path.

  {[
    { ...brands['tailwindcss'], disabled: false },
    { ...brands['css'], disabled: false, name: 'CSS Modules', path: 'css' },
    { ...brands['styled-components'], disabled: false, name: 'CSS-in-JS', path: 'css-in-js' },
    { ...brands['mui'], disabled: false, path: 'material-ui' },
    { ...brands['bootstrap'], disabled: false, path: 'bootstrap' },
    { ...brands['sass'], disabled: false },
    { ...brands['v1'], disabled: false, name: 'Master CSS v1' },
  ]}

---

## Migration strategy
CSS migration depends on project context. A static checklist cannot reliably know which files contain product styles, which classes come from a third-party package, which values are design tokens, or which custom CSS is clearer than a generated utility class.

Start with an audit, then migrate incrementally. The first milestone is not deleting the previous styling system; it is getting Master CSS installed, generating CSS for new or converted markup, and keeping the existing UI stable while conversion is in progress.

For MCP-capable agents, use the MCP migration prompt for the audit step. It can inspect the active manifest, stylesheet entries, source extraction coverage, generated CSS, and class diagnostics before proposing the first reviewable batch.

---

## Before you start
- Start from a clean git working tree, or commit your current work first.
- Identify the existing styling systems, such as global CSS, CSS Modules, Tailwind CSS, CSS-in-JS, Sass, framework style blocks, or component-library CSS.
- Decide which [rendering mode](/guide/rendering-modes) fits the project: static rendering, runtime rendering, or progressive rendering.
- Find the CSS file your app already loads. This is usually where `@import '@master/css';` should enter the project.
- Keep the old styling system in place until the migrated screens build, run, and visually match the previous UI.

---

## Migration prompt
Paste this into your local coding agent from the project root. For general AI workflow guidance, use [AI Coding with Master CSS](/guide/ai-coding).

```text name=prompt
You are migrating this project to Master CSS.

Use the official Master CSS documentation as the source of truth:
Documentation: https://rc.css.master.co

Do not invent Master CSS classes, APIs, directives, or package names.

First inspect the repository and identify:
- the framework, build tool, package manager, and current styling systems
- the app CSS entry point and component/template files that contain styles
- any design tokens, theme variables, CSS modules, utility classes, styled components, preprocessors, or third-party stylesheets
- the available formatter, lint, type-check, test, and build commands

Then migrate incrementally:
1. Install and configure the appropriate Master CSS package or integration.
2. Import `@master/css` from the project CSS entry.
3. Choose the rendering mode that matches this project: static rendering, runtime rendering, or progressive rendering.
4. Convert repeated visual styles into Master CSS classes in markup where that improves clarity.
5. Move shared design values into `@theme` tokens.
6. Use `@components` and `@compose` for reusable component classes only when markup classes would become hard to maintain.
7. Keep vendor CSS, generated CSS, complex animation CSS, and hard-to-read one-off CSS in regular CSS unless converting it improves maintainability.
8. Remove the old styling dependency only after the migrated screens build and match the previous UI.

Work in small migration batches. After each focused batch, show me the changed files, explain the conversion decisions, and run the project’s formatter, type check, tests, and build if available. Call out anything that needs manual review, especially visual differences, removed CSS, changed tokens, old styling dependencies, or unsupported syntax.
```

---

## Review the result
Review the migration as code and as UI.

- Inspect the diff before accepting each batch.
- Run the formatter, type check, tests, and production build available in the project.
- Compare important screens in the browser, including responsive states and dark mode if the app supports them.
- Keep regular CSS for vendor styles, generated output, hard-to-read one-off declarations, complex animations, and anything external code controls.
- Remove old styling dependencies only after the converted paths no longer rely on them.

---

## Useful references
- [Installation](/guide/installation) for adding Master CSS to a project.
- [Rendering modes](/guide/rendering-modes) for choosing static, runtime, or progressive rendering.
- [Style declarations](/guide/style-declarations) for class syntax.
- [Theme Tokens](/guide/theme) for `@theme` tokens, [Variables and Modes](/guide/variables-and-modes) for modes, and [Conditional Queries](/guide/conditional-queries) for custom variants.
- [Global styles](/guide/global-styles#shared-vocabulary) for deciding between utilities, theme tokens, and component classes.
- [Code linting](/guide/code-linting) for validating Master CSS classes in source code.
- [Language Service](/guide/language-service) for editor highlighting and completion.

---

# Migrating from Bootstrap

Source: https://rc.css.master.co/en/guide/migration/bootstrap

Summary: Move Bootstrap-styled screens toward Master CSS while preserving vendor CSS, JavaScript-driven components, and cascade-dependent overrides.

Bootstrap and Master CSS can run side by side. Keep Bootstrap loaded while existing markup still depends on its grid, utilities, components, JavaScript behavior, Sass variables, or selector overrides. Convert one screen or component family at a time, then remove Bootstrap only after the product no longer relies on it.

This guide focuses on app-owned Bootstrap usage. Vendor markup, third-party plugins, generated HTML, and Bootstrap JavaScript components can stay on Bootstrap until the project has a deliberate replacement.

---

## Migration strategy
Start with coexistence.

1. Import Master CSS from the app stylesheet without removing Bootstrap.
2. Keep Bootstrap CSS, Sass output, and JavaScript imports while current screens depend on them.
3. Audit Bootstrap utilities, grid classes, components, Sass variable overrides, and custom selectors.
4. Move project-owned design values into Master CSS `@theme`.
5. Convert layout wrappers, spacing, typography, and simple surfaces to Master CSS classes.
6. Keep Bootstrap JavaScript components and data attributes until equivalent behavior exists.
7. Remove Bootstrap packages only after validation proves no converted path needs them.

The first milestone is a stable app where both systems load and new Master CSS classes work. Dependency removal is the last step, not the first.

---

## Audit checklist
Inspect the Bootstrap surface before changing files.

| Area | What to look for | Migration decision |
| --- | --- | --- |
| CSS entry | `bootstrap/dist/css/bootstrap.css`, compiled Sass output, and app CSS import order | Add Master CSS beside the existing entry and preserve cascade order during migration. |
| Sass setup | `$theme-colors`, `$spacers`, `$grid-breakpoints`, `$container-max-widths`, and partial imports | Move product-owned values into `@theme`; keep Bootstrap variables needed by remaining Bootstrap components. |
| Grid and layout | `.container`, `.row`, `.col-*`, `.g-*`, display, flex, and spacing utilities | Convert app-owned layout wrappers to Master CSS classes. |
| Components | Buttons, navs, modals, dropdowns, accordions, alerts, forms, and cards | Convert simple visual surfaces first; keep behavior-heavy components on Bootstrap. |
| JavaScript behavior | `data-bs-*`, Bootstrap plugin imports, portals, focus handling, transitions, and events | Keep until a replacement interaction is implemented and tested. |
| Overrides | Selectors that target Bootstrap classes, component states, or generated markup | Keep as CSS until the underlying component is migrated. |

---

## Add Master CSS beside Bootstrap
Import Master CSS from the stylesheet your app already loads. Do not remove Bootstrap imports yet.

```css name=app.css
@import "bootstrap/dist/css/bootstrap.css";
@import "@master/css";
```

Default source discovery is enough for ordinary app files. Add explicit source directives only when the app needs custom include, exclude, safelist, or blocklist behavior.

If Bootstrap should stay lower in the cascade, keep its import before Master CSS or wrap vendor CSS in a lower-priority layer controlled by the project. Verify the resulting cascade in the browser before deleting any overrides.

---

## Move Bootstrap Sass values into `@theme`
Bootstrap Sass variables often contain product decisions. Move those decisions into Master CSS tokens when they should be used by markup outside Bootstrap components.

```scss name=bootstrap-theme.scss
$primary: #2563eb;
$body-color: #172033;
$border-radius: .5rem;
$spacer: 1rem;
```

```css name=app.css
@import "@master/css";

@theme {
  --color-primary: #2563eb;
  --color-body: #172033;
  --radius-control: .5rem;
  --spacing-page: 1rem;
}
```

```html
<section class="bg:white fg:body p:page r:control">
  ...
</section>
```

Do not assume Bootstrap's scale names match the Master CSS preset. Move the values that matter to the product, then choose Master CSS token names that describe their role.

---

## Convert grid and utility classes
Start with layout wrappers and simple utility-only markup.

Instead of preserving Bootstrap class spelling, preserve layout intent:

```html
<!-- Before: container py-5 -->
<!-- Before: row g-4 -->
<!-- Before: col-md-4 -->
```

```html
<section class="w:full max-w:6xl mx:auto px:md py:2xl">
  <div class="grid gap:lg grid-cols:3@md">
    <article class="p:lg b:1px|solid|base r:lg bg:white">
      ...
    </article>
  </div>
</section>
```

Use native declaration syntax when it is clearer than a utility alias:
```html
<div class="scroll-margin-top:4rem display:contents@md">
  ...
</div>
```
Keep Bootstrap layout classes in templates that still need Bootstrap's container widths, gutter assumptions, or component internals.

---

## Convert simple components
Buttons, cards, alerts, and badges are often app-owned visual patterns. Convert them to markup classes or Master CSS component classes when the project owns the behavior.

```css name=app.css
@import "@master/css";

@components {
  btn-primary {
    @compose inline-flex items-center justify-center gap:xs h:10x px:md bg:primary fg:white r:control;
    &:hover { @compose bg:blue-70; }
    &:disabled { opacity: 0.5; }
  }

  panel {
    @compose p:lg b:1px|solid|base r:lg bg:white fg:body shadow:sm;
  }
}
```

```html
<button class="btn-primary">Save</button>
<article class="panel">...</article>
```

Keep Bootstrap components when they still provide behavior, accessibility, or internal structure, such as dropdowns, modals, tabs, carousels, and collapse regions. You can still add a small Master CSS class to a Bootstrap root element when the component forwards the class and the cascade is clear.

---

## Preserve JavaScript-driven components
Bootstrap JavaScript components are not just CSS. They can manage focus, ARIA attributes, transitions, body scroll locks, popper positioning, and events.

Keep markup with `data-bs-*` attributes on Bootstrap until the replacement behavior has been implemented and tested. Convert only the surrounding layout or product-owned wrappers first.

```html
<section class="grid gap:md">
  <!-- Bootstrap modal trigger and modal markup can remain unchanged here. -->
</section>
```

When a component is replaced, remove its Bootstrap JavaScript import and related data attributes in the same reviewable batch.

---

## Handle overrides and vendor CSS
Many Bootstrap projects rely on selector overrides such as component state classes, nested markup selectors, or specificity fixes. Do not translate those blindly.

Keep the override as CSS when it targets Bootstrap internals:

```css name=bootstrap-overrides.css
.navbar .dropdown-menu {
  min-width: 16rem;
}
```

Move the override to Master CSS only after the markup is app-owned:

```html
<nav class="flex items-center gap:md">
  <div class="min-w:3xs">...</div>
</nav>
```

Vendor CSS and third-party Bootstrap themes should remain regular CSS until the project replaces the vendor contract.

---

## Validate the migration
- Run the project's formatter, linter, type check, tests, and production build after each batch.
- Compare pages that used Bootstrap grid, container, form, modal, dropdown, collapse, tooltip, popover, and responsive utilities.
- Test hover, focus-visible, disabled, expanded, selected, validation, and dark-mode states if the project supports them.
- Keep Bootstrap loaded until no remaining template, component, plugin, or override depends on it.
- Remove Bootstrap Sass, CSS, JavaScript imports, and packages only after the full validation suite passes.

---

## Useful references
- [Installation](/guide/installation) for adding Master CSS.
- [Rendering modes](/guide/rendering-modes) for choosing static, runtime, or progressive rendering.
- [Style declarations](/guide/style-declarations) for class syntax.
- [Theme Tokens](/guide/theme) for tokens, [Variables and Modes](/guide/variables-and-modes) for modes, and [Conditional Queries](/guide/conditional-queries) for custom variants.
- [Global styles](/guide/global-styles#shared-vocabulary) for deciding between markup classes, theme tokens, custom utilities, and component classes.
- [Code linting](/guide/code-linting) for validating class strings during migration.

---

# Migrating from CSS and CSS Modules

Source: https://rc.css.master.co/en/guide/migration/css

Summary: Move global CSS and CSS Modules toward Master CSS where class strings, tokens, or composition make the result easier to maintain.

Regular CSS and CSS Modules can coexist with Master CSS for as long as the project needs. Treat migration as a cleanup pass, not a rule that every declaration must become a class.

Move repeated, visual, markup-owned styles into Master CSS classes. Keep global resets, vendor styles, complex selectors, generated CSS, and hard-to-read one-off rules in regular CSS.

---

## Migration strategy
Start with the stylesheet your app already loads.

1. Import `@master/css` from the app CSS entry.
2. Keep default source discovery unless the project needs a narrower scan boundary.
3. Move shared design values into `@theme`.
4. Convert component-local visual rules into class strings when the markup stays readable.
5. Use `@reference` and `@compose` inside CSS Modules when a local class name is still the clearest API.
6. Delete old CSS only after the affected screens build and visually match.

Avoid converting selectors that describe document structure, third-party internals, browser quirks, or animation timelines better than a class list can.

---

## Audit checklist
Inspect the CSS surface before changing files.

| Area | What to look for | Migration decision |
| --- | --- | --- |
| App CSS entry | Global imports, reset files, cascade layers, and framework CSS entries | Add Master CSS beside the existing CSS first. |
| Global CSS | Base element styles, custom properties, fonts, media queries, and layout primitives | Keep broad document rules in CSS; move reusable values into `@theme`. |
| CSS Modules | `.module.css` files, `styles.*` usage, `:global`, `composes`, and local variants | Convert to markup classes or use `@compose` inside the module. |
| Tokens | `--*` custom properties, theme files, spacing scales, color variables, and breakpoints | Move project-owned values into Master CSS `@theme` blocks. |
| Dynamic values | Inline styles, CSS variables, runtime-calculated measurements, and data attributes | Keep the class static and pass dynamic values through CSS variables. |
| External CSS | Vendor styles, generated CSS, editor themes, maps, and third-party component styles | Keep as CSS unless the project owns the styling contract. |

---

## Add Master CSS beside existing CSS
Keep the current CSS files loaded while Master CSS starts generating rules for new or converted markup.

```css name=app.css
@import "@master/css";
```

Default source discovery is enough for most projects. Add `@source`, `@source not`, `@safelist`, or `@blocklist` only when the migration needs explicit scan boundaries or classes that are not present as complete source strings.

Use [Rendering modes](/guide/rendering-modes) to decide whether the project should use static rendering, runtime rendering, or progressive rendering before converting many files.

---

## Convert local CSS to markup classes
Move local visual declarations into markup when the class list is easier to review than a separate selector.

```css name=Card.module.css
.card {
  display: grid;
  gap: 1rem;
  padding: 1.5rem;
  border-radius: .75rem;
  background: var(--color-surface);
}
```

```tsx name=Card.tsx
export function Card({ children }: { children: React.ReactNode }) {
  return (
    <section className="grid gap:md p:lg r:lg bg:surface">
      {children}
    </section>
  )
}
```

Prefer named theme tokens such as `bg:surface`, `p:card`, or `r:card` when the value is a product decision. Prefer direct native declaration classes such as `scroll-margin-top:4rem` when the CSS property is clearer than inventing a new abstraction.

---

## Keep CSS Modules when they are the component API
CSS Modules are still useful when a component exposes a stable local class name, needs selectors that target internal structure, or composes shared styles with a local variant.

Use `@reference` to make project tokens, components, utilities, and custom variants available without importing the app CSS output again.

```css name=Button.module.css
@reference "../app.css";

.button {
  @compose inline-flex items-center justify-center gap:xs h:10x px:md r:md bg:blue-60 fg:white;
}

.button:disabled {
  opacity: 0.5;
pointer-events: none;
}
```

```tsx name=Button.tsx
import styles from './Button.module.css'

export function Button(props: React.ButtonHTMLAttributes<HTMLButtonElement>) {
  return <button className={styles.button} {...props} />
}
```

Use this pattern when removing the module would force too many call sites to change at once. Convert the module away later if the local class stops adding value.

---

## Move shared values into `@theme`
Project-owned custom properties usually belong in `@theme` before large-scale class conversion. That lets markup use token names instead of hard-coded values.

```css name=app.css
@import "@master/css";

@theme {
  --color-surface: #ffffff;
  --color-body: #172033;
  --spacing-card: 1.5rem;
  --radius-card: .75rem;
}
```

```html
<article class="r:card fg:body grid-cols:3@md bg:surface p:card">
  ...
</article>
```

Keep plain CSS custom properties when the value is runtime-owned, component-private, or intentionally outside the design system.

```tsx
<div className="w:$progress bg:blue-60" style={{ '--progress': `${value}%` } as React.CSSProperties} />
```

---

## Validate the migration
Review each batch as both code and UI.

- Run the project's formatter, linter, type check, tests, and production build.
- Use [Code linting](/guide/code-linting) to validate Master CSS class strings.
- Compare migrated screens in light mode, dark mode, responsive breakpoints, hover and focus states.
- Keep CSS for selectors, animations, and vendor output that would become harder to understand as class strings.
- Remove old CSS only after no component or page still depends on it.

---

## Useful references
- [Installation](/guide/installation) for adding Master CSS to a project.
- [Rendering modes](/guide/rendering-modes) for choosing static, runtime, or progressive rendering.
- [Style declarations](/guide/style-declarations) for class syntax.
- [Theme Tokens](/guide/theme) for `@theme` tokens, [Variables and Modes](/guide/variables-and-modes) for modes, and [Conditional Queries](/guide/conditional-queries) for custom variants.
- [CSS directives](/guide/directives) for `@reference`, `@compose`, `@source`, `@safelist`, and `@blocklist`.
- [Route-level styles](/guide/route-level-styles) for local CSS Modules and route styles that compose project context.
- [Global styles](/guide/global-styles#shared-vocabulary) for deciding between markup utilities, theme tokens, custom utilities, and component classes.

---

# Migrating from CSS-in-JS

Source: https://rc.css.master.co/en/guide/migration/css-in-js

Summary: Move styled-components and Emotion styles to Master CSS by converting static styles, preserving dynamic values, and keeping reusable component contracts explicit.

CSS-in-JS migrations are most successful when static visual styles move first and runtime behavior moves last. Styled Components and Emotion can stay in the project while Master CSS takes over class-based styling one component family at a time.

This guide covers `styled-components`, `@emotion/react`, and `@emotion/styled`. It does not require deleting CSS-in-JS from components that still need runtime-generated selectors or values.

---

## Migration strategy
Run both systems during migration.

1. Add Master CSS to the app CSS entry and choose a rendering mode.
2. Audit styled wrappers, `css` helpers, object styles, global styles, theme providers, and variant props.
3. Move project-owned theme values into Master CSS `@theme`.
4. Convert static styles to class strings or `@components`.
5. Convert variant props to complete class maps.
6. Pass truly dynamic values through CSS variables.
7. Remove CSS-in-JS packages only after no converted surface depends on their runtime.

Do not start with a global codemod. CSS-in-JS often mixes layout, visual styling, variants, element selection, animation, and runtime state in the same component.

---

## Audit checklist
Inspect the CSS-in-JS surface before changing files.

| Area | What to look for | Migration decision |
| --- | --- | --- |
| Styled wrappers | `styled.div`, `styled(Component)`, `as`, transient props, and polymorphic components | Convert pure visual wrappers first; keep wrappers that encode behavior or DOM choice. |
| Emotion `css` | `css` prop, `css()` helper, object styles, arrays, and conditional fragments | Replace static fragments with class strings or class maps. |
| Themes | `ThemeProvider`, `DefaultTheme`, palette, spacing, radius, typography, breakpoints, and modes | Move shared design values into `@theme`; keep non-CSS app config in the JS theme. |
| Global styles | `createGlobalStyle`, Emotion `Global`, resets, font faces, and base element rules | Move app-owned CSS to the CSS entry; keep third-party resets that still matter. |
| Variants | Props such as `tone`, `size`, `selected`, `dense`, and `disabled` | Use complete class maps so static rendering can see every class. |
| Runtime values | Measurements, user colors, drag positions, progress, and live layout values | Use CSS variables or keep the CSS-in-JS rule until there is a clearer replacement. |

---

## Convert static styled components
Start with wrappers that only apply stable visual styles.

```tsx name=Button.tsx
import styled from 'styled-components'

const Button = styled.button`
  .5rem; })
  => ${({
  0 1rem;
  2.5rem; align-items:
  background: border-radius: center;
  color: display:
  gap: inline-flex; min-height: padding: theme theme.colors.primary};
  white;
`
```

Move the reusable value into `@theme`, then use a class string where the button is rendered.

```css name=app.css
@import "@master/css";

@theme {
  --color-primary: #2563eb;
}
```

```tsx name=Button.tsx
export function Button(props: React.ButtonHTMLAttributes<HTMLButtonElement>) {
  return (
    <button
      className="inline-flex items-center gap:xs min-h:10x px:md r:md bg:primary fg:white"
      {...props}
    />
  )
}
```

If the project needs a named component class, define it once in CSS.

```css name=app.css
@import "@master/css";

@components {
  btn {
    @compose inline-flex items-center justify-center gap:xs min-h:10x px:md r:md bg:primary fg:white;
    &:hover { @compose bg:blue-70; }
    &:disabled { opacity: 0.5; }
  }
}
```

```html
<button class="btn">Save</button>
```

---

## Convert variants to class maps
Avoid building Master CSS class names from string fragments. Static rendering and linting work best with complete class strings.

```tsx
const toneClasses = {
  neutral: 'bg:surface fg:body b:1px|solid|base',
  primary: 'bg:blue-60 fg:white bg:blue-70:hover',
  danger: 'bg:red-60 fg:white bg:red-70:hover'
}

const sizeClasses = {
  sm: 'h:8x px:sm font:sm',
  md: 'h:10x px:md font:sm',
  lg: 'h:12x px:lg font:md'
}

export function Button({ tone = 'primary', size = 'md', className, ...props }: ButtonProps) {
  return (
    <button
      className={`inline-flex align-items:center r:md ?? ''} ${className ${sizeClasses[size]} ${toneClasses[tone]}`}
      {...props}
    />
  )
}
```

When a variant controls more than visual styles, keep the prop and only migrate the visual declarations.

---

## Use CSS variables for dynamic values
Runtime values should not become generated class names. Keep the class static and pass the changing value through a CSS variable.

```tsx
export function Meter({ value }: { value: number }) {
  return (
    <div className="overflow:hidden h:2x r:full bg:gray-10">
      <div
        className="h:full w:$value bg:green-60 transition:width|fast|smooth"
        style={{ '--value': `${value}%` } as React.CSSProperties}
      />
    </div>
  )
}
```

Keep CSS-in-JS for cases where the component must create selectors, keyframes, or style blocks from runtime data that cannot be represented clearly with CSS variables.

---

## Move global styles carefully
Global styles often contain real app infrastructure. Move them in small groups.

```tsx name=GlobalStyles.tsx
import { Global, css } from '@emotion/react'

export function GlobalStyles() {
  return <Global styles={css`
    body {
      margin: 0;
      background: var(--color-surface);
    }
  `} />
}
```

```css name=app.css
@import "@master/css";

@layer base {
  body {
    margin: 0;
    background: var(--color-surface);
  }
}
```

Keep CSS-in-JS global styles until the replacement CSS entry is loaded in every route, shell, and server-rendered path that previously received them.

---

## Validate the migration
- Run formatter, lint, type check, tests, and production build after each batch.
- Compare server-rendered output if the CSS-in-JS setup had SSR extraction or hydration logic.
- Check dark mode, responsive breakpoints, hover, focus-visible, disabled, selected, and polymorphic `as` states.
- Remove Babel plugins, Emotion cache setup, styled-components SSR wiring, and package dependencies only after no remaining component needs them.

---

## Useful references
- [Installation](/guide/installation) for adding Master CSS to a project.
- [Rendering modes](/guide/rendering-modes) for static, runtime, and progressive rendering.
- [Style declarations](/guide/style-declarations) for class syntax.
- [Theme Tokens](/guide/theme) for design tokens and [Variables and Modes](/guide/variables-and-modes) for modes.
- [Scanning latent classes](/guide/scanning-latent-classes) for class maps and static extraction.
- [Global styles](/guide/global-styles#shared-vocabulary) for choosing markup classes, theme tokens, custom utilities, and components.

---

# Migrating from Material UI

Source: https://rc.css.master.co/en/guide/migration/material-ui

Summary: Move Material UI projects toward Master CSS by migrating app-owned layout, sx styles, theme tokens, and overrides without breaking component behavior.

Material UI and Master CSS can coexist. Most projects should migrate app-owned layout, product surfaces, and repeated `sx` styles first, while keeping Material UI components where their accessibility, state management, slots, and JavaScript behavior still provide value.

Do not treat this as a component-for-component rewrite. A good migration often keeps `Button`, `Dialog`, `Menu`, `Select`, `DataGrid`, or theme-driven component overrides until the product has a deliberate replacement.

---

## Migration strategy
Run Master CSS beside Material UI.

1. Add Master CSS to the app CSS entry.
2. Keep `ThemeProvider`, `CssBaseline`, Emotion cache, and Material UI SSR setup while screens still depend on them.
3. Audit `sx`, `styled()`, `className`, `slotProps`, `classes`, `styleOverrides`, and theme tokens.
4. Move app-owned design values into `@theme`.
5. Convert layout wrappers and repeated `sx` objects to Master CSS classes.
6. Keep component-internal styling in Material UI overrides until a replacement component exists.
7. Remove Material UI packages only if the project actually replaces the component system.

Many migrations stop at coexistence: Master CSS owns app layout and custom surfaces, while Material UI continues to own complex interactive widgets.

---

## Audit checklist
Inspect the Material UI surface before changing files.

| Area | What to look for | Migration decision |
| --- | --- | --- |
| Theme | `createTheme`, palette, typography, spacing, shape, shadows, breakpoints, and color schemes | Move product tokens into `@theme`; keep MUI theme values required by remaining MUI components. |
| `sx` usage | Layout, spacing, color, responsive arrays, pseudo selectors, and one-off overrides | Convert app-owned static `sx` to class strings. |
| `styled()` usage | Styled MUI components, ownerState variants, and theme callbacks | Convert pure visual wrappers; keep wrappers tied to MUI slots or owner state. |
| Component overrides | `components.*.styleOverrides`, `variants`, `defaultProps`, `classes`, and `slotProps` | Keep while the MUI component remains the source of behavior. |
| Baseline and globals | `CssBaseline`, `GlobalStyles`, font imports, and reset assumptions | Keep until equivalent global CSS is loaded everywhere. |
| Injection order | Emotion cache, SSR extraction, and style precedence | Verify class-based overrides in the browser before removing old style setup. |

---

## Add Master CSS beside Material UI
Import Master CSS from the app stylesheet and keep the current Material UI providers in place.

```css name=app.css
@import "@master/css";
```

Default source discovery is enough for most projects. Add explicit source directives only when the app needs custom include, exclude, safelist, or blocklist behavior.

Use [Rendering modes](/guide/rendering-modes) before a large migration. Runtime rendering is often the easiest starting point for React apps that are actively changing during migration; static or progressive rendering may be better once class strings are stable.

---

## Move theme values into `@theme`
Start with product-owned values that should be shared outside Material UI components.

```ts name=theme.ts
export const theme = createTheme({
  palette: {
    primary: { main: '#2563eb' },
    background: { paper: '#ffffff' },
    text: { primary: '#172033' }
  },
  shape: {
    borderRadius: 8
  }
})
```

```css name=app.css
@import "@master/css";

@theme {
  --color-primary: #2563eb;
  --color-surface: #ffffff;
  --color-body: #172033;
  --radius-control: .5rem;
}
```

```html
<section class="b:1px|solid|base fg:body bg:surface r:control">
  ...
</section>
```

Do not assume Material UI spacing, breakpoint, radius, or palette scales match the Master CSS preset. Move product tokens intentionally, then review any default-token substitutions.

---

## Convert app-owned `sx`
Start with `sx` blocks that style layout wrappers, cards, sections, and simple product UI.

```tsx name=DashboardPanel.tsx
import Box from '@mui/material/Box'

export function DashboardPanel({ children }: { children: React.ReactNode }) {
  return (
    <Box sx={{
      display: 'grid',
      gap: 2,
      p: 3,
      borderRadius: 2,
      bgcolor: 'background.paper'
    }}>
      {children}
    </Box>
  )
}
```

```tsx name=DashboardPanel.tsx
export function DashboardPanel({ children }: { children: React.ReactNode }) {
  return (
    <section className="grid gap:md p:lg bg:surface r:control">
      {children}
    </section>
  )
}
```

Use Material UI components with `className` when the component still provides useful behavior and forwards the class to the root element.

```tsx
<Button className="min-w:0 px:md" variant="contained">
  Save
</Button>
```

Keep `sx`, `slotProps`, or `classes` when the styling targets a MUI slot, state class, or generated internal structure.

---

## Convert repeated patterns to component classes
When many `sx` blocks encode the same product role, move that role into a Master CSS component class.

```css name=app.css
@import "@master/css";

@components {
  panel {
    @compose p:lg b:1px|solid|base r:lg fg:body shadow:sm bg:surface;
  }

  toolbar {
    @compose flex items-center gap:sm min-h:12x;
  }
}
```

```tsx
<section className="panel">
  <div className="toolbar">
    ...
  </div>
</section>
```

Prefer component classes for project-owned roles. Keep Material UI theme variants for Material UI components that remain part of the design system.

---

## Handle responsive and state styles
Translate static responsive `sx` into Master CSS conditions.

```tsx
<Box sx={{ display: 'grid', gridTemplateColumns: { xs: '1fr', md: 'repeat(3, 1fr)' }, gap: 2 }} />
```

```html
<section class="grid grid-cols:1 gap:md grid-cols:3@md">
  ...
</section>
```

For component state, prefer the native state or attribute when it belongs to your markup.

```html
<button class="bg:blue-60 bg:blue-70:hover opacity:.5:disabled">
  Save
</button>
```

Keep MUI state classes such as selected, expanded, focused, or error styling in MUI overrides when they target internal slots or behavior that the app does not own.

---

## Validate the migration
- Run formatter, lint, type check, tests, and production build after each batch.
- Compare important screens in light mode, dark mode, responsive breakpoints, hover, focus-visible, disabled, selected, and loading states.
- Test dialogs, menus, selects, popovers, portals, transitions, and focus traps before removing any Material UI component.
- Keep Emotion cache and SSR setup until no remaining Material UI or Emotion path needs it.
- Remove Material UI packages only after replacing both visual styling and component behavior.

---

## Useful references
- [Installation](/guide/installation) for adding Master CSS.
- [Rendering modes](/guide/rendering-modes) for choosing CSS delivery.
- [Style declarations](/guide/style-declarations) for class syntax.
- [Theme Tokens](/guide/theme) for tokens and breakpoints, and [Variables and Modes](/guide/variables-and-modes) for modes.
- [Global styles](/guide/global-styles#shared-vocabulary) for markup utilities, component classes, and custom utilities.

---

# Migrating from Sass

Source: https://rc.css.master.co/en/guide/migration/sass

Summary: Move Sass variables, maps, mixins, placeholders, and nested component styles toward Master CSS without losing useful CSS structure.

Sass and Master CSS can coexist. Keep Sass for vendor imports, generated selectors, complex nesting, and styles that read better as CSS. Move repeated visual values and markup-owned component styles into Master CSS when the result is easier to maintain.

This guide covers `.scss` and `.sass` projects that use variables, maps, mixins, functions, placeholders, partials, and nested selectors.

---

## Migration strategy
Start from the Sass entry files your app already builds.

1. Import Master CSS from the app CSS entry while Sass continues to compile.
2. Audit Sass variables, maps, mixins, functions, placeholders, partials, and generated selectors.
3. Move shared design values into Master CSS `@theme`.
4. Convert local visual rules to markup classes when the markup stays readable.
5. Convert reusable Sass patterns to `@components`, `@utilities`, `@compose`, or native CSS.
6. Keep vendor imports, generated CSS, complex animation CSS, and hard-to-read selectors in Sass or regular CSS.
7. Remove Sass only after converted screens no longer depend on it.

Do not translate every Sass rule. The goal is clearer ownership, not fewer file extensions.

---

## Audit checklist
Inspect the Sass surface before changing files.

| Area | What to look for | Migration decision |
| --- | --- | --- |
| Entry files | `.scss` and `.sass` entries, partials, `@use`, `@forward`, and app imports | Add Master CSS beside the current entry first. |
| Variables and maps | Colors, spacing, radius, typography, shadows, breakpoints, and z-index scales | Move product-owned values into `@theme`. |
| Mixins and functions | Responsive helpers, fluid calculations, color helpers, and repeated declarations | Replace with utilities, tokens, native CSS functions, or keep in CSS when clearer. |
| Placeholders | `%button`, `%card`, `%stack`, and `@extend` usage | Convert real product roles to `@components`; convert primitives to `@utilities`. |
| Nesting | Component states, descendant selectors, media queries, and structural selectors | Move simple states into classes; keep complex selectors as CSS. |
| Generated CSS | Loops, maps, vendor output, icon fonts, and theme packages | Keep generated output until a deliberate replacement exists. |

---

## Add Master CSS beside Sass
Import Master CSS from the stylesheet your app already loads. Keep Sass compilation in place.

```css name=app.css
@import "@master/css";
@import "./legacy.scss";
```

Default source discovery is enough for ordinary app files. Add explicit source directives only when the app needs custom include, exclude, safelist, or blocklist behavior.

If Sass currently emits global resets, vendor CSS, or generated selectors, keep those imports while the migration is in progress.

---

## Move variables and maps into `@theme`
Sass variables and maps that define product values usually become Master CSS theme tokens.

```scss name=_tokens.scss
$color-primary: #2563eb;
$color-body: #172033;
$space-card: 1.5rem;
$radius-card: .75rem;
```

```css name=app.css
@import "@master/css";

@theme {
  --color-primary: #2563eb;
  --color-body: #172033;
  --spacing-card: 1.5rem;
  --radius-card: .75rem;
}
```

```html
<article class="b:1px|solid|base r:card bg:white fg:body p:card">
  ...
</article>
```

Use token names that describe the product role. Do not preserve Sass variable names when they were only implementation details.

---

## Convert local component styles
Move local visual rules into markup when the style belongs to one element or one component instance.

```scss name=Card.module.scss
.card {
  display: grid;
  gap: 1rem;
  padding: 1.5rem;
  border-radius: .75rem;
  background: #fff;
}
```

```tsx name=Card.tsx
export function Card({ children }: { children: React.ReactNode }) {
  return (
    <section className="grid gap:md r:card bg:white p:card">
      {children}
    </section>
  )
}
```

Keep Sass or regular CSS when the selector describes document structure, generated content, print rules, complex animation timelines, or third-party markup.

---

## Replace placeholders and mixins intentionally
Sass placeholders and mixins often represent either product roles or low-level primitives. Choose the Master CSS target based on ownership.

Use `@components` for product roles:

```css name=app.css
@import "@master/css";

@components {
  card {
    @compose grid gap:md b:1px|solid|base r:card bg:white shadow:sm p:card;
  }

  btn {
    @compose inline-flex items-center justify-center gap:xs h:10x px:md r:md bg:primary fg:white;
  }
}
```

```html
<article class="card">...</article>
<button class="btn">Save</button>
```

Use `@utilities` for reusable primitives:

```css name=app.css
@utilities {
  content-auto {
    content-visibility: auto;
    contain-intrinsic-size: auto 32rem;
  }
}
```

```html
<section class="content-auto">...</section>
```

Keep Sass mixins when they generate many selectors, encode browser workarounds, or produce CSS that would be harder to understand as classes.

---

## Keep useful nesting as CSS
Nested Sass can map cleanly to Master CSS states when the target is a single element.

```html
<button class="bg:blue-60 bg:blue-70:hover opacity:.5:disabled">
  Save
</button>
```

Keep nested selectors in CSS when they express internal structure:

```css name=app.css
.article-content {
  h2 {
    margin-top: 2rem;
  }

  pre code {
    white-space: pre;
  }
}
```

If that stylesheet uses `@compose`, add `@reference` instead of importing the app CSS output again.

```css name=Article.module.css
@reference "../app.css";

.article {
  @compose grid gap:lg;
}
```

---

## Validate the migration
- Run the Sass compiler, formatter, linter, type check, tests, and production build after each batch.
- Compare converted pages in responsive breakpoints, dark mode, hover, focus-visible, disabled, and print states.
- Keep Sass for vendor imports, generated CSS, complex nesting, mixins with browser workarounds, and one-off rules that are clearer as CSS.
- Remove Sass packages and build configuration only after no imported stylesheet, component, or package still depends on Sass.

---

## Useful references
- [Installation](/guide/installation) for adding Master CSS.
- [Rendering modes](/guide/rendering-modes) for choosing static, runtime, or progressive rendering.
- [Style declarations](/guide/style-declarations) for class syntax.
- [Theme Tokens](/guide/theme) for tokens, [Variables and Modes](/guide/variables-and-modes) for modes, and [Conditional Queries](/guide/conditional-queries) for custom variants.
- [CSS directives](/guide/directives) for `@theme`, `@components`, `@utilities`, `@reference`, and `@compose`.
- [Route-level styles](/guide/route-level-styles) for local CSS files that use `@reference` and `@compose`.
- [Global styles](/guide/global-styles#shared-vocabulary) for deciding between markup classes, theme tokens, custom utilities, and component classes.

---

# Migrating from Tailwind CSS

Source: https://rc.css.master.co/en/guide/migration/tailwindcss

Summary: Migrate a Tailwind CSS v4 project to Master CSS by translating CSS-first theme values, utilities, variants, and composition in reviewable batches.

Tailwind CSS v4 and Master CSS both generate CSS from class names and CSS directives, but they are not drop-in replacements for each other. Treat the migration as a product styling change: install Master CSS beside Tailwind, convert one route or component family at a time, and remove Tailwind only after the migrated surfaces build and visually match the intended design.

This guide focuses on Tailwind CSS v4's CSS-first workflow: `@import "tailwindcss"`, `@theme`, `@utility`, `@variant`, `@custom-variant`, `@source`, and `@apply`. For Tailwind behavior, use the official references for [functions and directives](https://tailwindcss.com/docs/functions-and-directives), [theme variables](https://tailwindcss.com/docs/theme), [detecting classes in source files](https://tailwindcss.com/docs/detecting-classes-in-source-files), and [states and variants](https://tailwindcss.com/docs/hover-focus-and-other-states).

---

## Migration strategy
Run both systems while you migrate. Tailwind can keep styling existing screens while Master CSS takes over one reviewed slice at a time.

1. Add Master CSS to the project without removing Tailwind.
2. Keep the Tailwind CSS entry loaded until converted screens no longer depend on it.
3. Move shared design values into Master CSS `@theme` tokens.
4. Convert markup classes where the class list stays readable.
5. Replace reusable `@apply` rules with `@compose`, `@components`, `@utilities`, or native CSS.
6. Run project checks and compare important screens before deleting Tailwind.

Avoid global search-and-replace. Tailwind class names encode a different vocabulary, default theme, Preflight reset, container model, ring model, and variant syntax. A reviewable migration preserves intent instead of preserving spelling.

---

## Audit checklist
Inspect the Tailwind surface before changing files.

| Area | What to look for | Migration decision |
| --- | --- | --- |
| CSS entry | `@import "tailwindcss"` and any imported theme files | Add `@import "@master/css"` beside it during migration. |
| Theme | Tailwind `@theme`, `@theme inline`, and `@theme static` blocks | Move shared tokens into Master CSS `@theme` blocks. |
| Custom utilities | Tailwind `@utility` blocks | Recreate reusable primitives in Master CSS `@utilities`. |
| Custom variants | Tailwind `@custom-variant` and CSS rules using `@variant` | Recreate shared conditions with Master CSS `@custom-variant` and `@variant`. |
| Composition | Rules using `@apply` | Replace with `@compose` or ordinary CSS declarations. |
| Source policy | `@source`, `@source not`, `@source inline()`, ignored paths | Remove broad scan directives; use Master CSS `@source` and `@source not` only for explicit source exceptions, and `@safelist` or `@blocklist` for candidate policy. |
| Markup | Class strings in HTML, JSX, templates, helper maps, and component props | Convert complete class strings, not fragments. |
| Third-party styling | Plugin CSS, vendor CSS, component-library overrides | Keep regular CSS until a Master CSS replacement is clearly better. |

Use a clean git branch and commit migration batches by feature area. If a screen depends heavily on Tailwind-specific plugins or class generation, leave that screen on Tailwind until its replacement is explicit.

---

## Install Master CSS beside Tailwind
Keep the existing Tailwind import while introducing Master CSS from the stylesheet your app already loads.

```css name=app.css
@import "tailwindcss";
@import "@master/css";
```

For most integrations, no Master CSS source directive is needed here. The integration or CLI scanner discovers ordinary app files; add `@source` only for migrated markup outside that default scope.

Then add the framework or build integration that matches the project. Start from [Installation](/guide/installation), then choose the specific framework guide for Vite, Next.js, Nuxt, Svelte, Astro, Webpack, React, Angular, Laravel, Blazor, Lit, or the CLI.

Do not remove Tailwind at this point. The first milestone is a project that still looks the same while Master CSS can generate rules for new or converted markup.

---

## Choose a rendering mode
Use [Rendering modes](/guide/rendering-modes) before converting many files. The rendering mode controls CSS delivery, not class syntax.

| Project shape | Recommended starting point | Why |
| --- | --- | --- |
| Vite SPA or component app | Runtime rendering | Fast adoption while classes are changing during migration. |
| Static marketing site or content site | Static rendering | Builds a zero-runtime CSS asset from complete class strings. |
| SSR or SSG app with dynamic client state | Progressive rendering | Sends first-page CSS early, then lets the runtime handle later class changes. |
| Highly interactive editor, builder, or data grid | Mixed approach | Keep stable classes in Master CSS and volatile per-element values in CSS variables or inline styles. |

Static rendering depends on complete class strings in scanned source. If a Tailwind component builds class names from fragments, rewrite that part to explicit class maps before expecting static output to be complete.

---

## Translate CSS-first theme values
Tailwind v4 `@theme` variables create utility classes and variants. Master CSS `@theme` variables define design tokens for Master CSS namespaces. The shape is similar, but the generated class syntax is different.

```css name=tailwind.css
@import "tailwindcss";

@theme {
  --color-brand: oklch(0.62 0.2 265);
  --spacing-card: 1.5rem;
  --radius-card: 1rem;
  --breakpoint-dashboard: 72rem;
}
```

```css name=app.css
@import "@master/css";

@theme {
  --color-brand: oklch(0.62 0.2 265);
  --spacing-card: 1.5rem;
  --radius-card: 1rem;
  --breakpoint-dashboard: 72rem;
}
```

```html
<article class="r:card grid-cols:3@md bg:brand p:card">
  ...
</article>
```

Master CSS resolves token names by namespace. A token like `--color-brand` becomes available to color utilities such as `bg:brand`, `fg:brand`, and border color utilities. A token like `--spacing-card` becomes available to spacing utilities such as `p:card`, `gap:card`, and `m:card`.

| Tailwind v4 theme concept | Master CSS equivalent | Notes |
| --- | --- | --- |
| `--color-*` | `--color-*` | Use color tokens with `bg:*`, `fg:*`, `text:*`, border, outline, shadow, and other color-aware utilities. |
| `--spacing-*` or base spacing | `--spacing-*` and `@settings { base-unit: ...; }` | Use named spacing tokens for product decisions and multiplier units such as `4x` for base-unit spacing. |
| `--radius-*` | `--radius-*` | Use with `r:*` and border-radius utilities. |
| `--shadow-*` | `--shadow-*` | Use with `shadow:*` or `box-shadow:*`. |
| `--font-*`, `--text-*`, `--leading-*`, `--tracking-*` | Font, text, leading, and tracking namespaces | Prefer `text:*` when the complete type treatment should be shared. |
| `--breakpoint-*` | `--breakpoint-*` | Creates viewport suffixes such as `@md` or `@dashboard`. |
| `@theme inline` | `@theme inline` | Use when a token is only a utility shorthand and should be written into generated declarations. |
| `@theme static` | `@theme static` | Use when a token or managed keyframes should be emitted up front. |

Use `@theme light` and `@theme dark` when token values should change by mode.

```css name=app.css
@import "@master/css";

@settings {
  mode-trigger: class;
}

@theme light {
  --color-panel: #fff;
  --color-text-body: #111827;
}

@theme dark {
  --color-panel: #111827;
  --color-text-body: #f9fafb;
}
```

```html
<section class="text:body bg:panel">
  ...
</section>
```

Tailwind's default theme and Master CSS's default theme are not the same. Convert custom product tokens first, then review default palette and scale replacements intentionally.

---

## Translate utilities
Start with explicit Master CSS declarations, then shorten them where the local vocabulary is obvious.

| Tailwind v4 pattern | Master CSS pattern | Notes |
| --- | --- | --- |
| `p-6`, `px-4`, `mt-8` | `p:6x`, `px:4x`, `mt:8x` | Multiplier units use the Master CSS `base-unit`. Use named tokens like `p:card` for product spacing. |
| `-mt-4` | `mt:-4x` | The minus sign belongs to the value. |
| `w-full`, `h-screen`, `min-w-0` | `w:full`, `h:100vh`, `min-w:0` | Use native values when they read better. |
| `rounded-lg` | `r:lg` | Radius tokens come from the `radius` namespace. |
| `bg-blue-600`, `text-white` | `bg:blue-60`, `fg:white` | Master CSS preset color steps differ from Tailwind's default palette. |
| `text-lg`, `font-semibold`, `leading-7` | `font:lg`, `font:semibold`, `line-height:1.75rem` | Use `text:*` only when the full type treatment is intended. |
| `flex`, `items-center`, `justify-between` | `flex`, `align-items:center`, `justify-between` | Use built-in semantic utilities or native declaration syntax. |
| `grid-cols-3`, `gap-4` | `grid-cols:3`, `gap:4x` | Grid column helpers and gap utilities are built in. |
| Arbitrary value such as `w-[min(100%,72rem)]` | `w:min(100%,72rem)` | Write native CSS function values directly. |
| Arbitrary property such as `[scroll-margin-top:4rem]` | `scroll-margin-top:4rem` | Master CSS accepts native declaration syntax as a class. |
| Important modifier such as `!mt-0` | `mt:0!` | The important marker goes at the end of the value. |

Example conversion:

```html
<section class="grid gap:lg w:full max-w:5xl mx:auto px:md py:2xl grid-cols:3@md">
  <article class="p:lg r:lg bg:white shadow:sm">
    <h2 class="m:0 font:2xl font:semibold text:neutral">Account</h2>
    <p class="mt:xs text:muted">Review profile settings.</p>
  </article>
</section>
```

When a Tailwind class does not have a short Master CSS alias, use the CSS property directly:
```html
<div class="scroll-margin-top:4rem text-wrap:balance">
  ...
</div>
```
---

## Translate variants and states
Tailwind writes variants before the utility. Master CSS appends selectors and conditions after the declaration.

| Tailwind v4 pattern | Master CSS pattern | Notes |
| --- | --- | --- |
| `hover:bg-blue-700` | `bg:blue-70:hover` | Selector states follow the value. |
| `focus-visible:outline-2` | `outline:2px:focus-visible` | Use native pseudo-class names when they are clearer. |
| `disabled:opacity-50` | `opacity:.5:disabled` | Attribute and pseudo-class selectors are supported. |
| `md:grid-cols-3` | `grid-cols:3@md` | Breakpoint and condition suffixes use `@`. |
| `dark:bg-slate-950` | `bg:slate-95@dark` | Output depends on `mode-trigger`. |
| `motion-safe:animate-spin` | `animation:rotate|slowest|linear|infinite@motion` | Built-in motion variants are `@motion` and `@reduce-motion`. |
| `supports-[backdrop-filter]:...` | `backdrop-filter:blur(12px)@supports(backdrop-filter(0px))` | Use raw `@supports()` for local conditions. |
| `data-[state=open]:...` | `bg:blue-5[data-state=open]` | Native attribute selectors are appended directly. |
| `has-[:checked]:...` | `bg:blue-5:has(:checked)` | Native `:has()` is supported. |

```html
<button class="inline-flex items-center h:10x px:md r:md bg:blue-60 fg:white bg:blue-70:hover opacity:.5:disabled">
  Save
</button>
```

Use `@custom-variant` when a Tailwind custom variant represents shared conditional product language. Keep selector states as selector suffixes or nested selectors.

```css name=app.css
@import "@master/css";

@custom-variant compact {
  @media (width < 48rem) {
    @slot;
  }
}

``````html
<button class="bg:blue-70:hover px:sm@compact">
  Save
</button>
```
For Tailwind `group-*` and `peer-*` patterns, prefer native selectors when possible. Master CSS can target descendants, children, siblings, attributes, `:has()`, and `:of()`, but it does not implement Tailwind's group and peer variant naming.

```html
<article class="bg:blue-5:hover_h2">
  <h2 class="text:neutral">Project</h2>
</article>
```

---

## Replace `@apply` with `@compose`
Tailwind `@apply` inlines Tailwind utilities into a CSS rule. Master CSS uses `@compose` for the same kind of rule-local composition, but the class list must be Master CSS syntax.

```css name=tailwind.css
.btn {
  @apply inline-flex items-center gap-2 rounded-md bg-blue-600 px-4 py-2 text-white shadow-sm;
}
```

```css name=app.css
@import "@master/css";

.btn {
  @compose inline-flex align-items:center gap:xs r:md bg:blue-60 px:md py:xs fg:white shadow:sm;
}
```

Use native declarations when the value is clearer than a class:

```css name=app.css
.form-panel {
  @compose p:lg r:lg bg:white shadow:sm;
  border: 1px solid color-mix(in oklab, currentColor 12%, transparent);
}
```

Use `@reference` in CSS Modules and framework style blocks when the local stylesheet needs project tokens, components, utilities, or variants without including the app CSS again.

```css name=Button.module.css
@reference "../app.css";

.button {
  @compose inline-flex align-items:center px:md h:10x r:md bg:blue-60 fg:white;
}
```

Do not quote `@compose` values. Keep quoted strings, complex content values, and unusual selectors as ordinary CSS declarations or nested CSS.

---

## Migrate custom utilities and components
Tailwind `@utility` creates custom utilities that work with variants. In Master CSS, use `@utilities` for reusable primitives and `@components` for product roles.

```css name=tailwind.css
@utility content-auto {
  content-visibility: auto;
  contain-intrinsic-size: auto 32rem;
}
```

```css name=app.css
@import "@master/css";

@utilities {
  content-auto {
    content-visibility: auto;
    contain-intrinsic-size: auto 32rem;
  }
}
```

```html
<section class="content-auto">
  ...
</section>
```

Use `@components` when the name describes a product UI role rather than a low-level primitive.

```css name=app.css
@components {
  btn {
    @compose inline-flex align-items:center justify-content:center gap:xs px:md py:xs r:md font:sm font:medium;
    @compose bg:blue-60 fg:white;

    &:disabled {
      @compose opacity:.5 pointer-events:none;
    }

    @variant md {
      @compose px:lg;
    }
  }
}
```

```html
<button class="btn">
  Submit
</button>
```

Keep complex third-party overrides as native CSS when utility composition would make the rule harder to read.

---

## Handle dynamic classes
Tailwind and Master CSS static rendering both depend on class names that can be found before the page runs. Complete strings are the safest migration target.

(x) Avoid fragment assembly.

```ts
const className = 'bg:' + tone
```

(o) Use complete class maps.

```ts
const toneClasses = {
  neutral: 'bg:white text:neutral',
  success: 'bg:green-60 fg:white',
  danger: 'bg:red-60 fg:white'
}
```

When only the value is dynamic, keep the class static and pass the runtime value through a CSS variable.

```tsx
function Progress({ value }: { value: number }) {
  return (
    <div className="overflow:hidden h:4x r:full bg:gray-10">
      <div
        className="h:full w:$progress bg:blue-60 transition:width|fast|smooth"
        style={{ '--progress': `${value}%` } as React.CSSProperties}
      />
    </div>
  )
}
```

Most Tailwind `@source` boundaries can be deleted when switching to Master CSS. Keep or add Master CSS `@source` only for source the integration or CLI would not otherwise scan, such as shared workspace packages or external content.

```css name=app.css
@import "@master/css";

@source "../content/**/*.mdx";
@source "../packages/ui/**/*.{ts,tsx}";
@source not "../packages/ui/**/*.stories.tsx";
```

Use `@safelist` for bounded classes that do not exist in scanned source, and `@blocklist` for false positives.

```css name=app.css
@import "@master/css";

@safelist "bg:blue-60 bg:red-60@dark";
@blocklist "debug-*";
```

Tailwind `@source inline()` can generate classes from inline strings and brace expansion. Master CSS `@safelist` is explicit: list the classes the project needs.

---

## Validate the migration
Review each batch as code and UI.

- Run the project's formatter, linter, type check, tests, and production build.
- Use [Code linting](/guide/code-linting) to validate Master CSS class strings and catch conflicts.
- Compare migrated pages against the previous Tailwind version in light mode, dark mode, responsive breakpoints, hover/focus states, and print if relevant.
- Check routes that depended on Tailwind Preflight, default theme values, ring utilities, `container`, official plugins, or group/peer variants.
- Keep Tailwind loaded until converted pages no longer rely on Tailwind classes or plugin output.

After a batch passes checks, remove only the Tailwind utilities that are no longer used. A gradual migration can keep Tailwind and Master CSS side by side for as long as the product needs.

---

## Remove Tailwind
Remove Tailwind only after the converted paths build and visually match the intended design.

1. Delete `@import "tailwindcss"` from the app CSS entry.
2. Remove Tailwind-specific `@theme`, `@utility`, `@custom-variant`, `@variant`, `@apply`, `@source inline()`, and `@plugin` usage that has been replaced.
3. Remove Tailwind packages and PostCSS or Vite integration code when no stylesheet imports Tailwind.
4. Run the full project validation suite.
5. Re-check important pages in the browser.

If a third-party plugin or vendor stylesheet still supplies useful CSS, keep it as regular CSS until there is a product-specific replacement.

---

## Useful references
- [Installation](/guide/installation) for adding Master CSS to a project.
- [Rendering modes](/guide/rendering-modes) for choosing static, runtime, or progressive rendering.
- [Style declarations](/guide/style-declarations) for class syntax.
- [Theme Tokens](/guide/theme) for `@theme` tokens, [Variables and Modes](/guide/variables-and-modes) for modes, and [Conditional Queries](/guide/conditional-queries) for custom variants.
- [CSS directives](/guide/directives) for `@source`, `@safelist`, `@blocklist`, `@compose`, and `@variant`.
- [Scanning latent classes](/guide/scanning-latent-classes) for static source scanning behavior.
- [Global styles](/guide/global-styles#shared-vocabulary) for deciding between markup utilities, theme tokens, custom utilities, and component classes.
- [Code linting](/guide/code-linting) for validating Master CSS classes during migration.

---

## Tailwind CSS capabilities without a direct Master CSS equivalent
| Tailwind capability | Master CSS status | Migration path |
| --- | --- | --- |
| Tailwind class syntax and drop-in compatibility | Master CSS does not read Tailwind class syntax. | Rewrite classes to Master CSS syntax or keep Tailwind loaded until each area is migrated. |
| Tailwind CSS plugin loading through `@plugin` | Master CSS does not execute Tailwind plugins. | Recreate needed output with native CSS, `@theme`, `@utilities`, or `@components`; keep plugin CSS temporarily when needed. |
| Tailwind CSS-first theme resolver behavior | Master CSS has its own token namespaces and utility matching. | Move shared values into Master CSS `@theme` directives and review generated class names. |
| Tailwind `prefix(...)` | Master CSS has no class-prefix mode. | Use Master CSS syntax directly; use `@settings scope` only when generated selectors should be scoped to an app root. |
| Tailwind `@source inline()` brace-expansion safelisting | Master CSS does not provide an equivalent brace-expansion directive. | Use explicit `@safelist` entries and complete class strings. |
| Exact Tailwind Preflight | Master CSS base styles are not Tailwind Preflight. | Compare UI and add native CSS where the project relies on Tailwind reset details. |
| Official plugin outputs such as typography or forms | Master CSS does not automatically recreate Tailwind plugin CSS. | Keep plugin CSS temporarily or author product-specific components and utilities. |
| Tailwind `container` utility semantics | Master CSS `container` creates a container-query boundary. | Use `w:full max-w:* mx:auto px:*` for page wrappers and `container` only for container queries. |
| Tailwind ring utility model | Master CSS does not provide the same ring utility family. | Use `outline:*`, `outline-offset:*`, `box-shadow:*`, or custom utilities. |
| Tailwind group and peer variant syntax | Master CSS does not implement `group-*` or `peer-*` variants. | Use native selectors, `:has()`, `:of()`, and combinators. |

---

# Migrating from Master CSS v1

Source: https://rc.css.master.co/en/guide/migration/v1

Summary: Upgrade a Master CSS v1 project to the current CSS-first setup by auditing packages, entries, rendering mode, theme directives, and class syntax.

Master CSS v1 projects should be upgraded as real application migrations, not as automatic string rewrites. The current documentation is CSS-first: the project CSS entry, `@theme`, `@settings`, `@custom-variant`, managed classes, rendering modes, linting, and language tooling are the source of truth.

This guide avoids unverified one-to-one mappings for old v1 syntax. Audit the old project, install the current packages, then convert setup, theme, and class usage in small reviewed batches.

---

## Migration strategy
Start by making the current toolchain run beside the old setup.

1. Audit installed `@master/*` packages, integrations, runtime/server initialization, CSS entries, and legacy config files.
2. Choose the current [rendering mode](/guide/rendering-modes): runtime, static, or progressive.
3. Install the current integration package for the framework or build tool.
4. Import `@master/css` from the stylesheet the app already loads.
5. Move project settings, tokens, modes, variants, components, and utilities into CSS-first directives.
6. Review class syntax and generated CSS in small batches.
7. Remove old package imports, config files, and initialization code only after the migrated paths validate.

Do not delete the old setup until the new CSS entry can generate styles for at least one migrated route or component family.

---

## Audit checklist
Inspect the v1 project before changing files.

| Area | What to look for | Migration decision |
| --- | --- | --- |
| Packages | `@master/css`, runtime, server, framework packages, language tooling, and ESLint packages | Replace v1 packages with the current package or integration that owns the behavior. |
| Runtime setup | Manual runtime initialization, framework runtime helpers, server rendering hooks, and virtual modules | Move to the current integration guide for the app framework. |
| CSS entries | Imported Master CSS files, generated CSS files, global styles, and old config references | Create a current CSS entry with `@import "@master/css";`. |
| Config and theme | Legacy config files, theme values, breakpoints, modes, aliases, and component definitions | Move project-owned values into `@theme`, `@settings`, `@custom-variant`, `@components`, and `@utilities`. |
| Class syntax | Old class strings, dynamic class builders, custom utilities, selectors, variables, and important flags | Convert intentionally and validate generated CSS. |
| Tooling | Editor extension, language service, lint rules, build commands, and CI scripts | Update after the app compiles with current packages. |

---

## Install the current setup
Use the current [Installation](/guide/installation) guide for the app framework. For Vite-style projects, the current baseline is a CSS entry plus the integration plugin.

```css name=app.css
@import "@master/css";
```

Default source discovery is enough for ordinary app files. Add explicit source directives only when the app needs custom include, exclude, safelist, or blocklist behavior.

Choose the rendering mode before converting many classes:

| Project shape | Recommended starting point |
| --- | --- |
| App already used browser runtime generation | Runtime rendering |
| App wants zero-runtime generated CSS from complete source strings | Static rendering |
| SSR or SSG app needs first-page CSS plus client-side class changes | Progressive rendering |
| Mixed legacy app with dynamic class creation | Start with runtime or progressive, then move stable surfaces toward static-safe class strings |

Use the framework-specific installation guide for exact package names and setup code instead of carrying old initialization forward.

---

## Move config into CSS-first directives
The current project CSS entry owns theme and manifest inputs. Move values out of legacy config shapes and into CSS directives.

```css name=app.css
@import "@master/css";

@settings {
  root-size: 16;
  base-unit: 4;
}

@theme {
  --color-primary: #2563eb;
  --color-body: #172033;
  --spacing-card: 1.5rem;
  --radius-card: .75rem;
  --breakpoint-dashboard: 72rem;
}

@custom-variant dashboard {
  @media (width >= 72rem) {
    @slot;
  }
}
``````html
<section class="grid gap:lg r:card fg:body grid-cols:3@dashboard p:card">
  ...
</section>
```
Keep non-CSS application configuration in JavaScript or TypeScript. Move only values that are part of the styling vocabulary.

---

## Move reusable classes into managed definitions
If the v1 project had reusable component abstractions, migrate them to `@components` when the name describes a product UI role.

```css name=app.css
@components {
  card {
    @compose grid gap:md b:1px|solid|base r:card bg:white shadow:sm p:card;
  }

  btn-primary {
    @compose inline-flex items-center justify-center gap:xs h:10x px:md r:md bg:primary fg:white;
    &:hover { @compose bg:blue-70; }
    &:disabled { opacity: 0.5; }
  }
}
```

```html
<article class="card">
  <button class="btn-primary">Save</button>
</article>
```

Use `@utilities` when the reusable name is a low-level primitive rather than a component role.

```css name=app.css
@utilities {
  content-auto {
    content-visibility: auto;
    contain-intrinsic-size: auto 32rem;
  }
}
```

---

## Review class syntax in batches
Current Master CSS class strings should be complete, explicit, and validated by the current engine.

Use current syntax for states, conditions, native declarations, and CSS variables:

```html
<button class="inline-flex items-center gap:xs h:10x px:md r:md bg:blue-60 fg:white bg:blue-70:hover opacity:.5:disabled">
  Save
</button>
```

```tsx
function Progress({ value }: { value: number }) {
  return (
    <div className="overflow:hidden h:2x r:full bg:gray-10">
      <div
        className="h:full w:$progress bg:blue-60 transition:width|fast|smooth"
        style={{ '--progress': `${value}%` } as React.CSSProperties}
      />
    </div>
  )
}
```

For static rendering, rewrite dynamic class fragments into complete class maps before expecting the scanner to find every class.

---

## Replace old runtime and server wiring
Old runtime or server initialization should be replaced with current integration setup, not patched in place.

- Use the current framework integration when one exists.
- Use [Rendering modes](/guide/rendering-modes) to choose runtime, static, server, or progressive delivery.
- Use `@master/css-runtime` directly only for custom runtime integration work.
- Use `@master/css-server` directly only when the project owns the HTML rendering step.

After replacing setup code, remove old imports, virtual module names, config loaders, and generated assets that are no longer part of the current integration.

---

## Validate the upgrade
- Run the formatter, linter, type check, tests, and production build after each batch.
- Use [Code linting](/guide/code-linting) and the [Language Service](/guide/language-service) to catch invalid classes early.
- Compare generated CSS for migrated components where priority, cascade layers, variables, modes, or important flags matter.
- Test runtime, static, or progressive rendering in the browser depending on the chosen mode.
- Remove old v1 packages, config files, and initialization code only after the migrated app builds and visually matches.

---

## Useful references
- [Installation](/guide/installation) for current package and integration setup.
- [Rendering modes](/guide/rendering-modes) for runtime, static, server, and progressive delivery.
- [Style declarations](/guide/style-declarations) for current class syntax.
- [Theme Tokens](/guide/theme) for `@theme` tokens, [Variables and Modes](/guide/variables-and-modes) for `@settings` and modes, and [Conditional Queries](/guide/conditional-queries) for custom variants.
- [CSS directives](/guide/directives) for `@components`, `@utilities`, `@compose`, `@reference`, and source exceptions.
- [Scanning latent classes](/guide/scanning-latent-classes) for static-safe complete class strings.

---

# Monorepo

Source: https://rc.css.master.co/en/guide/monorepo

Summary: A guide to setting up Master CSS in a modern repository.

## Foreword
The [Language Service](/guide/language-service) and [code linting](/guide/code-linting) both support the monorepo.

By default, language server forms independent workspaces from project CSS entries that import `@master/css`, entries that use the lightweight `@master entry;` marker, or `package.json` files that declare Master CSS package dependencies, independent of the package manager's workspace. The same goes for ESLint, which forms a new working directory based on the location of its configuration file.

Officially integrated packages or extensions automatically read the project CSS entry based on the current running directory. This means that you can start using it with zero setup as long as you create a marked CSS entry in the workspace, or declare a Master CSS dependency in that workspace's `package.json` when using the bundled preset.

---

## One project, one workspace
Inside one `package.json` project, Master CSS supports one workspace instance. That workspace has one project manifest graph, one source-scanning context, and one set of tool integrations for the current project boundary.

Master CSS does not split a single package project into separate utility workspaces from multiple static rendering outputs. For example, do not model one package as independent `admin.css` and `shop.css` scanning areas and expect the language service, ESLint, and build integrations to treat them as separate Master CSS workspaces.

When different applications need cleanly separated static rendering, manifest loading, linting, and editor behavior, create separate projects in the monorepo. A typical structure is `projects/admin` and `projects/shop`, with each project owning its own `package.json`, CSS entry, and integration settings.

(i) This creates separate project boundaries for `projects/admin` and `projects/shop`.

{[
  { name: 'projects', children: [
    { name: 'admin', children: [
      { name: 'package.json' },
      { name: 'eslint.config.js' },

    ]},
    { name: 'shop', children: [
      { name: 'package.json' },
      { name: 'eslint.config.js' },

    ]}
  ]},
  { name: 'package.json' },

]}

This keeps each application's generated CSS, source scanning, diagnostics, and editor state aligned with the same project root. Shared design tokens can still live at the repository root and be imported by each project workspace.

### Share the project manifest source
In each workspace, import shared project CSS files and add workspace-specific definitions after them.
```css name=projects/admin/index.css
@import '@master/css';
@import '../../index.css';

@theme {
  --color-primary: #4f46e5;
}

@components {
  app-shell {
    @compose min-h:100vh bg:surface-base;
  }
}
```
Later definitions in the workspace file can override root options, variables, tokens, utilities, and matching component buckets.

(x) Keep multiple application static rendering targets inside one package project.

{[
  { name: 'app', children: [
    { name: 'admin.css' },
    { name: 'shop.css' },

  ]},
  { name: 'package.json' },

]}

(o) Give each application its own package project and Master CSS workspace.

{[
  { name: 'projects', children: [
    { name: 'admin', children: [
      { name: 'package.json' },

    ]},
    { name: 'shop', children: [
      { name: 'package.json' },

    ]}
  ]},

]}

Finally, using a monorepo and having multiple workspaces doesn't mean you have to create multiple configurations. In most cases, you just need [one workspace entry](#one-workspace-entry).

---

# Motion

Source: https://rc.css.master.co/en/guide/motion

Summary: Create motion with managed keyframes, duration tokens, easing tokens, shorthands, and reduced-motion conditions.

## Overview
Motion explains what changed, where attention should go, and whether an action is still in progress. In CSS, that often means [animations](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_animations), [transitions](https://developer.mozilla.org/en-US/docs/Web/CSS/transition), and [`@keyframes`](https://developer.mozilla.org/en-US/docs/Web/CSS/@keyframes), but the design decision comes first: use motion to give feedback, preserve continuity, clarify hierarchy, or reduce surprise.

Master CSS keeps those decisions close to the element with `animate:*` recipes, native `animation:*` and `transition:*` shorthands, shared `duration` tokens, shared `easing` tokens, managed `@theme` keyframes, and motion preference conditions such as `@motion` and `@reduce-motion`.

        animation:fade|slow|smooth

        animation:zoom|fast|overshoot

---

## Choose motion tokens
Start with the job of the motion, then choose the smallest recipe, duration, and curve that communicates it. Most product UI needs short, quiet motion; long loops and large movement should be reserved for progress, live status, or expressive moments.

### Animation recipes
Animation tokens package a named animation recipe. Use `animate:*` when the preset or project token should own the full animation value.

`animate:*` resolves to `animation: var(--animate-*)`, so updating the token changes every element using that recipe.

### Duration scale
Duration tokens describe rhythm. They are shared by animation and transition utilities, so the same token can make an entrance, hover state, delay, or transition feel like part of one system.

### Easing scale
Easing tokens describe the curve. Use custom easing tokens for product motion language and native CSS values such as `linear`, `ease-in-out`, `steps()`, or `cubic-bezier()` when a one-off curve is clearer.

---

## Namespaces for motion
Motion tokens use focused namespaces so recipes, durations, and easing curves can be mixed inside explicit animation and transition classes.

Keep duration and easing token names readable because they appear inside shorthand class names such as `animation:fade|fast|smooth` and `transition:opacity|normal|standard`.

---

## Use motion tokens
Use `animate:<token>` when the full recipe should come from an `--animate-*` token.

```html
<!-- @MARK animate:fade -->
<div class="animate:fade"></div>

<!-- @MARK animate:zoom -->
<div class="animate:zoom"></div>
```
Use native `animation:*` shorthand when the animation name, duration, easing, direction, iteration count, fill mode, or delay should be visible in markup.

```html
<!-- @MARK animation:fade|fast|smooth -->
<div class="animation:fade|fast|smooth"></div>

<!-- @MARK animation:rotate|slowest|linear|infinite -->
<svg class="animation:rotate|slowest|linear|infinite@motion">...</svg>

<!-- @MARK animation:zoom|faster|overshoot|both -->
<div class="animation:zoom|faster|overshoot|both"></div>
```
Use explicit property utilities when only one part of the motion should change.

```html
<!-- @MARK animation-duration:fast --><!-- @MARK animation-timing-function:crisp -->
<div class="animation-duration:fast animation-timing-function:crisp"></div>
```
---

## Use transition shorthands
Use `transition:*` for state changes. The property, duration, easing, and delay travel together, but the motion only runs when the state changes.

```html
<!-- @MARK transition:opacity|fast|smooth -->
<button class="transition:opacity|fast|smooth">Save</button>

<!-- @MARK transition:transform|slow|overshoot|150ms -->
<div class="transition:transform|slow|overshoot|150ms">...</div>
```
Duration and easing namespaces are shared across `animation-duration`, `animation-delay`, `transition-duration`, `transition-delay`, `animation-timing-function`, `transition-timing-function`, `animation:*`, and `transition:*`. Keep the token names readable because they appear inside shorthand class names.

---

## Respect motion preference
Use `@motion` for non-essential motion so it only runs when the user has not asked the system to reduce motion.

```html
<!-- @MARK animate:pulse@motion -->
<span class="animate:pulse@motion"></span>
```

Use `@reduce-motion` to replace motion-heavy effects with a simpler state.

```html
<!-- @MARK animation:zoom|fast|overshoot@motion --><!-- @MARK animation:none@reduce-motion --><!-- @MARK translate:0@reduce-motion -->
<div class="translate:0@reduce-motion animation:none@reduce-motion animation:zoom|fast|overshoot@motion"></div>
```
Treat reduced motion as a parallel state, not an afterthought. Keep essential feedback visible through opacity, color, text, layout, or an instant end state when movement is removed.

---

## Customize motion tokens
Override motion tokens in the project CSS entry when your product needs a different rhythm. Keep duration and easing names distinct because both namespaces are shared by animation and transition utilities.

```css name=index.css
@theme {
  --duration-enter: 180ms;
  --duration-exit: 120ms;
  --easing-standard: cubic-bezier(.4, 0, .2, 1);
  --easing-emphasized: cubic-bezier(.16, 1, .3, 1);
  --animate-dialog-in: dialog-in var(--duration-enter) var(--easing-emphasized) both;

  @keyframes dialog-in {
    from { translate: 0 0.5rem; opacity: 0; }
    to { translate: 0; opacity: 1; }
  }
}
```

```html
<!-- @MARK animate:dialog-in --><!-- @MARK transition:opacity|exit|standard -->
<dialog class="animate:dialog-in transition:opacity|exit|standard"></dialog>
```

Use named tokens for repeated motion decisions. Keep raw durations and raw curves for one-off timing that does not belong in the system yet.

---

## Avoid motion noise
(x) Everything loops, moves far, and uses playful easing.

```html
<button class="animation:jump|slowest|spring|infinite">Save</button>
```

(o) The element moves only when the state change needs feedback.

```html
<button class="transition:transform|fast|crisp">Save</button>
```

(x) Duration and easing names overlap.

```css
@theme {
  --duration-smooth: 200ms;
  --easing-fast: cubic-bezier(.4, 0, .2, 1);
}
```

(o) Names keep their namespace meaning clear.

```css
@theme {
  --duration-fast: 150ms;
  --easing-smooth: cubic-bezier(.4, 0, .2, 1);
}
```

---

# Native CSS pruning

Source: https://rc.css.master.co/en/guide/native-css-pruning

Summary: Understand how Master CSS prunes unused native CSS class rules from managed stylesheets.

## Overview
Class scanning decides which classes are used. Native CSS pruning uses that usage graph to remove unused native CSS class rules from Master-managed stylesheets.

```txt
source usage + @import "@master/css" stylesheet
  -> used native class names
  -> pruned native CSS
```

A stylesheet becomes Master-managed when it imports `@master/css`. Native class selector rules in that stylesheet are pruned by default.

```css name=src/style.css
@import "@master/css";

.card {
  border: 1px solid rgb(0 0 0 / 12%);
}

.unused {
  color: red;
}
```

If source files use `card` but never use `unused`, the output keeps `.card` and removes `.unused`.

```html name=src/index.html
<!-- @MARK card -->
<article class="card">Card</article>
```

```css name=generated.css
.card {
  border: 1px solid rgb(0 0 0 / 12%);
}
```

Use [Scanning latent classes](/guide/scanning-latent-classes) for the source scanning model. This page focuses on what happens after a stylesheet enters the Master CSS pipeline.

---

## Default pruning
Import `@master/css` from the CSS entry that should receive generated Master CSS. Ordinary class selector rules in that entry are pruned against detected source classes.

```css name=src/app.css
@import "@master/css";

.app-shell {
  min-height: 100dvh;
}

.debug-outline {
  outline: 1px solid red;
}
```

The Master import is replaced by generated CSS. It is not emitted as a browser-facing package import by the integration.

```css name=output.css
.app-shell {
  min-height: 100dvh;
}
```

Use `@preserve native;` when the stylesheet contains class names that are intentionally invisible to the scanner.

```css name=src/vendor-overrides.css
@import "@master/css";
@preserve native;

.cms-card {
  color: red;
}

.injected-by-payment-widget {
  color: blue;
}
```

This stylesheet is still Master-managed, but its native CSS is preserved as written.

For exact stylesheet directive syntax, see [CSS directives](/guide/directives).

---

## Import graph
When a Master-managed `.css` entry imports local relative `.css` files, those imports are expanded into the same pruning graph.

```css name=src/style.css
@import "@master/css";
@import "./styles/cards.css";
@import "./styles/buttons.css";

.page {
  display: grid;
}
```

```css name=src/styles/cards.css
.card {
  border: 1px solid rgb(0 0 0 / 12%);
}

.unused-card {
  color: red;
}
```

```css name=src/styles/buttons.css
.button {
  display: inline-flex;
}

.unused-button {
  color: blue;
}
```

```tsx name=src/App.tsx
export function App() {
  return (
    <main className="page">
      <article className="card">
        <button className="button">Save</button>
      </article>
    </main>
  )
}
```

The compiled native CSS keeps `.page`, `.card`, and `.button`, then removes `.unused-card` and `.unused-button`.

```txt
src/style.css
  -> imports @master/css
  -> imports ./styles/cards.css
  -> imports ./styles/buttons.css
  -> pruned as one root graph
```

Only local relative `.css` imports are expanded this way. Bare package imports, remote imports, and non-CSS imports stay in the bundler's normal CSS pipeline unless they are one of the Master CSS entry imports.

---

## Root scope
Pruning is root-scoped. The stylesheet directly processed by the integration is the root; imported files are dependencies of that root.

```txt
app/a/a.css
  -> imports ../shared.css

app/b/b.css
  -> imports ../shared.css
```

```css name=app/a/a.css
@import "@master/css";
@import "../shared.css";

.a-page {
  color: red;
}
```

```css name=app/b/b.css
@import "@master/css";
@import "../shared.css";

.b-page {
  color: blue;
}
```

```css name=app/shared.css
.shared-card {
  border: 1px solid rgb(0 0 0 / 12%);
}

.only-used-in-b {
  color: blue;
}
```

If `app/a/page.tsx` uses `a-page shared-card`, then the `a.css` output keeps `.a-page` and `.shared-card`, but removes `.b-page` and `.only-used-in-b`.

If `app/b/page.tsx` uses `b-page shared-card only-used-in-b`, then the `b.css` output can keep `.b-page`, `.shared-card`, and `.only-used-in-b`.

The same imported file can therefore be pruned differently under different roots. If `shared.css` is also imported directly by JavaScript or by a framework route, then `shared.css` becomes its own root only when that direct import enters the Master CSS pipeline.

---

## Scoped scanning
By default, a pruned stylesheet uses the global scanner scope. Add `@source`, `@source not`, `@safelist`, and `@blocklist` inside the stylesheet graph when that root needs a narrower or wider usage graph.

```txt
app/a/a.css
  -> scans app/a/page.tsx
  -> imports ../shared.css

app/b/b.css
  -> scans app/b/page.tsx
  -> imports ../shared.css
```

```css name=app/a/a.css
@import "@master/css";
@source "./page.tsx";
@import "../shared.css";

.a-card {
  color: red;
}

.b-card {
  color: blue;
}
```

```css name=app/b/b.css
@import "@master/css";
@source "./page.tsx";
@import "../shared.css";

.a-card {
  color: red;
}

.b-card {
  color: blue;
}
```

```css name=app/shared.css
@safelist "shared-card";
@blocklist "debug-*";

.shared-card {
  border: 1px solid rgb(0 0 0 / 12%);
}

.debug-outline {
  outline: 1px solid red;
}
```

`./page.tsx` is resolved relative to the CSS file that declared it. The directives in `shared.css` are merged into whichever root imports it, so `shared-card` is included for both roots and `debug-*` is blocked for both roots.

```tsx name=app/a/page.tsx
export default function Page() {
  return <article className="a-card shared-card">A</article>
}
```

```tsx name=app/b/page.tsx
export default function Page() {
  return <article className="b-card shared-card">B</article>
}
```

The `a.css` output keeps `.a-card` and `.shared-card`. The `b.css` output keeps `.b-card` and `.shared-card`. Both roots remove `.debug-outline` because the imported `@blocklist "debug-*";` directive belongs to each root scope.

If a root must scan a file, make sure no `@source not` pattern removes it.

```css name=app/a/a.css
@import "@master/css";
@source "./**/*.tsx";
@source not "./**/*.stories.tsx";
```

---

## Rule filtering
Native CSS pruning filters class selector rules by detected usage. A class rule is kept when its selector branch references a class that is used.

```css name=src/style.css
@import "@master/css";

body {
  margin: 0;
}

.card,
.unused:hover {
  border: 1px solid rgb(0 0 0 / 12%);
}

@media (width >= 48rem) {
  .card .title {
    font-weight: 700;
  }

  .debug-card {
    outline: 1px solid red;
  }
}
```

```html name=src/index.html
<!-- @MARK card title -->
<article class="card">
  <h2 class="title">Card</h2>
</article>
```

The output keeps `body`, `.card`, and `.card .title`. It removes `.unused:hover` and `.debug-card`.

```css name=output.css
body {
  margin: 0;
}

.card {
  border: 1px solid rgb(0 0 0 / 12%);
}

@media (width >= 48rem) {
  .card .title {
    font-weight: 700;
  }
}
```

Rules without class selectors, such as `body`, `html`, `:root`, and keyframes, are not class-usage rules and are preserved. Empty at-rule blocks are removed after their unused class rules are pruned.

---

## Manifest references
Pruned native CSS can reference variables and keyframes from the project CSS entry graph. When a kept native rule uses `var(--*)` or a manifest animation name, Master CSS includes the required manifest output.

```css name=index.css
@theme {
  --color-primary: #175cff;
}

@keyframes fade-in {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}
```

```css name=src/style.css
@import "@master/css";

.notice {
  color: var(--color-primary);
  animation-name: fade-in;
}

.unused-notice {
  color: var(--color-primary);
}
```

```html name=src/index.html
<!-- @MARK notice -->
<p class="notice">Saved</p>
```

The kept `.notice` rule pulls in `--color-primary` and `@keyframes fade-in`. `.unused-notice` is removed, so it does not keep anything alive by itself.

---

## Included classes
If a native class is used by a bounded external source, include it explicitly so pruning keeps the rule.

```css name=src/dialog.css
@import "@master/css";
@safelist "dialog-open dialog-closing";

.dialog-open {
  overflow: hidden;
}

.dialog-closing {
  pointer-events: none;
}
```

Use this for known class contracts. Do not use it as a replacement for putting normal application classes in source.

---

## Checklist
- Import `@master/css` from CSS entries that should receive generated Master CSS and native CSS pruning.
- Add `@preserve native;` to Master-managed entries whose native CSS must be preserved.
- Remember that local relative `.css` imports follow the root's pruning decision.
- Use `@safelist` for native classes used by bounded external systems.
- Keep vendor, CMS, or third-party styles outside Master-managed roots unless their class usage is visible to the scanner or protected with `@preserve native;`.

---

# Optimizing critical resources

Source: https://rc.css.master.co/en/guide/preload-critical-resources

Summary: The runtime engine plays a crucial role in the initial display of a page.

---

## Preload runtime engine
Without preload hints, the CDN runtime script and its default manifest can be discovered too late.
Runtime rendering may experience delays in downloading and initializing until the first contentful paint if [runtime-critical resources](/guide/rendering-modes#runtime-rendering) are discovered late.

Conceptual request waterfall for the CDN runtime script and default manifest. The marker shows when the page can first paint after critical runtime resources are ready; positions are illustrative, not measured network data.

Preload the CDN runtime with `as="script"`. The CDN runtime imports its split default manifest as a JSON module before starting; preload that JSON module with `modulepreload`, `as="json"`, and `crossorigin` so the runtime can reuse the module.

(o) Use `html <link rel="preload">` and `html <link rel="modulepreload">` to preload the critical resources.
```html
<!DOCTYPE html>
<html lang="en" hidden>
<head>
  <link rel="preload" as="style" href="https://cdn.master.co/css@rc/base.css">
  <link rel="preload" as="script" href="https://cdn.master.co/css-runtime@rc"> <!-- [!code highlight] -->
  <link rel="modulepreload" as="json" crossorigin href="https://cdn.master.co/css-runtime@rc/default-manifest.json"> <!-- [!code highlight] -->
  <link rel="stylesheet" href="https://cdn.master.co/css@rc/base.css">
  <script src="https://cdn.master.co/css-runtime@rc"></script>
</head>
</html>
```
With these preload hints in place, the runtime script and default manifest requests start during document parsing and download in parallel with the stylesheet. The parser and runtime later reuse the preloaded script and JSON module instead of waiting on new requests.

You are telling the browser that you would like to fetch it sooner than the browser would otherwise discover it.

---

## Preload runtime project manifests
Official runtime integrations can split the project manifest into a hashed JSON asset in production. The runtime must load that manifest before it can interpret project tokens, modes, components, utilities, and variants from your CSS entry graph.

(o) Let runtime-only integrations preload the project manifest JSON.
```html
<!DOCTYPE html>
<html lang="en" hidden>
<head>
  <link rel="modulepreload" as="json" crossorigin href="/assets/master-css-manifest.<hash>.json"> <!-- [!code highlight] -->
  <script type="module" src="/assets/main.<hash>.js"></script>
</head>
</html>
```

The modulepreload starts the JSON module request while the browser is still parsing the document. The runtime module later imports `virtual:master-css-manifest`, whose facade imports the same JSON module. Matching `as="json"` and `crossorigin` lets the browser reuse the preloaded module instead of issuing a second request.

(i) This optimization applies to pure runtime rendering. Progressive rendering already has critical CSS in `style#master-css`, so its page hydration manifest should not be preloaded.

### Choose the right manifest JSON
Master CSS uses different JSON files for different handoff points:

| JSON file | Used by | Preload? |
| --- | --- | --- |
| CDN default manifest | CDN runtime-only pages that use the packaged default preset manifest. | Yes, when using the CDN runtime. |
| Project manifest asset | Official runtime integrations that emit `master-css-manifest.<hash>.json` for `virtual:master-css-manifest`. | Yes, in pure runtime mode when the integration injects the runtime. |
| Page hydration manifest | Progressive and pre-rendered pages that already contain `style#master-css`. | No. The browser can paint without it. |

---

## Defer runtime engine
(o) Defer the runtime engine, because the critical CSS has already been pre-rendered on the page.
```html
<!DOCTYPE html>
<html lang="en">
<head>
  <!-- @MARK defer -->
  <script type="module" src="/main.js"></script>
</head>
</html>
```

(x) Do not preload the runtime engine in progressive rendering mode.
```html
<!DOCTYPE html>
<html lang="en">
<head>
  <link rel="modulepreload" href="/main.js"> <!-- [!code --] -->
</head>
</html>
```

---

## Do not preload page hydration manifests
Progressive rendering can externalize the page hydration manifest:

```html
<style id="master-css" data-master-css-hydration-manifest="/_master-css/hydration/master-css-hydration.<hash>.json">...</style>
```

(x) Do not add a preload hint for this JSON file.

The page hydration manifest is runtime handoff data. It lets the runtime adopt the rules that already exist in `style#master-css`, but it is not required for the browser to paint the first screen. Let the runtime import it when hydration starts. If that import fails or the data is invalid, the runtime rebuilds from connected DOM classes.

This is different from runtime project manifests. A runtime-only page needs its project manifest before it can interpret classes. A progressive page already has the first-response rules in `style#master-css`, so its page hydration manifest only describes CSS that was already rendered into that one HTML response.

---

## Benefits
Preloading critical assets can improve the following metrics:

1. **First Contentful Paint (FCP)**: Preloading critical assets helps accelerate the loading of essential scripts, such as JavaScript, resulting in faster FCP. This means that the main content of the webpage can be displayed more quickly in the user's browser, enhancing their perception and experience.
2. **First Meaningful Paint (FMP)**: By preloading critical scripts, the browser can start parsing and rendering the script earlier, leading to faster FMP. This allows users to see meaningful content more rapidly, improving the visual presentation of the page.
3. **Time to Interactive (TTI)**: Preloading critical scripts reduces waiting time for users, resulting in a faster Time to Interactive. When the critical script has been downloaded and is ready, users can interact with the webpage more quickly, providing a better user experience.

Preloading critical scripts enhances the download and execution speed of the scripts, thereby improving metrics such as First Contentful Paint, First Meaningful Paint, and Time to Interactive.

---

# Rendering Modes

Source: https://rc.css.master.co/en/guide/rendering-modes

Summary: Understand how the rendering modes of Master CSS work and enhance your website's performance.

## Overview
Master CSS integrations choose how generated rules reach the browser. The same project CSS entry graph can be used by runtime rendering, static rendering, server rendering, and progressive hydration.

| Mode                      | Description                                                                                                                                           |
|---------------------------|-------------------------------------------------------------------------------------------------------------------------------------------------------|
| `'runtime'`               | Starts `CSSRuntime` in the browser, loads the project manifest, observes connected elements, and ensures generated rules as class names appear. |
| `'static'`                | Scans source files, replaces `@import '@master/css'` in managed CSS entries, prunes native CSS, and generates CSS from the project CSS entry graph. |
| `'pre-render'`            | Renders HTML output and injects the CSS required by the rendered class names. This mode is usually owned by SSR/SSG integrations. |
| `'progressive'`           | Combines server-rendered first-page CSS, a hydration manifest, and client-side runtime adoption for classes that appear after the initial HTML. |

Every mode uses the same cascade layer model. The default `@master/css/base.css` stylesheet declares `@layer theme, base, defaults, components, utilities;`, while generated rules are emitted into layer blocks without redeclaring the global order.

Runtime and progressive rendering optimize what CSS is delivered up front. They do not make browser style calculation free: when a highly interactive screen creates many first-time utility rules during one interaction, the browser still needs to account for those new stylesheet rules before it can paint the updated DOM.

For page-level CSS size and delivery measurements, see the [benchmarks](/guide/benchmarks).

---

## Runtime Rendering
Master CSS Runtime relies on the lifecycle of individual elements. Only the Master CSS class names connected to the DOM tree will generate corresponding CSS rules so *browsers can calculate with minimal and precise CSS rules*.

  <figcaption>The runtime lifecycle of a Master CSS class</figcaption>

The runtime engine uses the standard [Web APIs - Mutation Observer](https://developer.mozilla.org/zh-TW/docs/Web/API/MutationObserver) to observe DOM class changes at runtime. It keeps active DOM usage, generated rule cache, and retained mutation rules as separate states so the browser does not need to delete and recreate CSS rules during every interaction.

It is packaged as [`@master/css-runtime`](https://www.npmjs.com/package/@master/css-runtime). Most applications start it through a framework integration or a bundler entry:

```ts name=src/main.ts
import CSSRuntime from '@master/css-runtime'
import manifest from 'virtual:master-css-manifest'
import emittedGlobals from 'virtual:master-css-emitted-globals'

CSSRuntime.create({ manifest, emittedGlobals }).observe()
```

Direct browser delivery is also possible when a page is not bundled, but it is not the only runtime path:

```html
<head>
  <link rel="stylesheet" href="/assets/master-css-base.css">
  <script type="module" src="/assets/master-css-runtime.js"></script>
</head>
```

The following continuous DOM manipulation takes you to understand the behavior of the CSS runtime when the browser is running:

    #### Insert an element with a Master CSS class name into the DOM
    ```js
    const h1 = document.createElement('h1')
    // @MARK text-center
    h1.className = 'text-center'
    ```
    A new node `html <h1>` is inserted into the DOM tree:
    ```html
    <h1 class="text-center">Hello World</h1> <!-- [!code ++] -->
    ```
    The runtime engine observes a new node with the class `text-center` and ensures the corresponding CSS rule:
    ```css
    .text\:center { /* [!code ++] */
      text-align: center /* [!code ++] */
    } /* [!code ++] */
    ```

    #### Added Master CSS class names to elements in links
    ```js
    // @MARK font:6xl
    h1.classList.add('font:6xl')
    ```
    Add class name `font:6xl` to `html <h1>`
    ```html
    <!-- @MARK font:6xl -->
    <h1 class="font:6xl text-center">Hello World</h1>
    ```
    The runtime engine observes that `html <h1>` adds the new class name `font:6xl` and ensures the corresponding CSS rule:
    ```css
    .font\:6xl { /* [!code ++] */
      font-size: 3rem /* [!code ++] */
    } /* [!code ++] */

    .text\:center {
      text-align: center
    }
    ```

    #### Remove the Master CSS class name from the connected element
    ```js
    // @MARK text-center
    h1.classList.remove('text-center')
    ```
    Remove class name `text-center` from `html <h1>`
    ```html
    <h1 class="font:6xl text-center">Hello World</h1>
    ```
    The runtime engine observes that the class name `text-center` is removed from `html <h1>` and updates active usage immediately. Mutation-driven cleanup may retain the generated rule briefly so a fast remove/re-add does not churn the browser CSSOM. After retained-rule cleanup, the unused rule can be deleted:
    ```css
    .font\:6xl {
      font-size: 3rem
    }

    .text\:center { /* [!code --] */
      text-align: center /* [!code --] */
    } /* [!code --] */
    ```

    #### Removes an element with a Master CSS class from the DOM
    ```js
    h1.remove()
    ```
    Remove the `html <h1>` with class `font:6xl`
    ```html
    <h1 class="font:6xl">Hello World</h1> <!-- [!code ++] -->
    ```
    The runtime engine observes that the `html <h1>` element with the class name `font:6xl` is removed and updates active usage immediately. If no connected element still uses `font:6xl`, the generated rule can be retained until idle cleanup or an explicit forced cleanup removes it:
    ```css
    .font\:6xl { /* [!code --] */
      font-size: 3rem /* [!code --] */
    } /* [!code --] */
    ```

    #### All active DOM class counts have been removed
    At this point the DOM no longer uses those Master CSS classes. Runtime CSSOM cleanup is allowed to happen later for MutationObserver-driven removals, while direct `deleteClassRules(...)` calls still remove rules synchronously.

Due to its runtime execution nature, you can modify the class name directly in the browser by inspecting the element and seeing its changes.

### Running style sheet
Where are the generated CSS rules inserted? The runtime engine appends `html <style id="master-css">` in `html <head>` during initialization:
```html
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="/assets/master-css-base.css">
  <script type="module" src="/main.js"></script>
  <style id="master-css"></style> <!-- [!code highlight] -->
</head>
```

It uses the `.insertRule()` and `.deleteRule()` methods of [Web APIs - CSSStyleSheet](https://developer.mozilla.org/en-US/docs/Web/API/CSSStyleSheet) to manipulate native CSS rules. The text content of `style#master-css` is not a reliable live view after the runtime starts; inspect the stylesheet object when you need to see the current CSSOM.

Still, you can detect the CSS rules in the current style sheet like this:
```js
const sheet = document.querySelector('style[id="master-css"]').sheet
console.log(sheet.cssRules)
```

When runtime code needs project tokens, modes, or component definitions, load the compiled runtime inputs from the integration. `virtual:master-css-manifest` resolves the canonical project-level manifest discovered from the CSS entry, and `virtual:master-css-emitted-globals` records variables and keyframes that the entry already emitted.

```js
import CSSRuntime from '@master/css-runtime'
import manifest from 'virtual:master-css-manifest'
import emittedGlobals from 'virtual:master-css-emitted-globals'

CSSRuntime.create({ manifest, emittedGlobals }).observe()
```

The manifest tells the runtime how to interpret project-specific tokens, modes, components, utilities, and variants. The `emittedGlobals` object is narrower: it only records variables and keyframes that the build already emitted from the CSS entry output. Dynamic classes can still be generated later, but shared global CSS is not duplicated when those classes reference an already-loaded variable or animation.

### Runtime state
Runtime rendering separates the question "is this class currently used by the DOM?" from "does the runtime already have generated CSS for this class?"

| State | Meaning |
| --- | --- |
| `classCounts` | Active connected DOM usage. It updates immediately when observed elements are added, removed, or change class names. |
| `classUtilities` | Generated rule cache. It can include rules that are active, warmed, hydrated, or retained for reuse. |
| `retainedClassNames` | Mutation-generated rules that are no longer used by the DOM but are intentionally kept for idle cleanup or fast reuse. |

Direct runtime APIs are rule APIs, not DOM usage APIs. `ensureClassRules(...classNames)` synchronously generates or reuses rules and is the explicit warming path before inserting a large dynamic view. `deleteClassRules(...classNames)` synchronously removes generated rules and bypasses retention. The MutationObserver path is more conservative: removed DOM classes leave `classCounts` immediately, then their generated rules can be retained and cleaned later outside the interaction window.

### Interaction-heavy screens
Runtime and progressive rendering work best when the classes used during interaction are already generated, hydrated, retained, or warmed. A large interaction that inserts many elements with first-time class names still asks the browser to process DOM changes and new CSS rules in the same frame window.

For highly interactive UI such as editors, builders, data grids, virtualized lists, drag surfaces, or dashboards with many per-item values, prefer a mixed strategy:

- Keep stable layout, typography, state, and component classes in Master CSS.
- Warm predictable runtime classes with `ensureClassRules(...)` before inserting a large dynamic view.
- Use inline styles or CSS variables for volatile per-element values such as coordinates, dimensions, transforms, or user-generated colors.
- Use top-level native CSS or component-authored CSS for large repeated interaction states that are easier to model as selectors than as many runtime-generated utilities.

This does not change class syntax or cascade semantics. It is a delivery choice: avoid making the browser generate a large number of new utility rules during the same user interaction that mutates a large DOM subtree.

### Project manifest delivery
`virtual:master-css-manifest` is the project-level runtime input. It represents the compiled CSS entry graph, so it can include project tokens, modes, component definitions, utility definitions, variants, and managed keyframes.

During development, integrations can serve that manifest as an inline virtual module. In production runtime builds, official integrations may emit it as a hashed JSON asset and make the virtual module import that asset before the runtime starts. Runtime-only pages need this JSON before they can interpret classes, so integrations that inject the runtime can also add:

```html
<link rel="modulepreload" as="json" crossorigin href="/assets/master-css-manifest.<hash>.json">
```

This does not change generated CSS or cascade order. It only moves discovery of the project manifest earlier so the runtime's later import can reuse the browser's preloaded module.

---

## Progressive Rendering
Master CSS Progressive Rendering works by pre-rendering page CSS on the server or during a static build and injecting it into the page HTML.
On the client, the [CSS runtime](#runtime-rendering) hydrates these rules into a virtual stylesheet, initializing a lifecycle-aware system that can respond to class name changes in real time. Progressive hydration depends on two pieces of data: `style#master-css` contains the pre-rendered CSS that can paint the first screen, and the page hydration manifest describes the generated rules that style block contains.

  <figcaption>Server-side pre-rendering and client-side hydration process</figcaption>

Static and pre-rendered outputs use an external page hydration manifest by default:

```html
<style id="master-css" data-master-css-hydration-manifest="/_master-css/hydration/master-css-hydration.<hash>.json">...</style>
```

The `/_master-css/hydration/` path above is the integration-neutral route. Framework adapters can place the same artifact under their own static asset namespace. In Next.js, `@master/css.next` uses:

```html
<style id="master-css" data-master-css-hydration-manifest="/_next/static/master-css/hydration/master-css-hydration.<hash>.json">...</style>
```

This keeps the first-render CSS in the HTML while moving the runtime handoff data into a cacheable route-level JSON file. The browser can paint from `style#master-css` without waiting for the manifest request. When the runtime starts, it imports the manifest as a JSON module, adopts the existing native CSS rules, and continues observing dynamic classes. If the manifest is missing, invalid, fails to import, or no longer matches `style#master-css`, the runtime safely rebuilds the stylesheet from connected DOM classes.

After adoption, progressive rendering uses the same runtime state model as runtime rendering. Hydrated rules become runtime-managed rule objects, new classes can be generated later, and mutation-driven removals can enter the retained-rule cache before idle cleanup. This keeps the first paint deterministic while still avoiding repeated CSSOM insertion/deletion during interactive updates.

Inline `script#master-css-hydration-manifest` is still supported for compatibility and for dynamic SSR responses that cannot write a stable public JSON asset. Pages with no generated rules do not need a hydration manifest pointer.

Do not preload the page hydration manifest. It is different from the runtime project manifest: the browser already has the CSS needed for first paint in `style#master-css`, and the hydration manifest only tells the runtime how to adopt those existing rules.

### Pre-rendering — SSG, SSR

For example, the following HTML:
```html name="index.html"
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <script type="module" src="/main.js"></script>
</head>
<body>
  <h1 class="font:5xl font:heavy">Hello World</h1>
</body>
```
Render the HTML:
```ts name=server.ts
import { readFileSync } from 'node:fs'
import { render } from '@master/css-server'
import manifest from 'virtual:master-css-manifest'

const indexHTML = readFileSync('./index.html', 'utf-8')

const { html, hydrationManifest } = render(indexHTML, manifest, {
  hydrationManifest: {
    type: 'external',
    src: '/_master-css/hydration/master-css-hydration.<hash>.json'
  }
})
```
The server renderer parses the HTML and generates the internal style sheet plus a page hydration manifest. Official static and pre-render integrations write `hydrationManifest` to a hashed JSON asset and attach the URL to `style#master-css`:
```html
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <script type="module" src="/main.js"></script>
  <style id="master-css" data-master-css-hydration-manifest="/_master-css/hydration/master-css-hydration.<hash>.json"> /* [!code ++] */
    .font\:5xl { /* [!code ++] */
      font-size: 2.5rem /* [!code ++] */
    } /* [!code ++] */
  </style> <!-- [!code ++] -->
</head>
<body>
  <!-- @MARK font:5xl -->
  <h1 class="font:5xl">Hello World</h1>
</body>
```
What benefits does this bring? The server renderer generates the initial page CSS (**5kB**) based on the class names used in the HTML, instead of the entire application source code (**500kB**).

This approach allows for a **minimal, deterministic CSS text** that is injected into the HTML, enabling fast page loads and minimal CSS output. Externalizing the hydration manifest does not make first paint faster by itself; the first paint still comes from the inline `style#master-css`. It reduces HTML transfer and parse pressure as the number of generated rules grows, and lets the route-level handoff data be cached separately.

### CSS hydration
Master CSS hydration is the process that restores the server-side or build-time rendered CSS on the client. This includes reusing the pre-rendered CSS structures, persisting the application CSS state, and reconstructing the style sheet into virtual memory.

  <figcaption>Master CSS Hydration — Creates virtual rules from DOM style sheet</figcaption>

The runtime reads explicit `hydrationManifest` options first. Without an explicit option, `CSSRuntime.create()` reads inline `script#master-css-hydration-manifest` for compatibility. When `runtime.needsHydrationManifest()` is true, call `await runtime.loadHydrationManifest()` before `runtime.observe()` to import the URL from `style#master-css[data-master-css-hydration-manifest]`.

Each manifest rule stores the class name, layer, priority, selector text, generated CSS text, and any referenced variables or animations. During hydration, the runtime compares that IR with the native rules already present in `style#master-css`. When they match, it attaches those native CSS rules to runtime-managed rule objects instead of regenerating them.

Once hydrated, Master CSS can efficiently detect new or removed class names and update styles accordingly, without needing to reparse or regenerate previously defined rules. Classes that were not present in the initial HTML are still generated at runtime. Classes removed after hydration leave `classCounts` immediately; their generated rules may be retained briefly and removed later by idle cleanup or by an explicit `flushRetainedClassRules()` call.

The [CSS runtime](#runtime-rendering) then takes over to detect any changes in dynamic class names.

This page hydration manifest is different from the project manifest and `emittedGlobals`. The project manifest tells the runtime how to interpret tokens, modes, components, utilities, and variants. `emittedGlobals` records variables and keyframes that the CSS entry already emitted. The page hydration manifest only describes the CSS rules that were generated into one rendered page.

---

## Static Rendering
Static rendering is a zero-runtime rendering mode where the build scans source files, finds complete Master CSS class strings, validates them with the active engine manifest, and writes the resulting CSS before deployment.

The source scanner does not observe the DOM and does not execute application code. Its input is source text, CSS entries, scanner options, and the compiled project manifest. Its output is a CSS asset that the browser loads like any other stylesheet.

The CSS entry point is explicit: import `@master/css` from the stylesheet that should receive generated Master CSS. In static mode, integrations replace that import with generated CSS and treat the same stylesheet as a native CSS pruning root.

    #### Load the scanning context
    The integration creates a source scanner with its default source discovery, optional source directives, optional fixed classes, and the project CSS entry graph. During development, integrations use their host watch, HMR, or invalidation system to reset or update this context.

    ```css name=index.css
    @import '@master/css';
    ```

    Add `@source` only when this stylesheet must include source outside the integration's normal scan path or define a scoped native CSS pruning root.

    #### Scan source text
    Source files such as `.html`, `.js`, `.jsx`, `.ts`, `.tsx`, `.vue`, `.svelte`, `.astro`, `.md`, and `.mdx` are scanned as text. The scanner collects candidate class strings from markup and string literals, then filters obvious non-class tokens before validation.

    ```html name=src/index.html
    <!-- @MARK btn text-center -->
    <button class="btn text-center">Save</button>
    ```

    #### Validate candidates
    Each candidate is passed through the Master CSS engine. Valid classes insert rules into the same layers used by runtime and server rendering; invalid candidates are cached and skipped on later scans.

    ```css name=index.css
    @components {
      btn {
        @compose inline-flex px:md;
      }
    }
    ```

    With this project manifest, `btn` is valid because the project defines it, and `text-center` is valid because it is a built-in utility. Manifest-defined classes are still on-demand: defining `btn` does not emit anything until `btn` appears in scanned source or in the scanner's fixed class list.

    #### Compose final CSS
    The generated stylesheet contains the valid Master CSS rules, retained native CSS from managed style entries, and any referenced variables or keyframes needed by those rules.

    ```css name=generated.css
    @layer components {
      .btn {
        display: inline-flex;
        padding-left: 1rem;
        padding-right: 1rem;
      }
    }

    @layer utilities {
      .text\:center {
        text-align: center;
      }
    }
    ```

### Generated stylesheet entry
In static mode, import the generated stylesheet from the stylesheet your framework already bundles.

```css name=src/style.css
@import '@master/css';
```

Use one `@import '@master/css'` entry for each generated stylesheet root. That import is also the insertion point for generated Master CSS, default base styles, theme variables, and utilities required by detected classes.

`@import '@master/css'` may be placed anywhere inside the top-level CSS import block. Ordinary CSS imports in that block are still emitted before generated Master CSS; keep the Master CSS import before normal style rules.

### Native CSS entries
Regular CSS outside Master CSS directives remains native CSS. When a stylesheet imports `@master/css`, integrations treat that stylesheet as a pruning root by default and prune class selectors against detected source classes.

Those native rules can also pull matching theme variables referenced by `var(--*)` and managed `@theme` keyframes referenced by animation declarations. Add `@preserve native;` when native CSS must be preserved.

```css name=src/style.css
@import '@master/css';

.native-card {
  border: 1px solid rgb(0 0 0 / 12%);
}

.unused-card {
  color: red;
}
```

```html
<!-- @MARK btn -->
<article class="btn native-card">Card</article>
```

The generated CSS contains `.native-card` and `.btn` when both classes are scanned. `.unused-card` is removed because no scanned source uses it.

### Dynamic class limitations
Static rendering depends on complete class strings that exist in scanned source files. It cannot evaluate conditions, run helper functions, resolve remote content, or predict classes assembled by string concatenation.

(x) Do not construct partial class names.
```tsx
const className = 'bg:' + (error ? 'red': 'green')
```
(o) Map states to complete class names.
```tsx
const className = error ? 'bg:red' : 'bg:green'
```
(o) Pass dynamic values through CSS variables while keeping the class static.
```tsx
<div className="font-size:$size@sm" style={{ '--size': size }}></div>
```

For the full source scanning model, see [Scanning latent classes](/guide/scanning-latent-classes). For native CSS pruning, see [Native CSS pruning](/guide/native-css-pruning).

---

## Shared rendering pipeline
Rendering modes change delivery, not the authoring model. The source of truth is the project CSS entry graph. A stylesheet becomes part of that graph when it contains a top-level `@master entry;` marker or imports `@master/css`. Use `@master entry;` when the file only needs to declare manifest input, and use `@import '@master/css'` when the stylesheet should also receive generated CSS in static builds.

```css name=index.css
@import '@master/css';

@settings {
  root-size: 16;
}

@theme {
  --color-primary: #4f46e5;
  --breakpoint-md: 48rem;

  @keyframes fade-in {
    from { opacity: 0; }
    to { opacity: 1; }
  }
}

@custom-variant motion-safe {
  @media (prefers-reduced-motion: no-preference) {
    @slot;
  }
}

@components {
  btn {
    @compose inline-flex items-center px:md py:xs r:md;
    background: var(--color-primary);
  }
}
```

These CSS-first directives are manifest inputs. The compiler lowers tokens, managed keyframes, settings, variants, components, utilities, and native composed rules into a `MasterCSSManifest`. Runtime rendering, static rendering, server rendering, language tooling, linting, and framework integrations all consume that same IR, so class syntax and cascade behavior stay consistent even when CSS is delivered differently.

| Artifact | Produced by | Used by | Purpose |
| --- | --- | --- | --- |
| CSS entry graph | Project stylesheets with `@import '@master/css'` or the lightweight `@master entry;` marker | Compiler, integrations, static renderer | Authoring source for tokens, settings, variants, managed styles, source directives, and native CSS roots. |
| `MasterCSSManifest` | `@master/css-compiler` and `@master/css-project` | Engine, runtime, server renderer, scanner, linting, language tooling | Shared IR that describes how class names become sorted CSS rules. |
| `virtual:master-css-manifest` | Official build integrations | Application runtime code and framework integrations | ESM module for the canonical project-level manifest discovered from the CSS entry graph. In production runtime builds, this module may import an emitted project manifest JSON asset. |
| Project manifest JSON asset | Official runtime integrations | `virtual:master-css-manifest` facade and the runtime | Cacheable JSON form of the project manifest. Pure runtime pages can preload it because the runtime needs it before interpreting project classes. |
| `virtual:master-css-emitted-globals` | Static and build integrations | Runtime code | Counts variables and keyframes already emitted by the CSS entry output, so runtime rendering does not insert duplicate global CSS. |
| Hydration manifest | Server rendering and progressive integrations | Runtime hydration | JSON rule IR with `version: 1`, used to map `style#master-css` back into runtime-managed rule objects. |
| Next build manifest | `@master/css.next` when `manifest` is enabled | Build analysis and reporting | Route/output report for rendered files; it is separate from the runtime hydration manifest. |

---

## Comparisons
This section provides a detailed comparison of different rendering modes. Each mode is evaluated based on various criteria such as application scenarios, performance, and generated source.

---

# Responsive Design

Source: https://rc.css.master.co/en/guide/responsive-design

Summary: Adapt your user interface to different devices with flexible responsive syntax.

## Overview

```html
<!-- @MARK @xs @sm @md -->
<div class="grid-cols:2 grid-cols:3@xs grid-cols:4@sm grid-cols:5@md …">…</div>
```
Master CSS allows for the conditional application of styles at different viewport and container sizes. Viewport queries use [breakpoint tokens](/guide/breakpoints), while container queries use [container size tokens](/guide/containers).

---

## Based on viewport breakpoints
CSS Media Queries allow styles to be applied based on the *size of the viewport* rather than individual *elements*. This makes it possible to create responsive layouts that adapt to different viewport widths—such as mobile phones, tablets, and desktops—by defining breakpoints at specific widths.

These breakpoints enable developers to change layouts, typography, spacing, and more to ensure an optimal user experience across devices.

### Using responsive breakpoints
The syntax is `@<breakpoint>`, where `<breakpoint>` can be any [breakpoint theme token](/guide/breakpoints), such as `xs`, `sm`, `md`, `lg`, etc.
```html
<!-- @MARK @xs @sm @md -->
<div class="grid-cols:2 grid-cols:3@xs grid-cols:4@sm grid-cols:5@md …">…</div>
```

### Querying viewport ranges
Use [comparison](/guide/conditional-queries#comparison-operators) and [logical](/guide/conditional-queries#logical-operators) operators to create more complex viewport range queries.
```html
<!-- @MARK @sm&<=md -->
<div class="hidden@sm&<=md">…</div>
```
### Creating responsive wrappers
Set fixed maximum widths from the container scale when a wrapper should step through product layout widths.
```html
<!-- @MARK max-w:4xl@sm max-w:5xl@md max-w:7xl@lg -->
<div class="max-w:4xl@sm max-w:5xl@md max-w:7xl@lg …">…</div>
```

---

## Based on container sizes
CSS [Container Queries](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_containment/Container_queries) allow styles to be applied based on the *size of a container*, rather than the size of the *viewport*. This makes it easier to build responsive components that adapt to their parent containers.

### Using container queries
The `container` class is a utility class that applies the `container-type: inline-size;` to the element, making it a `@container(<size>)` for container queries.

(resize) Try making the container smaller.

```html
<div class="container …">
  <!-- @MARK @container(<=2xs) -->
  <div class="flex flex-col@container(<=2xs)">…</div>
</div>
```
Container queries use the [container scale](/guide/containers), which can use different values from viewport breakpoints.

### Querying container ranges
Use [comparison](/guide/conditional-queries#comparison-operators) and [logical](/guide/conditional-queries#logical-operators) operators to create more complex container range queries.
```html
<!-- @MARK @sm&<=md -->
<div class="hidden@container(sm&<=md)">…</div>
```
### Creating named containers
Use the `container:<name>/<type>` to create a named container with a specific type, and then use the `@container(<name>)` query to apply styles based on the size of a named container.
```html
<!-- @MARK container:card/inline-size -->
<div class="container:card/inline-size">
  <!-- @MARK @container(card) -->
  <div class="hidden@card(3xs)"></div>
</div>
```
---

## Strategies
When it comes to designing and developing responsive web pages, [mobile-first](#mobile-first) and [desktop-first](#desktop-first) are two common development strategies. The decision between these two strategies depends on your project requirements, target audience, and operational decisions.

Also, we propose another flexible strategy － [Syntax-first](#syntax-first).

### Mobile-first
The mobile-first strategy is a design and development approach that initially focuses on designing and optimizing for smaller viewports, such as mobile phones and tablets, and then gradually expanding to larger viewports, including desktop computers.

For example, your company is launching a game primarily targeting mobile users with potential future releases for desktop users based on market response; adopting a mobile-first strategy would be ideal at this stage.

(i) In mobile-first, **styles not bound by viewports are considered to define the mobile UI.**
```html
<p class="font:2xl">
```
Gradually adjust the UI for larger viewports.

(wand) Increase the font size to `32/16rem` when the viewport width is larger than `1024/16rem`.
```html
<!-- @MARK font:3xl@md -->
<p class="font:2xl font:3xl@md …"> <!-- [!code focus] -->
<!-- @MARK font:3xl@>=md -->
<p class="font:2xl font:3xl@>=md …">
```
- Paragraph font size is `24/16rem` in viewport `<1024/16rem`
- Paragraph font size is `32/16rem` in viewport `>=1024/16rem`

This relies on CSS precedence behavior to override mobile styles with new styles on larger viewports.

### Desktop-first
On the other hand, the Desktop-first development strategy initially prioritizes designing and optimizing for larger viewports, such as desktop computers, and then gradually scaling down to smaller viewports, like mobile phones and tablets.

For example, your company is launching a web drawing software primarily targeting designers with potential future releases for mobile users based on market response; adopting a desktop-first strategy would be ideal at this stage.

(i) In desktop-first, **styles not bound by viewports are considered to define the desktop UI.**
```html
<p class="font:3xl">
```
Gradually adjust the UI for smaller viewports.

(wand) Decrease the font size to `24/16rem` when the viewport width is less than `1024/16rem`.
```html
<!-- @MARK font:2xl@<md -->
<p class="font:3xl font:2xl@<md …">
```
- Paragraph font size is `24/16rem` in viewport `<1024/16rem`
- Paragraph font size is `32/16rem` in viewport `>=1024/16rem`

This relies on CSS precedence behavior to override mobile styles with new styles on larger viewports.

### Syntax-first
Thanks to the syntactic flexibility of Master CSS, free yourself from the constraints of mobile-first or desktop-first, which not only gives you a better development experience but also makes you have less markup and less CSS output.

For example, set the background to white only on mobile.

(!) With mobile-first, it's necessary to revert to the original background on larger viewports.
```html
<div class="bg:white bg:transparent@md …">
```
(o) Add `mcss @<md` directly to restrict to small viewports.
```html
<div class="bg:white@<md …">
```

For example, set the background to white only on the desktop.

(!) With desktop-first, it's necessary to revert to the original background on smaller viewports.
```html
<div class="bg:white bg:transparent@<md …">
```
(o) Add `mcss @md` directly to restrict to large viewports.
```html
<div class="bg:white@md …">
```

You don't need to waste energy sticking to a specific development strategy; use the most direct way to solve the current responsive layout.

---

# Route-level Styles

Source: https://rc.css.master.co/en/guide/route-level-styles

Summary: Write route, page, and component-specific CSS with @reference, native selectors, @compose, variants, container queries, and native keyframes.

## Overview
Route-level styles are ordinary CSS files loaded by one route, page, view, or component. They can use Master CSS as compile-time context without becoming a global entry.

Reference the app stylesheet at the top of the local file:

```txt
app/
  globals.css
  home/
    page.tsx
    home.css
```

```css name=app/home/home.css
@reference "../globals.css";
```

Then write native CSS selectors. Use `@compose` when Master CSS classes are clearer than hand-written declarations.

```css name=app/home/home.css
@reference "../globals.css";

.home-section {
  @compose py:5xl;
}
```

Load the route stylesheet from the route, page module, or component entry that owns it:

```ts name=app/home/page.tsx
import "./home.css"
```

The global stylesheet still has to be loaded by the app. `@reference` gives the route stylesheet compile-time access to project tokens, variants, and shared class vocabulary; it does not import the app CSS output again.

---

## Reference the app entry
Use `@reference` when a route stylesheet needs project context but should ship as its own CSS output.

```css name=app/home/home.css
@reference "../globals.css";

.pricing-hero {
  @compose grid gap:lg py:5xl;
}

.pricing-card {
  @compose p:lg b:1px|solid|base r:xl surface:raised;
}
```

The referenced file is context-only. Native CSS from the referenced stylesheet is not copied into the route stylesheet. The route output contains only the lowered route rules plus any theme variables or managed keyframes the route actually needs and the global entry has not already emitted.

This keeps route CSS chunks self-contained without duplicating the global stylesheet.

---

## Write native selectors
Route styles do not need on-demand generation. Treat route classes like traditional CSS that belongs to that route.

```css name=app/home/home.css
@reference "../globals.css";

@layer components {
  .home-bento {
    @compose grid gap:md;
    grid-template-columns: minmax(0, 1fr);
  }

  .home-bento-card {
    @compose p:lg b:1px|solid|base r:xl surface:raised;
  }
}
```

Use classes when the selector is part of the page structure. Use native selectors when they are clearer:

```css name=app/home/home.css
.home-bento-card > h2 {
  @compose text:lg font:medium;
  margin-block: 0 0.5rem;
}

.home-bento-card > p {
  @compose leading:lg text:muted;
  margin: 0;
}
```

Because these are native rules, they are emitted with the stylesheet that imports them. If a selector becomes reused across multiple pages, move the shared role to [Global styles](/guide/global-styles#shared-vocabulary).

---

## Use variants locally
Use rule-local variants for route states, breakpoints, and modes without moving the selector into global vocabulary.

```css name=app/home/home.css
@reference "../globals.css";

.home-cta {
  @compose inline-flex items-center justify-center gap:xs h:12x px:lg r:xl bg:blue fg:white;

  @variant dark {
    @compose bg:blue-60;
  }

  @variant <sm {
    @compose w:full;
  }
}
```

Native declarations and composed declarations share one rule. Put ordinary CSS where it is clearer than a class:

```css name=app/home/home.css
.home-cta {
  @compose transition:transform|normal|standard;
  transform: translateY(0);
}

.home-cta:hover {
  transform: translateY(-0.125rem);
}
```

---

## Use native keyframes
Use native top-level `@keyframes` for route-only motion. Keep the animation in the route stylesheet unless it becomes a shared motion token.

```css name=app/home/home.css
@reference "../globals.css";

@keyframes home-reveal {
  from {
    opacity: 0;
    transform: translateY(0.75rem);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.home-hero {
  animation: home-reveal 420ms ease both;
}
```

Use native media queries for accessibility and route-specific fallbacks:

```css name=app/home/home.css
@media (prefers-reduced-motion: reduce) {
  .home-hero {
    animation: none;
  }
}
```

---

## Use container queries
Container queries are often route-specific because they describe how one section responds to the space it receives.

```css name=app/home/home.css
@reference "../globals.css";

.home-feature-grid {
  @compose grid gap:md;
  container: home-feature-grid / inline-size;
}

.home-feature-list {
  @compose grid gap:md;
}

@container home-feature-grid (width >= 42rem) {
  .home-feature-list {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}
```

Use viewport breakpoints when the layout depends on the page viewport. Use container queries when the section can appear inside different shells, sidebars, or slots.

---

## Promote shared patterns
Keep route CSS local while the structure belongs to one route. Promote only the stable part:

- Move repeated values into [Theme Tokens](/guide/theme).
- Move repeated UI roles into [Global styles](/guide/global-styles#component-classes).
- Move repeated low-level styling capabilities into [Global styles](/guide/global-styles#custom-utilities).
- Keep unique layout, content structure, and route-only animation in the route stylesheet.

This keeps global CSS small, route CSS explicit, and shared vocabulary intentional.

---

# Scanning latent classes

Source: https://rc.css.master.co/en/guide/scanning-latent-classes

Summary: Understand how Master CSS finds possible class names in source files and turns visible usage into generated CSS.

## Overview
Static rendering starts by finding latent classes. A latent class is a possible class name found in source text before Master CSS has proved whether it is a valid utility, project-defined class, or native class from a pruned stylesheet.

```txt
source text
  -> latent class candidates
  -> validated classes
  -> generated CSS
```

The scanner does not run your app. It reads files as text, collects strings that may be classes, and lets the Master CSS engine decide which candidates can produce CSS.

```html name=src/index.html
<!-- @MARK card p:md bg:white shadow:md -->
<article class="p:md bg:white shadow:md card">
  <h2 class="font:lg font:semibold">Release notes</h2>
</article>
```

The source contains `card`, `p:md`, `bg:white`, `shadow:md`, `font:lg`, and `font:semibold`. Those candidates are validated against the active manifest. Valid classes generate CSS; invalid candidates are cached and ignored.

```css name=generated.css
@layer utilities {
  .p\:md {
    padding: 1rem
  }

  .shadow\:md {
    box-shadow: var(--shadow-md)
  }
}
```

The same scanning model is used by build integrations and by tools that call `@master/css-scanner` directly.

---

## Source boundaries
Build integrations and CLI flows scan common source-like project files by default. Ordinary app files such as HTML, JavaScript, TypeScript, JSX, TSX, framework files, Markdown, MDX, and PHP should not need a broad `@source` directive or a matching test-file exclusion.

Use `@source` and `@source not` only when a stylesheet needs an explicit exception, such as content outside the normal project scan, shared workspace source, or a scoped native CSS pruning root.

```css name=index.css
@import '@master/css';
@source '../content/**/*.mdx';
@source '../packages/ui/**/*.{ts,tsx}';
@source not '../packages/ui/**/*.stories.tsx';
```

`@source` adds files that may contain classes. `@source not` removes files from that explicit source set. Multiple source directives are combined as `(source union) - (source not union)`.

For exact stylesheet directive syntax, see [CSS directives](/guide/directives).

In Vite, transformed modules are also fed to the scanner during development. That makes updates fast, but production correctness still depends on class names that exist in scanned source files or are explicitly included.

---

## Candidate scanning
Scanning is intentionally broad. The scanner looks through markup, JSX, strings, template literals, object maps, and framework files for tokens that could be class names.

```tsx name=src/Button.tsx
const toneClasses = {
  neutral: 'bg:white text:neutral',
  destructive: 'bg:red-60 fg:white'
}

export function Button({ destructive }: { destructive?: boolean }) {
  return (
    <button className={`btn px:md r:md : ? ${destructive toneClasses.destructive toneClasses.neutral}`}>
      Delete
    </button>
  )
}
```

The scanner can see all complete class strings in this file:

```txt
bg:white
text:neutral
bg:red-60
fg:white
btn
r:md
px:md
```

It will also see unrelated words from source text. That is expected. Candidates only matter after validation.

```tsx name=src/EmptyState.tsx
export function EmptyState() {
  return <p className="text:gray">No invoices found.</p>
}
```

Words such as `function`, `return`, `No`, `invoices`, and `found` may be discovered as candidates, but they do not match valid Master CSS rules or known native classes, so they do not produce output.

---

## Validation
After candidate scanning, Master CSS validates each class against the active manifest. A candidate can be accepted in three common ways:

- It is a built-in utility, such as `block`, `fg:red-60`, or `grid-cols:3`.
- It is defined by your project CSS entry and compiled into the manifest.
- It matches a native class collected from a stylesheet that imports [`@master/css`](/guide/native-css-pruning).

```css name=index.css
@components {
  btn {
    @compose inline-flex items-center h:40px px:md r:md;
  }

  hero-title {
    @compose m:0 font:5xl font:heavy text:neutral;
  }
}
```

```tsx name=src/Hero.tsx
export function Hero() {
  return (
    <section className="grid gap:xl">
      <h1 className="hero-title">Master CSS</h1>
      <a className="btn bg:blue-60 fg:white" href="/docs">Read docs</a>
    </section>
  )
}
```

`hero-title` and `btn` are valid because the project CSS entry defines them. `grid`, `gap:xl`, `bg:blue-60`, and `fg:white` are validated through the utility engine.

Configured classes are still on-demand. Defining `.btn` in the project CSS entry does not emit it by itself; `.btn` must appear in scanned source or be included through `@safelist`.

---

## Complete classes
Static rendering works when the complete class string exists in source. It cannot infer class names from fragments, data returned by an API, or values assembled after startup.

(x) Do not build class names from fragments.

```tsx
const className = 'bg:' + (error ? 'red-60' : 'green-60')
```

The complete strings `bg:red-60` and `bg:green-60` do not exist in source, so static rendering cannot reliably generate either rule.

(o) Write complete class names.

```tsx
const className = error ? 'bg:red-60' : 'bg:green-60'
```

For component variants, map dynamic inputs to complete class lists.

(x) Avoid utility fragments in props.

```tsx
function Badge({ tone }: { tone: 'red' | 'green' | 'gray' }) {
  return <span className={`px:xs r:full fg:white bg:${tone}`}>Status</span>
}
```

(o) Use a static variant map.

```tsx
const toneClasses = {
  destructive: 'bg:red-60 fg:white',
  confirmed: 'bg:green-60 fg:white',
  neutral: 'bg:gray-10 fg:gray-90'
}

function Badge({ tone }: { tone: keyof typeof toneClasses }) {
  return <span className={`px:xs r:full ${toneClasses[tone]}`}>Status</span>
}
```

This also gives each variant room to choose its own contrast, hover state, disabled treatment, and dark-mode behavior.

---

## Runtime values
When the value is dynamic but the declaration shape is stable, keep the class static and pass the value through a CSS variable.

```tsx
function Headline({ size }: { size: string }) {
  return (
    <h1
      className="font-size:$headline-size leading:1.1"
      style={{ '--headline-size': size } as React.CSSProperties}
    >
      Launch notes
    </h1>
  )
}
```

The class `font-size:$headline-size` is complete and visible to the scanner. The runtime value lives in `--headline-size`, which is normal CSS.

Use the same pattern for data-driven sizes, positions, and progress values.

```tsx
function Progress({ value }: { value: number }) {
  return (
    <div className="overflow:hidden h:4x r:full bg:gray-10">
      <div
        className="h:full w:$progress bg:blue-60 transition:width|fast|smooth"
        style={{ '--progress': `${value}%` } as React.CSSProperties}
      />
    </div>
  )
}
```

If the class name itself only exists after the page is running, use [runtime rendering](/guide/rendering-modes#runtime-rendering) or [progressive rendering](/guide/rendering-modes#progressive-rendering). The browser runtime can observe the DOM and generate rules for classes that appear later.

---

## Included and excluded classes
Use `@safelist` for bounded classes that do not exist in scanned source. Common cases include CMS enums, database values, server-rendered fragments, or a third-party widget with a known class contract.

```css name=index.css
@import '@master/css';
@safelist 'opacity:1 transform:translateY(-5px):hover bg:blue-60@dark';
```

`@safelist` does not bypass validation. The class still needs to be a valid Master CSS class, a project-defined class from the compiled manifest, or a known native class from a pruned stylesheet.

Use `@blocklist` when broad scanning finds tokens that look like valid classes but should not generate CSS.

```css name=index.css
@import '@master/css';
@blocklist 'debug-*';
@blocklist 'example-token';
```

Keep both lists small. The most reliable scanning path is still complete class strings in source.

---

## Checklist
- Put complete class names in scanned source.
- Map variants to complete class strings.
- Use CSS variables for runtime values.
- Rely on integration or CLI defaults for ordinary app source files.
- Add `@source` only for extra source roots or scoped pruning roots.
- Use `@safelist` only for bounded classes the scanner cannot see.
- Use `@blocklist` for real false positives.
- Use runtime or progressive rendering for classes created after startup.
- Import [`@master/css`](/guide/native-css-pruning) from stylesheet roots whose native CSS class rules should be pruned by usage.

---

# Sizing

Source: https://rc.css.master.co/en/guide/sizing

Summary: Choose fluid dimensions, measured sizes, container caps, constraints, and responsive sizing rules for stable layouts.

## Overview
Sizing describes the space an element should claim, the limits it should respect, and the boundary where that decision changes. In CSS this includes [width](https://developer.mozilla.org/en-US/docs/Web/CSS/width), [height](https://developer.mozilla.org/en-US/docs/Web/CSS/height), min and max constraints, intrinsic keywords, percentages, viewport units, container values, and CSS functions.

Master CSS keeps sizing decisions close to the element that owns them. Use `w:*` and `h:*` for one axis, `size:*` when both axes intentionally match, `min-*` and `max-*` for constraints, container tokens for shared layout surfaces, and responsive variants when the size changes by viewport or container.

        Fluid wrapper

        Measured object

---

## Choose a sizing role
A sizing class should have one clear job. It can set the preferred size, keep an element from collapsing, cap growth, tie both axes together, or move the decision to a responsive boundary.

Use one-axis rules when the element is rectangular by role. Use `size:*`, `min:*`, or `max:*` only when both axes genuinely share the same decision.

```html
<!-- @MARK w:full --><!-- @MARK max-w:7xl --><!-- @MARK min-h:100dvh -->
<main class="w:full min-h:100dvh max-w:7xl mx:auto">
  ...
</main>
```
---

## Start fluid, then constrain
Most layout should fill the space it receives and then stop at a cap. A fluid wrapper with `w:full max-w:*` behaves better across viewports than one fixed width that only fits one screen.

```html
<!-- @MARK w:full --><!-- @MARK max-w:7xl --><!-- @MARK px:md --><!-- @MARK px:xl@md -->
<main class="w:full max-w:7xl mx:auto px:md px:xl@md">
  ...
</main>

<!-- @MARK w:full --><!-- @MARK max-w:72ch -->
<article class="w:full max-w:72ch">
  ...
</article>
```
Use `w:full` when the element should follow its parent, percentages such as `w:50%` for proportional regions, `max-w:*` for caps, and CSS functions such as `clamp()` when the bound itself should be fluid.

```html
<!-- @MARK w:full --><!-- @MARK w:50%@sm -->
<aside class="w:full w:50%@sm">...</aside>

<!-- @MARK w:clamp(18rem,50vw,42rem) -->
<section class="w:clamp(18rem,50vw,42rem)">...</section>
```

Percentage widths and heights follow native CSS behavior. The parent needs a definite height before `h:full` or `h:50%` can resolve predictably.

---

## Use container tokens
Sizing utilities read the `container` namespace contextually. `w:md`, `max-w:5xl`, `size:sm`, `min-w:xs`, and `flex-basis:lg` use `--container-*` tokens without repeating the namespace in markup.

```html
<!-- @MARK w:full --><!-- @MARK max-w:5xl -->
<main class="w:full max-w:5xl mx:auto">
  ...
</main>

<!-- @MARK w:md --><!-- @MARK max-w:full -->
<aside class="w:md max-w:full">...</aside>
```
Use container tokens for shared layout surfaces: page wrappers, panels, modals, sidebars, drawer widths, and component caps. Use local `ch`, `x`, or CSS functions when the dimension belongs to content measure or one component's private geometry.

For the full container namespace and query model, see [containers](/guide/containers#namespace-for-container-values).

---

## Use measured sizes
The `x` suffix multiplies the [base unit](/guide/variables-and-modes#project-settings), which defaults to **4 pixels**. For example, `1x` is `0.25rem`, `4x` is `1rem`, and `10x` is `2.5rem`.

Use `x` values for measured component geometry such as icons, avatars, handles, skeleton blocks, and fixed media slots. For page structure, reach for `w:full`, percentages, container tokens, viewport units, text units, or `clamp()` first.

```html
<!-- @MARK size:10x -->
<img class="size:10x round object-cover" src="..." alt="" />

<!-- @MARK w:36x --><!-- @MARK h:20x -->
<figure class="h:20x w:36x">...</figure>
```
---

## Pair axes deliberately
`size:*` is not a shorter way to avoid thinking about dimensions. It is the right tool when an element is square by design.

      size:14x

      w:full h:14x

```html
<!-- @MARK size:14x -->
<button class="grid place-content:center size:14x">...</button>

<!-- @MARK w:full --><!-- @MARK h:14x -->
<div class="h:14x w:full">...</div>
```
When an element should keep a non-square ratio, use [aspect ratio](/reference/aspect-ratio) with a width instead of locking both dimensions.

```html
<!-- @MARK w:full --><!-- @MARK aspect-ratio:16/9 -->
<video class="w:full aspect-ratio:16/9" controls></video>
```

---

## Constrain instead of forcing
Min and max rules are often more stable than fixed widths. They let content, containers, and responsive variants negotiate space without overflow.

    min-w:0 max-w:96x

```html
<!-- @MARK flex --><!-- @MARK min-w:0 --><!-- @MARK max-w:96x -->
<article class="flex gap:md max-w:sm">
  <img class="flex:0 size:10x" alt="" />
  <div class="min-w:0">Long content...</div>
</article>
```
In flex and grid layouts, `min-w:0` is the common fix for text or media that refuses to shrink. Without it, intrinsic content can force a row wider than its container even when the parent has a max width.

Use `min-h:*` for baseline regions that may grow, such as app shells, empty states, and hero sections. Use `max-h:*` for scrollable panels, menus, and media regions that must stay inside the viewport.

---

## Adapt at the right boundary
Sizing classes can use the same [breakpoints](/guide/breakpoints), [containers](/guide/containers), selectors, and media queries as other utilities. Choose the boundary that owns the decision.

```html
<!-- @MARK w:full --><!-- @MARK w:50%@sm --><!-- @MARK max-w:7xl@lg -->
<section class="w:full w:50%@sm max-w:7xl@lg">...</section>

<!-- @MARK container --><!-- @MARK size:10x@container(md) -->
<article class="container">
  <button class="size:8x size:10x@container(md)">...</button>
</article>
```
Use viewport breakpoints when the whole page shell changes. Use container queries when a reusable component should adapt to the space it receives in a sidebar, modal, card grid, or main content column.

---

## Customize sizing tokens
When a dimension becomes part of the product language, add a named container variable in the project CSS entry. Use explicit CSS lengths for fixed values; functions are preserved.

```css name=index.css
@theme {
  --container-sidebar: 17.5rem;
  --container-measure: 72ch;
  --container-panel: clamp(18rem, 50vw, 42rem);
}
```

```html
<!-- @MARK w:sidebar --><!-- @MARK max-w:measure --><!-- @MARK w:panel -->
<aside class="w:sidebar">...</aside>
<article class="max-w:measure">...</article>
<section class="w:panel">...</section>
```

Use descriptive names such as `sidebar`, `measure`, `panel`, or `media` instead of numeric keys. Numeric keys are easy to confuse with raw values such as `w:1px` or `w:2px`.

---

## Avoid brittle sizing
(x) A page wrapper is fixed, so small screens overflow.

```html
<main class="w:7xl">...</main>
```

(o) The wrapper fills available space and stops at a shared cap.

```html
<main class="w:full max-w:7xl mx:auto">...</main>
```

(x) A square component repeats separate width and height values that can drift.

```html
<button class="h:12x w:10x">...</button>
```

(o) The component uses one sizing decision.

```html
<button class="size:10x">...</button>
```

(x) A flex child has a max width, but its content can still force overflow.

```html
<div class="flex">
  <main class="max-w:5xl">Long unbroken content...</main>
</div>
```

(o) The flexible child is allowed to shrink.

```html
<div class="flex">
  <main class="min-w:0 max-w:5xl">Long unbroken content...</main>
</div>
```

---

# Spacing

Source: https://rc.css.master.co/en/guide/spacing

Summary: Use spacing tokens, base-unit multipliers, and precise low-level values for layout rhythm.

## Overview
Spacing controls the rhythm inside components, between related elements, and across page sections. Master CSS maps the default spacing scale to `spacing` variables, so padding, margin, gap, and inset can share the same design language.

Use the scale by relationship:

* `4xs` to `2xs` for micro spacing between icons, tags, compact controls, and inline text.
* `xs` to `sm` for form fields, list rows, toolbar controls, and tight component groups.
* `md` as the default component rhythm.
* `lg` to `xl` for card padding, grouped content, and larger component separation.
* `2xl` to `5xl` for layout gutters, section spacing, and large editorial rhythm.

```html
<!-- @MARK gap:md --><!-- @MARK p:md -->
<div class="grid-cols:4 gap:md p:md">
  <div>1</div>
  <div>2</div>
  ...
</div>
```
---

## Namespace for spacing
The `spacing` variable namespace is shared across padding, margin, gap, inset, scroll spacing, and similar layout rules.

This lets spacing-related utilities use `md`, `lg`, or project token names without the `spacing-` prefix.

```css name=index.css
@theme {
  --spacing-sm: 0.75rem;
  --spacing-md: 1rem;
  --spacing-lg: 1.5rem;
  --spacing-wide: 6rem;
}
```

Apply the custom spacing tokens in your markup:

```html
<!-- @MARK mt:md --><!-- @MARK p:sm --><!-- @MARK gap:lg --><!-- @MARK py:wide -->
<section class="py:wide">
  <div class="gap:lg mt:md p:sm">...</div>
</section>
```

---

## Using spacing multiplier
The `x` suffix multiplies the [base unit](/guide/variables-and-modes#project-settings) theme setting, which defaults to **4 pixels**. Use it for measured geometry that should stay aligned with the spacing grid but does not need a named token.

For example, `1x` is `0.25rem`, `2x` is `0.5rem`, `3x` is `0.75rem`, and `8x` is `2rem`.

```html
<!-- @MARK 1x -->
<div class="m:3xs"></div>       <!--  4px, margin: 0.25rem -->
<!-- @MARK 2x -->
<div class="p:xs"></div>       <!--  8px, padding: 0.5rem -->
<!-- @MARK 8x -->
<div class="w:8x"></div>       <!-- 32px, width: 2rem -->
<!-- @MARK 3x -->
<div class="gap:sm"></div>     <!-- 12px, gap: 0.75rem -->
```

For product surfaces, prefer named spacing tokens such as `sm`, `md`, and `lg`. Use `x` values for measured local geometry, such as icon size, avatar size, skeleton blocks, or a component-specific fixed width.

---

## Exact pixel values
Use `0` for resets, explicit `1px` for hairlines, and other `px` units when a value needs exact pixel geometry. Bare numbers are emitted as written, so `p:1` becomes `padding: 1` and is not a valid CSS length.

```html
<!-- @MARK m:0 -->
<div class="m:0">0px, margin: 0rem</div>
<!-- @MARK p:1px -->
<div class="p:1px">1px, padding: 1px</div>
<!-- @MARK w:2px -->
<div class="w:2px">2px, width: 0.125rem</div>
```

(!) Avoid mixing named spacing tokens, `x` multipliers, and exact pixel values arbitrarily. Prefer named tokens for layout rhythm, `x` values for measured local geometry, and `px` values only for hairlines or exact pixel adjustments.

---

## Common mistakes
### Do not use numeric keys as tokens
(x) Avoid defining spacing tokens with numeric keys.

```css name=index.css
@theme {
  --spacing-1: 0.25rem; /* [!code --] */
  --spacing-2: 0.5rem; /* [!code --] */
}
```

Numeric keys are easy to confuse with low-level CSS values. Prefer semantic token keys like `sm` or `card`, then use `p:1px` for a 1px value or `p:1x` for the default 4px base unit.

(o) Use descriptive scale or role keys.

```css name=index.css
@theme {
  --spacing-sm: 0.75rem;
  --spacing-compact: 1.25rem;
  --spacing-relaxed: 6rem;
}
```

---

## Summary

Master CSS provides a unified system for defining spacing:

* Use named spacing tokens for shared rhythm.
* Use `x` multipliers for measured local geometry.
* Use `0`, `1px`, or explicit pixel units for resets and exact pixel adjustments.
* Avoid numeric token keys so markup stays clear.

---

# State Selectors

Source: https://rc.css.master.co/en/guide/state-selectors

Summary: Learn how to append selectors for hover, focus, attributes, descendants, pseudo-elements, and custom states.

## Overview

```html
<!-- @MARK :hover -->
<div class="fg:blue-60:hover"></div>
<!-- @MARK :invalid -->
<input class="border:red:invalid" />
<!-- @MARK [open] -->
<details class="bg:white[open]" open></details>
```
State selectors let one declaration apply only when a selector matches. Append the selector after the declaration value:

```txt
property:value<selector>
```

Common examples include interaction states such as `:hover`, validation states such as `:invalid`, and attributes such as `[disabled]` or `[open]`.

```html
<!-- @MARK :hover --><!-- @MARK :active -->
<h2 class="font:lg font:2xl:hover font:3xl:active …">
```
Selectors can be stacked when the CSS selector itself needs more detail.
```html
<!-- @MARK :hover:not(.active) -->
<div class="bg:blue-20:hover:not(.active) …">
```
If you also need a breakpoint, mode, or other condition, put the [conditional query](/guide/conditional-queries) after the selector.

```html
<!-- @MARK :hover@md -->
<button class="bg:blue-60:hover@md">Save</button>
```

For readability, Master CSS includes built-in selector aliases for selectors that appear often.
```html
<div class="mt:sm:first"><!-- [!code highlight] -->
<div class="mt:sm:first-child">
<div class="mt:sm:odd"><!-- [!code highlight] -->
<div class="mt:sm:nth-child(2n)">
<div class="mt:sm:rtl"><!-- [!code highlight] -->
<div class="mt:sm:dir(rtl)">
```
Write longer project-specific selectors directly.
```html
<div class="font:semibold_:is(h1,h2,h3,h4,h5,h6)"><!-- [!code highlight] -->
```

---

## Basic selectors
Master CSS accepts native selector syntax. The selector is relative to the element that owns the class unless a combinator points to another element.

| Selector              | Description                                           | Preview CSS                               |
|-----------------------|-------------------------------------------------------|-------------------------------------------|
| `*`                   | Universal selector                                    | `css * { margin: 0; }`                    |
| `element`             | Type selector                                         | `css p { color: red; }`                   |
| `.class`              | Class selector `css .box { padding: 1rem; }`             |
| `#id`                 | ID selector                                           | `css #header { background: blue; }`       |
| `[attribute]`         | Attribute selector                                    | `css [disabled] { opacity: 0.5; }`        |
| `:pseudo-class`       | Pseudo-class selector                                 | `css a:hover { color: blue; }`            |
| `::pseudo-element`    | Pseudo-element selector                               | `css p::first-letter { font-size: 2em; }` |

### `*` — Universal
Use `*` as a wildcard. In `>*`, every direct child matches.
```html
<!-- @MARK * -->
<div class="bg:blue-60>*">
  <div>hit</div>
  <div>hit</div>
  ...
</div>
```

### `element`
Use a type selector to target elements by tag name.
```html
<!-- @MARK span -->
<div class="bg:blue-60>span">
  <span>hit</span>
</div>
```
(i) If a raw type selector is hard to read or conflicts with nearby syntax, wrap it with `:is()` or `:where()`.
```html
<!-- @MARK :is(span) -->
<span class="bg:blue-60:is(span)"></span>
```

### `.class`
a application as class custom for selector state, such Use `.active`, `.selected`, or `.expanded`.
```html
<!-- @MARK .active -->
<div class="bg:blue-60.active active">...</div>
```

### `#id`
Use an ID selector when the state is tied to a unique element.
```html
<!-- @MARK #nav -->
<nav id="nav" class="bg:blue-60#nav">...</nav>
```

### `[attribute]`
Use attribute selectors for DOM state that already lives in markup, such as `[disabled]`, `[open]`, `aria-*`, and `data-*`.
```html
<!-- @MARK [disabled] -->
<button class="bg:blue-60[disabled]" disabled>Submit</button>
```

### `:pseudo-class`
Use pseudo-classes for browser-managed states.
```html
<!-- @MARK :hover -->
<button class="bg:blue-60:hover">Submit</button>
```

### `::pseudo-element`
Use pseudo-elements such as `::before` and `::after` when the style should target generated content.
```html
<!-- @MARK ::before -->
<div class="content:'“'::before">quotes</div>
```

---

## Combinators
Combinators target elements by their relationship to the element that owns the class. Use them when the declaration should style a child, sibling, or descendant instead of the element itself.

| Selector          | Description               | Preview CSS                 |
|-------------------|---------------------------|-----------------------------|
| `A B`             | Descendant selector (`_`) | `css nav a { color: white; }`   |
| `A > B`           | Child selector            | `css ul > li { list-style: none; }` |
| `A + B`           | Adjacent sibling selector | `css h1 + p { margin-top: 0; }` |
| `A ~ B`           | General sibling selector  | `css h1 ~ p { color: gray; }`   |

### `_` — Descendant
Use `_` as the descendant combinator. It stands in for the CSS space, because spaces split class names in HTML.
```html
<!-- @MARK _ -->
<div class="bg:blue-60_div">
  <div>hit</div>
  <div>hit
    <div>hit
      <div>hit</div>
    </div>
  </div>
</div>
```

### `>` — Child
Use `>` when only direct children should match.
```html
<!-- @MARK >div -->
<div class="bg:blue-60>div">
  <div>hit</div>
</div>
```

### `+` — Adjacent sibling
Use `+` to style the next sibling when it appears immediately after the current element.
```html
<!-- @MARK +div -->
<div class="bg:blue-60+div"></div>
<div>hit</div>
```

### `~` — General sibling
Use `~` to style later siblings that share the same parent.
```html
<!-- @MARK ~div -->
<div class="bg:blue-60~div"></div>
<div>hit</div>
<div>hit</div>
<div>hit</div>
```

---

## Selector groups
Use `,` when the same declaration should apply to several selectors.
```html
<!-- @MARK , -->
<div class="content:'“'::before,::after">quotes</div>
```
Selector groups also work with combinators. In this example, the declaration applies to direct `div` and `span` children.
```html
<!-- @MARK , -->
<div class="block>div,>span">hit</div>
```
---

## Pseudo-classes
### `:hover`, `:active`, `:focus`
Use interaction pseudo-classes to give controls feedback as people hover, press, focus, or navigate with a keyboard.

(click) Try clicking the button to see states change

```html
<!-- @MARK :hover --><!-- @MARK :active -->
<button class="bg:blue-60 fg:white bg:blue-70:hover bg:blue-80:active">Submit</button>
```

Use `:focus-visible` for keyboard focus rings when you want to avoid showing the focus style after every pointer click.
```html
<!-- @MARK :focus-visible -->
<button class="outline:2px|solid|blue:focus-visible">Submit</button>
```

### `:first`, `:last`, `:odd`, `:even`
Use structural shorthands such as `:first`, `:last`, `:odd`, and `:even` to style list items by position. Write native selectors such as `:nth-child(N)` directly when they are clearer.

            {furnitures.map((furniture, index) =>

            )}
```html
<ul class="…">
  <!-- @MARK :even --><!-- @MARK :even -->
  <li class="bg:gray-90:even@dark bg:slate-5:even@light …">…</li>
</ul>
```

### `:valid`, `:invalid`, `:required`
Use form validation pseudo-classes to reflect native validity without writing JavaScript state.

(type) Try typing `co` as a valid email address

```html
<!-- @MARK :invalid --><!-- @MARK :invalid -->
<input class="b:1px|solid b:green:valid b:red:invalid …" type="email" />
```

### `:disabled`
Use `:disabled` for controls that cannot be interacted with.
```html
<!-- @MARK :disabled -->
<button class="opacity:.5:disabled" disabled>Submit</button>
```

### `:checked`, `:indeterminate`
Use `:checked` and `:indeterminate` for checkboxes, radio buttons, switches, and custom controls backed by native inputs.

```html
<!-- @MARK :checked -->
<input class="bg:blue-60:checked …" type="checkbox" checked />
```

### `:rtl`, `:ltr`
Use `:rtl` and `:ltr` to react to text direction. They map to `:dir(rtl)` and `:dir(ltr)`.
```html
<!-- @MARK :rtl -->
<div class="mr:xs:rtl">...</div>
```

### `:has()`
Use `:has()` when the current element should change because it contains a matching child or descendant.
```html
<!-- @MARK :has(.active) -->
<div class="bg:blue-60:has(.active)">
  <div>Item 1</div>
  <div class="active">Item 2</div>
  <div>Item 3</div>
</div>
```

### `:not()`
Use `:not()` to exclude a selector from the match.
```html
<!-- @MARK :not(.active) -->
<div class="fg:green-60:not(.active) active">...</div>
```

### `:of()`
`:of()` is the only proprietary selector introduced by Master CSS. It lets the current element respond to a parent, ancestor, or previous sibling. Use native selectors first when they can express the relationship; use `:of()` when you need to style the current element from outside-in context.

(i) Style the element when an ancestor matches.
```html
<!-- @MARK active -->
<div class="active">
  <div>
    <!-- @MARK :of(.active) -->
    <div class="hidden:of(.active)">hidden</div>
  </div>
</div>
```
(i) Style the element when its parent matches.
```html
<!-- @MARK active -->
<div class="active">
  <!-- @MARK :of(.active>) -->
  <div class="hidden:of(.active>)">hidden</div>
</div>
```
(i) Style the element when its previous adjacent sibling matches.
```html
<!-- @MARK active -->
<div class="active"></div>
<!-- @MARK :of(.active+) -->
<div class="hidden:of(.active+)">hidden</div>
```
(i) Style the element when one of its preceding siblings matches.
```html
<!-- @MARK active -->
<div class="active"></div>
<div></div>
<!-- @MARK :of(.active~) -->
<div class="hidden:of(.active~)">hidden</div>
```
(x) Do not put combinators or pseudo-elements before `:of()`.
```html
<div class="hidden_div::before:of(.active)">hidden</div>
```

---

## Pseudo-elements
### `::before`, `::after`
Use `::before` and `::after` to style generated content attached to the element.

```html
<!-- @MARK ::before --><!-- @MARK ::after -->
<div class="content:close-quote::after content:open-quote::before …">
  Be the change you wish to see in the world.
</div>
```

### `::scrollbar`
Style common scrollbar surfaces with `::scrollbar`, `::scrollbar-thumb`, and `::scrollbar-track` shorthands. Write native vendor selectors such as `::-webkit-scrollbar-corner` directly for less common parts.

(hover) Try scrolling horizontally and interact with the scroll bar

            {animals.map((animal) =>

            )}

```html
<!-- @MARK scrollbar --><!-- @MARK ::scrollbar-thumb -->
<div class="overflow-x:auto size:0.375rem::scrollbar bg:neutral-50/.2::scrollbar-thumb …">
```

---

## Attribute selectors
### `[open]`
Use `[open]` to style a `<details>` element while it is expanded.
```html
<!-- @MARK [open] -->
<details class="bg:white[open]" open>
  <summary>Details</summary>
  <p>Details content goes here.</p>
</details>
```

### `[aria-<key>=<value>]`
Use [ARIA](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA) attributes when accessible state is already present in the DOM.
```html
<!-- @MARK [aria-checked] -->
<div class="bg:blue-60[aria-checked=true]" aria-checked="true">...</div>
```

### `[data-<key>=<value>]`
Use `data-*` attributes for component state that is not covered by native attributes or ARIA.
```html
<!-- @MARK [data-active] -->
<div class="bg:blue-60[data-active]" data-active>...</div>
```

### `[<attr>=<value>]`
Match an exact attribute value.
```html
<!-- @MARK [type=checkbox] -->
<input class="b:blue[type=checkbox]" type="checkbox" />
```

### `[<attr>^=<value>]`
Match values that start with a specific string.

(i) Links that start with `http`.

```html
<!-- @MARK [href^=http] -->
<a class="content:'↗'[href^=http]::after" href="https://…">External</a>
```

### `[<attr>$=<value>]`
Match values that end with a specific string.

```html
<!-- @MARK [href$='.pdf'] -->
<a class="content:'⬇'[href$='.pdf']::after" href="https://….pdf">PDF</a>
```

### `[<attr>*=<value>]`
Match values that contain a specific string.
```html
<!-- @MARK [title*=master] -->
<div class="bg:blue-60[title*=master]" title="mastercss">...</div>
```

### `[<attr>|=<value>]`
Match a value exactly or followed by a hyphen, which is common for language codes.
```html
<!-- @MARK [lang|=en] -->
<div class="bg:blue-60[lang|=en]" lang="en-US">...</div>
```

### `[<attr>~=<value>]`
Match one word inside a whitespace-separated attribute value.
```html
<!-- @MARK [title~=css] -->
<div class="bg:blue-60[title~=css]" title="master css">...</div>
```

---

# Style Declarations

Source: https://rc.css.master.co/en/guide/style-declarations

Summary: Learn how Master CSS turns class names into CSS declarations, values, units, functions, variables, and shorthands.

## Overview

```html
<div class="transition:transform|.2s transform:scale(1.1):hover">
  <img class="untouchable" … />
  <div class="abs inset:0 h:fit m:auto mix-blend-mode:overlay animation:flash|3s|infinite">
    <h1 class="font:7vw font:heavy text-center fg:white font:5xl@xs">
      Hello, World!
    </h1>
  </div>
</div>
```
Master CSS classes are CSS declarations written directly in markup. Read each class from left to right: start with the style you want, then add optional [state selectors](/guide/state-selectors) and optional [conditional queries](/guide/conditional-queries).

```html
<!-- @MARK fg:white --><!-- @MARK :hover --><!-- @MARK @md -->
<button class="fg:white:hover@md">Save</button>
```

The examples in this guide start with explicit CSS-like declarations, then show how to shorten them with utilities, shorthands, abbreviations, variables, and explicit units. Common native properties such as spacing, sizing, radius, color, and timing can still use Master CSS tokens and multiplier units, while rare CSS properties can use valid native declaration syntax directly. When you are learning a new class, write the explicit form first. Once the output is clear, use the shorter form that still reads well to your team.

---

## Basic syntax
### Utilities

### Multi-style shorthands

### Ambiguous shorthands

### Motion longhands

### Property abbreviations

### Native declaration fallback

### Variable properties

### Group

### Important

---

## Values
### Decimal

### Negative

### Hexadecimal color
Change the text color of an element using the hexadecimal color code.

```html
<!-- @MARK fg:#175fe9 -->
<p class="fg:#175fe9">Aa</p>
```

### Variable alias

---

## Units

### Unit conversion

### Unit sensing

### Multiplier units

---

## Functions

### rgb(), hsl(), oklch(), ...
Change the text color of an element using color functions like `rgb()`, `hsl()`, `oklch()`, and others.

```html
<!-- @MARK fg:rgb(23,95,233) -->
<p class="fg:rgb(23,95,233)">Aa</p>
```

---

## Combine with states and queries
After the declaration itself is clear, you can attach selectors and conditions without changing the declaration syntax.

```html
<!-- @MARK bg:blue-60 --><!-- @MARK bg:blue-70:hover@md --><!-- @MARK transition:background-color|.2s -->
<button class="bg:blue-60 transition:background-color|.2s bg:blue-70:hover@md">
  Save
</button>
```

This means:

- `bg:blue-60` applies by default.
- `bg:blue-70:hover@md` applies only when the button is hovered and the viewport matches `@md`.
- `transition:background-color|.2s` adds a `background-color` transition.

The rest of the syntax tutorial builds on this model: declarations first, then selectors, then queries.

---

# Theme Tokens

Source: https://rc.css.master.co/en/guide/theme

Summary: Define shared design tokens with @theme for colors, spacing, typography, radius, breakpoints, containers, shadows, and motion.

## Overview
Theme tokens are the shared design values a Master CSS project reaches for every day: colors, spacing, typography, radius, shadows, motion, breakpoints, and container sizes.

Define tokens in the project CSS entry with `@theme`, then use short contextual classes in markup. Keep the page focused on values. Use [Global Styles](/guide/global-styles) for reusable components and utilities, [Conditional Queries](/guide/conditional-queries) for variants, and [Variables and Modes](/guide/variables-and-modes) for the underlying resolution model.

```css name=index.css
@import '@master/css';

@theme {
  --color-brand: #4f46e5;
  --color-text-action: var(--color-brand);
  --spacing-lg: 1.5rem;
  --radius-lg: 1rem;
  --breakpoint-md: 48rem;
  --container-md: 28rem;
}

@theme light {
  --color-surface-card: #ffffff;
}

@theme dark {
  --color-surface-card: #111827;
}
```

```html
<!-- @MARK p:lg --><!-- @MARK r:lg --><!-- @MARK bg:surface-card --><!-- @MARK grid-cols:2@md --><!-- @MARK bg:brand --><!-- @MARK text:action -->
<section class="p:lg r:lg grid-cols:2@md bg:surface-card">
  <button class="px:md py:xs r:md fg:white bg:brand">Save</button>
  <a class="text:action" href="/settings">Settings</a>
</section>
```

Master CSS resolves theme tokens before generating class rules. The generated CSS still uses normal CSS custom properties unless you intentionally define inline tokens.

---

## Project CSS entry
A project needs a CSS entry that marks the Master CSS graph. Put shared tokens in the stylesheet that imports `@master/css`, or in CSS already imported by that entry.

```css name=index.css
@import '@master/css';

@theme {
  --color-brand: #4f46e5;
}
```

The important part is the graph, not a special file name. Theme tokens can live wherever the project CSS entry already reaches them.

---

## Define tokens
Theme tokens are CSS custom property declarations inside `@theme` blocks. Write the full token name with the leading `--`. The prefix places the value in a namespace that Master CSS utilities already understand.

```css name=index.css
@theme {
  --content-hash: " #";
  --color-brand: #4f46e5;
  --color-text-action: var(--color-brand);
  --spacing-lg: 1.5rem;
  --font-family-sans: Geist, ui-sans-serif, system-ui, sans-serif;
  --radius-lg: 1rem;
  --breakpoint-md: 48rem;
  --container-md: 28rem;
}

@theme light {
  --color-surface-card: #ffffff;
  --shadow-card: 0 0 0 1px rgb(15 23 42 / .06), 0 16px 40px rgb(15 23 42 / .12);
}

@theme dark {
  --color-surface-card: #111827;
  --shadow-card: 0 0 0 1px rgb(255 255 255 / .06), 0 16px 40px rgb(0 0 0 / .36);
}
```

Use token names that describe the shared decision, not the first component that needed the value. A `brand` color, `lg` spacing step, or `card` shadow can be reused. A token named after one button or one modal usually belongs closer to that component.

---

## Use tokens
Utilities resolve token values from the namespace they use. The same short key can mean spacing in `p:lg`, radius in `r:lg`, a container width in `max-w:md`, or a breakpoint in `@md`.

```html
<!-- @MARK bg:surface-card --><!-- @MARK p:lg --><!-- @MARK r:lg --><!-- @MARK font:sans --><!-- @MARK shadow:card -->
<article class="p:lg r:lg font:sans bg:surface-card shadow:card">
  <h2>Dashboard</h2>
  <a class="text:blue" href="/settings">Settings</a>
</article>
```

For a deeper explanation of namespace resolution and contextual lookup, see [Variables and Modes](/guide/variables-and-modes#namespace-resolution).

---

## Alias and override tokens
Use native CSS `var()` when a token should reference another token. This keeps semantic roles tied to a smaller set of foundation values.

```css name=index.css
@theme {
  --color-brand: #4f46e5;
  --color-text-action: var(--color-brand);
}
```

Define the same token key as a preset token when you want to override it. Later definitions in the project CSS graph win.

```css name=index.css
@theme {
  --color-blue: #4589ff;
  --spacing-lg: 1.625rem;
}
```

Use overrides intentionally. If the whole product should use a different `blue` or `lg`, override the preset token. If only one product role changes, create a semantic token such as `color-text-action` or `shadow-card`.

---

## Add mode-aware values
Use mode-specific `@theme` blocks when the same token should resolve differently in light, dark, or custom modes.

```css name=index.css
@theme light {
  --color-surface-card: #ffffff;
  --color-text-card: #111827;
  --shadow-card: 0 0 0 1px rgb(15 23 42 / .06), 0 16px 40px rgb(15 23 42 / .12);
}

@theme dark {
  --color-surface-card: #111827;
  --color-text-card: #f9fafb;
  --shadow-card: 0 0 0 1px rgb(255 255 255 / .06), 0 16px 40px rgb(0 0 0 / .36);
}
```

```html
<!-- @MARK bg:surface-card --><!-- @MARK text:card --><!-- @MARK shadow:card -->
<article class="bg:surface-card shadow:card text:card">...</article>
```

Keep the token name mode-neutral. Markup should say `surface-card` or `text-card`, not `dark-card`.

For `mode-trigger`, `default-mode`, manual switches, and local mode islands, see [Variables and Modes](/guide/variables-and-modes#mode-triggers).

---

## Use inline and static tokens
Use `@theme inline` when a token is only a utility shorthand and should not emit a CSS custom property. Master CSS still matches the token, but generated utilities write the resolved value directly.

```css name=index.css
@theme inline {
  --color-brand: #4f46e5;
  --spacing-feature: 1.5rem;
}
```

```html
<article class="bg:brand p:feature">...</article>
```

```css
.bg\:brand { background-color: #4f46e5; }
.p\:feature { padding: 1.5rem; }
```

Inline tokens can reference other inline tokens. If an inline token references a regular theme token, Master CSS keeps the regular `var(--*)` reference and emits that regular token when needed. Inline tokens cannot be mode-specific; use normal `@theme light` and `@theme dark` blocks when a value must change by mode.

Use `@theme static` when a token or managed keyframes definition should be emitted as an initial CSS resource instead of waiting for a matching class.

```css name=index.css
@theme static {
  --color-brand: #4f46e5;
}
```

---

## Define responsive tokens
Responsive thresholds are theme tokens too. Define `breakpoint` variables for viewport condition suffixes, and define `container` variables for container query thresholds and width caps.

```css name=index.css
@theme {
  --breakpoint-sm: 40rem;
  --breakpoint-md: 48rem;
  --breakpoint-lg: 64rem;

  --container-sm: 24rem;
  --container-md: 28rem;
  --container-lg: 32rem;
}
```

```html
<!-- @MARK grid-cols:2@md --><!-- @MARK grid-cols:3@lg --><!-- @MARK max-w:lg --><!-- @MARK grid-cols:2@container(md) -->
<div class="grid-cols:1 gap:md grid-cols:2@md grid-cols:3@lg">
  ...
</div>

<aside class="container max-w:lg">
  <article class="grid-cols:1 grid-cols:2@container(md)">
    ...
  </article>
</aside>
```

Keep breakpoint tokens broad and product-wide. Use container tokens when a reusable component should respond to the space it receives. See [Breakpoints](/guide/breakpoints) and [Containers](/guide/containers) for the responsive scales.

---

## Define motion tokens
Motion values can be tokens too. Put reusable animation recipes, durations, easing curves, and managed keyframes in `@theme`.

```css name=index.css
@theme {
  --duration-enter: 180ms;
  --easing-standard: cubic-bezier(.4, 0, .2, 1);
  --animate-dialog-in: dialog-in var(--duration-enter) var(--easing-standard) both;

  @keyframes dialog-in {
    from { translate: 0 0.5rem; opacity: 0; }
    to { translate: 0; opacity: 1; }
  }
}
```

```html
<!-- @MARK animate:dialog-in -->
<dialog class="animate:dialog-in"></dialog>
```

Keyframes are emitted outside cascade layers, while animation utilities still generate in the utilities layer. For motion naming and usage, see [Motion](/guide/motion) and [Animation](/reference/animation).

---

## Continue with foundation guides
Use this page when you need to define or override project tokens. Continue into the design foundation guides for token-scale strategy:

* [Colors](/guide/colors)
* [Spacing](/guide/spacing)
* [Typography](/guide/typography)
* [Corner Radius](/guide/corner-radius)
* [Elevation](/guide/elevation)
* [Motion](/guide/motion)
* [Breakpoints](/guide/breakpoints)
* [Containers](/guide/containers)

---

# Typography

Source: https://rc.css.master.co/en/guide/typography

Summary: Use text scale tokens, font utilities, line height, letter spacing, families, and weights.

## Overview

Typography tokens define readable type scale, line height, letter spacing, font families, and font weights. Use `text:<size>` when you want a complete type treatment, and use lower-level typography utilities when you need to tune one property.

```html
<!-- @MARK text:lg --><!-- @MARK font:medium -->
<p class="text:lg font:medium">Readable product copy</p>
```
---

## Namespaces for typography
Typography is built from [theme tokens](/guide/theme) organized into focused namespaces.

Utilities search the relevant namespace, so `font:lg`, `leading:md`, and `tracking:tight` can use short token names without the full custom property prefix.

---

## All-in-one text scale
At its core, the system is powered by a semantic type scale from `text:3xs` to `text:10xl`. These values are calibrated as complete text treatments, not just mathematically scaled font sizes.

Use `text:<size>` to apply the tuned font size, line height, and letter spacing with one class.

* `text:3xs ~ text:xs` — For fine print, annotations, captions, or table labels
* `text:sm ~ text:lg` — Standard text sizes for body copy, paragraphs, and buttons
* `text:xl ~ text:3xl` — Ideal for subheadings, lead paragraphs, or callouts
* `text:4xl ~ text:10xl` — Reserved for large headings, page titles, and hero sections

Use `font:<size>` when you only want the font-size token. Use `leading:*` and `tracking:*` when the design intentionally adjusts line height or letter spacing separately.

### Body text

### Headings

### Page titles

### Without vs with `text:<size>`
Manually configuring typography often requires juggling `font-size`, `line-height`, and `letter-spacing`. This becomes inconsistent when the same heading or paragraph style appears across components.

      font:5xl
      Designing for consistency across every platform.

      text:5xl
      Designing for consistency across every platform.

(x) The type treatment is assembled manually.

```html
<h1 class="font:3xl leading:2.4rem tracking:-0.048em">...</h1>
```

(o) The type treatment uses the shared text scale.

```html
<h1 class="text:3xl">...</h1>
```

The `text:3xl` token applies a finely tuned combination:

Prefer `text:<size>` for repeated body, heading, and display styles. Reach for lower-level typography utilities only when the design intentionally departs from the text scale.

---

## Type scale
The font scale ranges from `font:3xs` to `font:10xl`, with each size intentionally designed to deliver visual harmony and clear hierarchy across a variety of use cases.

---

## Font families

See the [font family](/reference/font-family) reference for more details on how to add custom fonts.

---

## Font weights
Our typography system defines a semantic range of font weight tokens, from `font:thin` to `font:heavy`, providing clear naming for visual emphasis and typographic hierarchy.

* `font:thin` extra-light strokes for subtle or elegant UI elements
* `font:line` light weight, ideal for large headings or minimalist design
* `font:regular` default weight for body text and general readability
* `font:medium` slightly bolder for subheadings or emphasis
* `font:bold` strong emphasis, often used in call-to-action or UI labels
* `font:heavy` maximum weight for impact, branding, or visual anchors

---

## Line height

---

## Letter spacing

---

# Variables and Modes

Source: https://rc.css.master.co/en/guide/variables-and-modes

Summary: Understand how Master CSS resolves theme variables, emits CSS custom properties, and applies light, dark, and custom modes.

## Overview
Variables are the bridge between project vocabulary and generated CSS. Master CSS reads `@theme` blocks as manifest input, resolves token names into namespaces, and emits CSS custom properties only when a generated rule needs them.

Modes are named buckets for alternate variable values. They let the same class string adapt to light, dark, high-contrast, or product-specific themes without duplicating markup.

```css name=index.css
@import '@master/css';

@theme {
  --color-brand: #4f46e5;
  --spacing-card: 1.5rem;
}

@theme light {
  --color-surface-card: #ffffff;
}

@theme dark {
  --color-surface-card: #111827;
}
```

```html
<!-- @MARK bg:surface-card --><!-- @MARK p:card --><!-- @MARK bg:brand -->
<article class="bg:surface-card p:card">
  <button class="fg:white bg:brand">Save</button>
</article>
```

---

## Variable lifecycle
`@theme`, `@settings`, and `@custom-variant` directives are manifest inputs. Master CSS reads them before class generation, then emits only the variables, keyframes, and generated rules that the application uses.

```css name=index.css
@theme {
  --color-brand: #4f46e5;
}
```

```html
<!-- @MARK bg:brand -->
<button class="fg:white bg:brand">Save</button>
```

When `bg:brand` is generated, Master CSS resolves `brand` through the background color namespace and emits a declaration that references `--color-brand`. The variable itself is emitted in the `theme` layer.

Regular CSS custom property behavior still applies. Values inherit through the DOM, cascade by selector, and compute where the browser sees the declaration.

---

## Namespace resolution
A theme variable name has the shape `<namespace>-<key>`. Master CSS resolves the namespace by longest prefix, so `color-line-divider` belongs to `color-line`, not `color`.

```css name=index.css
@theme {
  --color-brand: #4f46e5;
  --color-text-action: var(--color-brand);
  --color-line-divider: rgb(0 0 0 / 12%);
  --spacing-card: 1.5rem;
  --radius-card: 0.75rem;
}
```

The utility decides which namespace it reads. The same key can mean different values in different contexts:

```html
<!-- @MARK p:card --><!-- @MARK r:card --><!-- @MARK text:action --><!-- @MARK b:1px|solid|divider -->
<article class="r:card b:1px|solid|divider p:card">
  <a class="text:action" href="/settings">Settings</a>
</article>
```

Full property names do not become token namespaces automatically. A namespace is available only when the preset registers it and a utility or native value namespace references it.

### Default namespace sources
The default theme vocabulary is registry-backed. This table lists the built-in condition namespace and the namespaces currently referenced by default utilities or native value namespaces.

---

## Contextual token lookup
Contextual utilities keep class strings short by searching the namespace they already understand.

| Class | Namespace searched |
| --- | --- |
| `p:md` | `spacing-md` |
| `r:md` | `radius-md` |
| `max-w:md` | `container-md` |
| `@md` | `breakpoint-md` |
| `text:body` | `color-text-body` |

This is why token keys should be named for their namespace. `md` can work across spacing, radius, container, and breakpoint scales because the utility supplies the missing context.

Use native CSS `var()` when a token should reference another theme token:

```css name=index.css
@theme {
  --color-brand: #4f46e5;
  --color-text-action: var(--color-brand);
}
```

---

## Inline and static variables
Regular theme variables emit CSS custom properties when generated rules need them. Inline variables behave like utility shorthands: Master CSS resolves the value and writes it directly into generated declarations.

```css name=index.css
@theme inline {
  --color-brand: #4f46e5;
  --spacing-feature: 1.5rem;
}
```

```html
<!-- @MARK bg:brand --><!-- @MARK p:feature -->
<article class="bg:brand p:feature">...</article>
```

```css
.bg\:brand { background-color: #4f46e5; }
.p\:feature { padding: 1.5rem; }
```

Inline variables can reference other inline variables. If an inline variable references a regular theme variable, Master CSS keeps the regular `var(--*)` reference and emits that dependency when needed. Inline variables cannot be mode-specific.

Use `@theme static` when a variable or managed keyframes definition should be emitted as an initial CSS resource instead of waiting for a matching class.

```css name=index.css
@theme static {
  --color-brand: #4f46e5;

  @keyframes fade-in {
    to { opacity: 1; }
  }
}
```

`inline` and `static` cannot be combined.

---

## Mode buckets
`light` and `dark` are always available. Defining another mode adds it to the theme automatically.

```css name=index.css
@theme light {
  --color-surface-card: #ffffff;
  --color-text-card: #111827;
}

@theme dark {
  --color-surface-card: #111827;
  --color-text-card: #f9fafb;
}

@theme contrast {
  --color-surface-card: #000000;
  --color-text-card: #ffffff;
}
```

```html
<!-- @MARK bg:surface-card --><!-- @MARK text:card -->
<article class="bg:surface-card text:card">...</article>
```

When a token has mode-specific values, generated utilities reference the same CSS custom property. The active mode changes the variable value, not the class name.

### Derived mode-aware values
Default theme variables are emitted on `:root`. If a default variable references a mode-specific variable, the browser computes the derived custom property where it is declared. A local `.dark` or `:host(.dark)` island can override the referenced token, but it does not recompute an inherited derived token.

```css name=index.css
@theme {
  --stripe: linear-gradient(135deg, var(--color-line-muted) 4.5%, var(--color-surface-raised) 0);
}
```

Define derived tokens inside each mode bucket when they must follow local mode islands:

```css name=index.css
@theme light {
  --stripe: linear-gradient(135deg, var(--color-line-muted) 4.5%, var(--color-surface-raised) 0);
}

@theme dark {
  --stripe: linear-gradient(135deg, var(--color-line-muted) 4.5%, var(--color-surface-raised) 0);
}
```

This is CSS custom property computed-value behavior, not a Master CSS selector issue.

---

## Mode triggers
`mode-trigger` controls how mode buckets are emitted.

```css name=index.css
@settings {
  default-mode: light;
  mode-trigger: media;
}
```

| Trigger | Output behavior |
| --- | --- |
| `media` | Uses `@media (prefers-color-scheme: <mode>)` for light and dark modes. |
| `class` | Uses class wrappers such as `.dark &`. Built-in `light` and `dark` mode buckets also emit native `color-scheme`. |
| `host` | Uses shadow host wrappers such as `:host(.dark) &`. Built-in `light` and `dark` host buckets also emit native `color-scheme`. |

`default-mode` controls which class-triggered or host-triggered mode also attaches to `:root` or `:host`. Set `default-mode: none;` when no mode should be applied by default. It has no effect with `mode-trigger: media`, because the browser decides the active color scheme from user or system preferences.

For manual theme switches, set `mode-trigger` to `class`:

```css name=index.css
@settings {
  mode-trigger: class;
  default-mode: light;
}
```

```html
<!-- @MARK dark -->
<html class="dark">
  <body>
    <div class="bg:surface-card text:card">...</div>
  </body>
</html>
```

Custom modes work best with `class` or `host`. Browsers only support `light` and `dark` values for `prefers-color-scheme`, so custom modes cannot work as native media-triggered color schemes.

---

## Project settings
Settings are not design tokens, but a few of them shape variable and class output.

```css name=index.css
@settings {
  root-size: 16;
  base-unit: 4;
  scope: #app;
}
```

`root-size` controls numeric conversion to root-relative units such as `rem`. `base-unit` controls multiplier units such as `1x`, `2x`, and `4x`. `scope` prefixes generated selectors when Master CSS should only style a specific application root.

For the complete directive syntax, see [Directives](/guide/directives). For authoring shared design vocabulary, see [Theme Tokens](/guide/theme).

---

# View Transitions

Source: https://rc.css.master.co/en/guide/view-transitions

Summary: Create state and page transitions with the browser View Transition API and Master CSS syntax.

## Overview
The [View Transition API](https://developer.mozilla.org/en-US/docs/Web/API/View_Transition_API) creates animated transitions between two visual states. It can handle same-document updates in an SPA and same-origin navigation between documents in an MPA.

In a same-document transition, call `document.startViewTransition()` and update the DOM inside its callback. The browser snapshots the old state, runs the update, snapshots the new state, then animates the old and new snapshots. Without custom CSS, the default transition is a smooth cross-fade.

(click) Select a view to run a same-document transition.

```js name=transition.js
const update = () => {
  document.querySelector('[data-current-view]').textContent = 'Product detail'
}

if (!document.startViewTransition) {
  update()
} else {
  document.startViewTransition(update)
}
```

The demo uses Master CSS classes to name the snapshots that should transition independently:

```html
<section class="view-transition-name:panel">
  <h3 class="view-transition-name:title">Product detail</h3>
</section>
```
Master CSS keeps the CSS side concise by expressing `view-transition-name`, `view-transition-class`, and native view-transition pseudo-elements directly in class names:

| Class syntax          | Use                                                              |
| --------------------- | ---------------------------------------------------------------- |
| `view-transition-name`             | Names an element snapshot so it can animate apart from the root. |
| `view-transition-class`            | Groups named snapshots for shared pseudo-element styling.        |
| `::view-transition`   | Targets the root view-transition pseudo-element tree.            |
| `::view-transition-group()`        | Styles the group box for a named snapshot.                       |
| `::view-transition-image-pair()`   | Styles the wrapper around the old and new snapshot images.       |
| `::view-transition-old()`          | Styles the outgoing snapshot image.                              |
| `::view-transition-new()`          | Styles the incoming snapshot image.                              |

---

## Article list to detail
A common use case is moving from an article feed to an article detail page. The selected article's image, title, and date can keep the same `view-transition-name` in both layouts, while the surrounding card grid and detail content change normally. This demo also uses `view-transition-class` so the transition timing applies only to article snapshots.

(click) Click Read More, then return to the article list.

In the list view, every article gets unique names for its shared elements:

```html
<article>
  <img
    alt="A mountain ridge under soft light"
    class="view-transition-class:article view-transition-name:article-image"
    src="/images/article-aurora.jpg"
  />
  <time class="view-transition-class:article view-transition-name:article-date">May 12, 2026</time>
  <h3 class="view-transition-class:article view-transition-name:article-title">
    Designing transitions that preserve context
  </h3>
  <p>...</p>
  <button>Read More</button>
</article>
```

In the detail view, render the same image, date, and title with the same names:

```html
<article>
  <img
    alt="A mountain ridge under soft light"
    class="view-transition-class:article view-transition-name:article-image"
    src="/images/article-aurora.jpg"
  />
  <time class="view-transition-class:article view-transition-name:article-date">May 12, 2026</time>
  <h1 class="view-transition-class:article view-transition-name:article-title">
    Designing transitions that preserve context
  </h1>
  <p>...</p>
</article>
```

The state update can stay framework-free. Replace the list with the detail markup inside `startViewTransition()`:

```js
const root = document.querySelector('[data-articles]')
const detailTemplate = document.querySelector('#article-detail')

document.querySelector('[data-read-more]').addEventListener('click', () => {
  const update = () => {
    root.replaceChildren(detailTemplate.content.cloneNode(true))
  }

  if (!document.startViewTransition) {
    update()
  } else {
    document.startViewTransition(update)
  }
})
```

    {[
      'view-transition-name:article-image',
      'view-transition-name:article-date',
      'view-transition-name:article-title',
      'view-transition-class:article',
      'animation-duration:.52s::view-transition-group(.article)'
    ]}

(i) Only one rendered element can use the same `view-transition-name` at a time. The list uses article-specific names such as `article-aurora-image`, `article-studio-image`, and `article-coast-image` so the selected card can match the detail page without colliding with other cards.

---

## Naming snapshots
By default, a view transition animates the `root` snapshot. Use `view-transition-name`, the [`view-transition-name`](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/view-transition-name) property, when one element needs to move, resize, or fade separately from the rest of the page.

```html
<!-- @MARK view-transition-name:hero -->
<article class="view-transition-name:hero">
  ...
</article>
```

The same `view-transition-name` must be unique in the rendered document. If two rendered elements have the same name at the same time, the transition is skipped. For lists that need automatic per-element names in same-document transitions, native CSS also provides `match-element`.

```html
<!-- @MARK view-transition-name:match-element -->
<li class="view-transition-name:match-element">...</li>
```

Use `view-transition-name:none` to keep an element out of its own separate snapshot.

```html
<!-- @MARK view-transition-name:none -->
<video class="view-transition-name:none">...</video>
```

---

## Styling transition pseudo-elements
The browser exposes transition snapshots through pseudo-elements such as `::view-transition-group()`, `::view-transition-old()`, and `::view-transition-new()`. MDN recommends styling the group when the same duration or timing should apply to both the old and new snapshots.

In Master CSS, write the pseudo-element after the declaration:

```html
<html class="
  animation:fade|fast|both::view-transition-new(hero)
  animation:fade|fast|both|reverse::view-transition-old(hero)
  animation-duration:slow::view-transition-group(hero)
">
```

    {[
      'animation-duration:slow::view-transition-group(hero)',
      'animation:fade|fast|both|reverse::view-transition-old(hero)',
      'animation:fade|fast|both::view-transition-new(hero)'
    ]}

(i) Apply these classes to the `html` element when you style global view-transition pseudo-elements. The pseudo-element tree is generated from the document root, so a class on an ordinary descendant will generate CSS but will not match the root transition pseudo-elements.

You can also group related named snapshots with `view-transition-class` and then target the class selector in the pseudo-element argument:

```html
<article class="view-transition-class:shared-card view-transition-name:product-card">
  ...
</article>

<html class="animation-duration:.36s::view-transition-group(.shared-card)">
```

---

## Cross-document transitions
For same-origin MPA navigation, opt in with native CSS in both the current and destination documents:

```css name=app.css
@view-transition {
  navigation: auto;
}
```

No JavaScript is required for the navigation itself. You can still use Master CSS on elements that should become named snapshots across pages:

```html
<!-- page A and page B both render one matching hero -->
<header class="view-transition-name:product-hero">
  ...
</header>
```

If both documents render one `product-hero` snapshot, the browser can animate that element between pages. If either page renders zero or more than one matching snapshot, the named transition will not run as intended.

---

## Fallbacks
View transitions are progressive enhancement. Always keep the DOM update valid without animation:

```js
const update = () => renderNextState()

if (!document.startViewTransition) {
  update()
} else {
  document.startViewTransition(update)
}
```

---

## Reduced motion
After the core transition works, add a motion preference layer. You can scope animation classes with `@motion`, which maps to `@media (prefers-reduced-motion: no-preference)`.

```html
<html class="animation-duration:.42s::view-transition-group(root)@motion">
```

Or skip the transition in JavaScript for motion-sensitive users:

```js
const shouldReduceMotion = window.matchMedia('(prefers-reduced-motion: reduce)').matches

if (!document.startViewTransition || shouldReduceMotion) {
  update()
} else {
  document.startViewTransition(update)
}
```

See MDN's [Using the View Transition API](https://developer.mozilla.org/en-US/docs/Web/API/View_Transition_API/Using) and web.dev's [View transitions for single page applications](https://web.dev/learn/css/view-transitions-spas) for deeper API behavior and browser examples.

---

# Console Messages

Source: https://rc.css.master.co/en/messages

Summary: Errors and warnings you may encounter when using Master CSS.

## Errors

## Warnings

---

# Hydration Errors

Source: https://rc.css.master.co/en/messages/hydration-errors

Summary: There was a difference between the CSS rules that was pre-rendered from the server and the Master CSS rules that was rendered during the first render in the browser.

## Causes
### Why this error occurred

1. The server's compiled project manifest does not match the client's.
2. The server's version does not match the client's.

---

## Solutions
### Import the same manifest
```ts name=server.ts
import manifest from 'virtual:master-css-manifest'
```
```ts name=client.ts
import manifest from 'virtual:master-css-manifest'
```

---

# Missing Master CSS entry

Source: https://rc.css.master.co/en/messages/missing-master-css

Summary: The integration could not find a project CSS entry for the shared MasterCSSManifest, editor tooling, and build integration behavior.

## Causes
### Why this warning occurred

An integration started without finding a project CSS entry in the current project directory.

```txt
[@master/css.vite] Master CSS entry was not found in /path/to/project.
Create /path/to/project/index.css and mark it as the project entry, for example:
  @import "@master/css";
  @import "./src/globals.css";
Master CSS uses this entry graph for integrations, language service, and VS Code. Imported CSS manifest directives participate in the graph.
```

Master CSS can still generate utility CSS without a project entry, but integrations and editor tooling use the project CSS entry to compile the shared MasterCSSManifest for tokens, component definitions, animations, and workspace behavior.

`@theme`, `@settings`, `@custom-variant`, and managed definition directives do not have to be written directly in the entry file. They can live in ordinary CSS files such as `src/globals.css` or `app/globals.css`, as long as the entry imports those files with a relative CSS import. The normal app entry imports `@master/css`; the lightweight `@master entry;` marker is also recognized when a stylesheet intentionally should not load the package stylesheet graph.

---

## Solutions
### Create a workspace entry

Create `index.css` at the project root and import your stylesheet entry.

```css name=index.css
@import '@master/css';
@import './src/globals.css';
```

Then keep tokens, component rules, animations, or other Master CSS manifest directives in that imported stylesheet or in files imported by it.

```css name=src/globals.css
@theme {
  --color-primary: #4f46e5;
}

@components {
  btn {
    @compose inline-flex items-center h:40px px:md r:md bg:primary fg:white;
  }
}
```

Ordinary CSS outside Master CSS directives stays native CSS and follows the integration's stylesheet behavior.

### Import an explicit manifest resource

If runtime code should intentionally use one CSS resource instead of the discovered project-level entry, import that resource with `?master-css-manifest`.

```ts name=src/main.ts
import CSSRuntime from '@master/css-runtime'
import manifest from './theme.css?master-css-manifest'

CSSRuntime.create({ manifest }).observe()
```

For lower-level APIs that accept a compiled manifest directly, pass a `MasterCSSManifest` through their `manifest` option.

### Ignore the warning

You can ignore this warning when the current project intentionally has no project CSS entry and does not need shared tokens, component definitions, animations, language-service workspace detection, or editor integration behavior.

---

# API Reference

Source: https://rc.css.master.co/en/reference

Summary: This section provides detailed reference documentation for working with Master CSS.

{categories
  .filter(category => category.name !== 'Overview')
  .map(category => (

      <h2>{category.name}</h2>

  ))}

---

# accent-color

Source: https://rc.css.master.co/en/reference/accent-color

Summary: Setting the accent color of user interface elements or controls.

## Overview

## Basic usage
### Set the accent color
Use the `accent-color:color` to set a custom accent color of user interface elements or controls.

    <input type="checkbox" defaultChecked
      className="inline-block size:16px mr:2xs r:xs vertical-align:middle" />

    <input type="checkbox" defaultChecked
      className="inline-block size:16px mr:2xs r:xs accent-color:red-50 transition:accent-color|.3s vertical-align:middle" />

```html
<label>
  <input type="checkbox" />
  <span>default color</span>
</label>
<label>
  <!-- @MARK accent-color:red-50 -->
  <input type="checkbox" class="accent-color:red-50">
  <span>Customized</span>
</label>
```

### Apply conditionally
Apply styles based on different states using [selectors](/guide/state-selectors) and [conditional queries](/guide/conditional-queries).
```html
<div class="accent-color:red-50:hover accent-color:red-50@dark accent-color:red-50@print accent-color:red-50@sm">…</div>
```

---

# align-content

Source: https://rc.css.master.co/en/reference/align-content

Summary: Controlling how multiple rows or columns are aligned along its cross axis.

## Overview

## Examples
### Align multiple rows or tracks
Use `content-*` utilities to distribute rows in a multi-line flex container or tracks in a grid container along the cross axis.
```html
<!-- @MARK flex --><!-- @MARK flex-wrap --><!-- @MARK content-between -->
<div class="flex flex-wrap content-between h:3xs">
  ...
</div>
```
### Center wrapped lines
Use `content-center` when the group of rows should sit in the middle of the container.
```html
<!-- @MARK content-center -->
<section class="grid content-center h:3xs">
  ...
</section>
```

`align-content` needs extra space in the cross axis. If there is only one line or no free space, it may not visibly change the layout.

### Apply conditionally
Apply styles based on different states using [selectors](/guide/state-selectors) and [conditional queries](/guide/conditional-queries).
```html
<div class="content-start content-start@print content-between@sm">...</div>
```

Use [align-items](/reference/align-items) for item alignment within each row.

---

# align-items

Source: https://rc.css.master.co/en/reference/align-items

Summary: Controlling how items are aligned along its cross axis.

## Overview

## Examples
### Align items on the cross axis
Use `items-*` utilities to align flex or grid items on the cross axis. In a default row flexbox, the cross axis is vertical.
```html
<!-- @MARK flex --><!-- @MARK items-center -->
<div class="flex items-center gap:sm">
  <img class="size:10x round" src="..." alt="" />
  <span>Aron</span>
</div>
```
### Align to the start or end
Use `items-start` or `items-end` when children should align to one edge of the cross axis.
```html
<!-- @MARK items-start -->
<article class="flex items-start gap:md">
  <img class="size:12x" src="..." alt="" />
  <p class="m:0">Longer text can wrap without vertically centering against the media.</p>
</article>
```

### Stretch children
Use `items-stretch` when children should fill the cross size of the container. The container needs a definite cross size for the stretch to be visible.
```html
<!-- @MARK items-stretch --><!-- @MARK h:32x -->
<div class="flex items-stretch gap:sm h:32x">
  <div>One</div>
  <div>Two</div>
</div>
```

### Align text baselines
Use `items-baseline` when inline text in differently sized children should sit on the same baseline.
```html
<!-- @MARK items-baseline -->
<div class="flex items-baseline gap:sm">
  <span class="font:2xl">24</span>
  <span class="font:sm">messages</span>
</div>
```

For one item only, use [align-self](/reference/align-self).

### Apply conditionally
Apply styles based on different states using [selectors](/guide/state-selectors) and [conditional queries](/guide/conditional-queries).
```html
<div class="items-start items-start@print items-center@sm items-stretch@lg">...</div>
```

Use [justify-content](/reference/justify-content) for the main axis.

---

# align-self

Source: https://rc.css.master.co/en/reference/align-self

Summary: Controlling how an individual item is aligned along its cross axis.

## Overview

## Examples
### Override cross-axis alignment for one item
Use `self-*` utilities when a single flex or grid item needs different cross-axis alignment than its siblings.
```html
<!-- @MARK flex --><!-- @MARK items-start --><!-- @MARK self-center -->
<div class="flex items-start gap:md">
  <img class="self-center size:10x" src="..." alt="" />
  <p class="m:0">Text that controls the row height.</p>
</div>
```
### Stretch a single item
Use `self-stretch` when one child should fill the cross size even if the group alignment is different.
```html
<!-- @MARK self-stretch -->
<button class="self-stretch">...</button>
```

Use [align-items](/reference/align-items) when all items should share the same alignment.

### Apply conditionally
Apply styles based on different states using [selectors](/guide/state-selectors) and [conditional queries](/guide/conditional-queries).
```html
<div class="self-auto self-auto@print self-center@sm">...</div>
```

The effect depends on the parent layout mode and axis.

---

# animation

Source: https://rc.css.master.co/en/reference/animation

Summary: Applying an animation between styles.

## Overview

## Basic usage
Use `animate:*` to apply a named animation token from the `animate` namespace. Use the native `animation:*` shorthand when you want to write the keyframe name, duration, easing, fill mode, and other animation parts together.

### Ping indicator
Use the `ping` animation to indicate that the shop is open.

```html
<svg class="inline-block overflow:visible size:2x fill:green-40" viewBox="0 0 8 8" xmlns="http://www.w3.org/2000/svg">
  <!-- @MARK animate:ping -->
  <circle class="animate:ping transform-origin:center" cx="4" cy="4" r="4" />
  <circle cx="4" cy="4" r="4" />
</svg>
```

### Rotate indicator
Use the counterclockwise `rotate` animation to indicate that data is being restored.

      <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
      <path d="M15 4.55a8 8 0 0 0 -6 14.9m0 -4.45v5h-5"></path>
      <path d="M18.37 7.16l0 .01"></path>
      <path d="M13 19.94l0 .01"></path>
      <path d="M16.84 18.37l0 .01"></path>
      <path d="M19.37 15.1l0 .01"></path>
      <path d="M19.94 11l0 .01"></path>

```html
<!-- @MARK animate:rotate -->
<svg class="animate:rotate animation-direction:reverse" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round" xmlns="http://www.w3.org/2000/svg">
  <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
  <path d="M15 4.55a8 8 0 0 0 -6 14.9m0 -4.45v5h-5"></path>
  <path d="M18.37 7.16l0 .01"></path>
  <path d="M13 19.94l0 .01"></path>
  <path d="M16.84 18.37l0 .01"></path>
  <path d="M19.37 15.1l0 .01"></path>
  <path d="M19.94 11l0 .01"></path>
</svg>
```

---

## Advanced usage
### Loading spinner
Use the `fade` animation on SVG paths with regular delays to create a loading spinner.

```html
<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
  <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
  <path className="animate:fade animation-delay:-.875s" d="M7.75 7.75l-2.15 -2.15"></path>
  <path className="animate:fade animation-delay:-.75s" d="M12 6l0 -3"></path>
  <path className="animate:fade animation-delay:-.625s" d="M16.25 7.75l2.15 -2.15"></path>
  <path className="animate:fade animation-delay:-.5s" d="M18 12l3 0"></path>
  <path className="animate:fade animation-delay:-.375s" d="M16.25 16.25l2.15 2.15"></path>
  <path className="animate:fade animation-delay:-.25s" d="M12 18l0 3"></path>
  <path className="animate:fade animation-delay:-.125s" d="M7.75 16.25l-2.15 2.15"></path>
  <path className="animate:fade" d="M6 12l-3 0"></path>
</svg>
```

### Apply conditionally
Apply styles based on different states using [selectors](/guide/state-selectors) and [conditional queries](/guide/conditional-queries).
```html
<div class="animate:fade:hover animate:fade@dark animate:fade@print animate:fade@sm">…</div>
```

---

## Customization

### Add your animations
Customize managed CSS animations with [`@theme` keyframes](/guide/motion#customize-motion-tokens).

---

# animation-delay

Source: https://rc.css.master.co/en/reference/animation-delay

Summary: Setting a time to delay before beginning to perform the animation.

## Overview

## Examples
### Delay animation start
Use `animation-delay:*` to wait before the first animation cycle begins.
```html
<!-- @MARK animation-delay:120ms -->
<div class="animation-delay:120ms animation-duration:300ms animation-name:fade">
  Staggered item
</div>
```
### Offset looping animations
Negative delays start an animation partway through its cycle. This is useful for spinner segments that should not all begin at the same frame.
```html
<!-- @MARK animation-delay:-120ms -->
<svg class="animation-delay:-120ms animation-duration:1s animation-name:fade">
  ...
</svg>
```

### Stagger a list
Apply increasing delays to siblings when each item should enter after the previous one.
```html
<li class="animation-delay:0ms animation-name:fade">One</li>
<li class="animation-delay:80ms animation-name:fade">Two</li>
<li class="animation-delay:160ms animation-name:fade">Three</li>
```

### Use duration tokens
Define `duration-*` tokens when the same delay appears across several animation patterns. This example assumes your project defines a `fade` keyframe.

```css name=index.css
@theme {
  --duration-stagger: 120ms;
}
```

```html
<li class="animation:fade|fast|smooth animation-delay:stagger">...</li>
```

### Apply conditionally
Apply styles based on different states using [selectors](/guide/state-selectors) and [conditional queries](/guide/conditional-queries).
```html
<div class="animation-delay:120ms:hover animation-delay:0ms@print animation-delay:0ms@sm">...</div>
```

---

# animation-direction

Source: https://rc.css.master.co/en/reference/animation-direction

Summary: Setting the direction of the animation.

## Overview

Use the native animation direction property directly.
```html
<div class="animation-direction:reverse">
```

---

## Basic usage
### Play forward
The animation plays forward in each cycle.

### Play backward
The animation plays backward in each cycle. For example, rotate counterclockwise.

### Play alternately
The animation **reverses direction each cycle** and **the first iteration plays forward**.

### Play alternately and reverse first
The animation **reverses direction each cycle** and **the first iteration plays backward**.

### Fade out
Reverse a project-defined `fade` keyframe so that you don't need to define a new keyframe for `fade-out`.

```html
<!-- @MARK animation-name:fade --><!-- @MARK animation-direction:reverse -->
<svg class="animation-direction:reverse animation-duration:1s animation-iteration-count:infinite animation-name:fade">…</svg>
```
For one-shot animations, remove `infinite`.

### Apply conditionally
Apply styles based on different states using [selectors](/guide/state-selectors) and [conditional queries](/guide/conditional-queries).
```html
<div class="animation-direction:normal:hover">…</div>
<div class="animation-direction:normal@sm">…</div>
<div class="animation-direction:normal@dark">…</div>
<div class="animation-direction:normal@print">…</div>
```

---

# animation-duration

Source: https://rc.css.master.co/en/reference/animation-duration

Summary: Setting the length of time that an animation takes to complete one cycle.

## Overview

## Examples
### Set animation speed
Use `animation-duration:*` to define how long one cycle of the keyframes takes.
```html
<!-- @MARK animation-duration:300ms -->
<div class="animation-duration:300ms animation-fill-mode:both animation-name:fade">
  Fades in
</div>
```
### Slow down looping motion
Looping indicators should often use a steady, readable duration so they do not distract from nearby content.
```html
<!-- @MARK animation-duration:1s -->
<svg class="animation-duration:1s animation-name:rotate animation-timing-function:linear">
  ...
</svg>
```

### Remove animation in static output
Use `animation-duration:0ms` when an animation should resolve immediately in print or other static contexts.
```html
<!-- @MARK animation-duration:0ms@print -->
<div class="animation-duration:300ms animation-duration:0ms@print">
  Static print state
</div>
```

### Apply conditionally
Apply styles based on different states using [selectors](/guide/state-selectors) and [conditional queries](/guide/conditional-queries).
```html
<div class="animation-duration:300ms:hover animation-duration:0ms@print animation-duration:1s@sm">...</div>
```

---

# animation-fill-mode

Source: https://rc.css.master.co/en/reference/animation-fill-mode

Summary: Setting how a CSS animation applies styles to its target before and after its execution.

## Overview

## Examples
### Keep the final keyframe
Use `animation-fill-mode:forwards` when the element should keep the values from the final keyframe after the animation completes.
```html
<!-- @MARK animation-fill-mode:forwards -->
<div class="animation-duration:300ms animation-fill-mode:forwards animation-name:fade">
  Remains visible
</div>
```
### Apply both before and after states
Use `animation-fill-mode:both` when the element should use the first keyframe during a positive delay and keep the final keyframe after completion.
```html
<!-- @MARK animation-fill-mode:both -->
<div class="animation-delay:120ms animation-duration:300ms animation-fill-mode:both animation-name:fade">
  Delayed entrance
</div>
```

### Reset fill behavior
Use `animation-fill-mode:none` when the element should return to its ordinary styles before and after animation.
```html
<!-- @MARK animation-fill-mode:none -->
<div class="animation-fill-mode:none">
  Uses base styles outside the animation
</div>
```

### Apply conditionally
Apply styles based on different states using [selectors](/guide/state-selectors) and [conditional queries](/guide/conditional-queries).
```html
<div class="animation-fill-mode:both:hover animation-fill-mode:none@print animation-fill-mode:none@sm">...</div>
```

---

# animation-iteration-count

Source: https://rc.css.master.co/en/reference/animation-iteration-count

Summary: Setting the number of times an animation should be played.

## Overview

## Examples
### Loop animation
Use `animation-iteration-count:infinite` when an animation should repeat until the state changes.
```html
<!-- @MARK animation-iteration-count:infinite -->
<div class="animation-duration:1s animation-iteration-count:infinite animation-name:rotate animation-timing-function:linear">
  Loading
</div>
```
### Specify N iterations
Use a number for one-shot or limited loops. Decimal values are valid when you need an animation to stop partway through a cycle.
```html
<!-- @MARK animation-iteration-count:3 -->
<div class="animation-duration:300ms animation-iteration-count:3 animation-name:fade">
  Repeats three times
</div>
```

### Pair with fill mode
When the last iteration should leave the element in its final state, combine the count with `animation-fill-mode:forwards` or `animation-fill-mode:both`.
```html
<div class="animation-fill-mode:both animation-iteration-count:1 animation-name:fade">
  Ends at the final keyframe
</div>
```

### Apply conditionally
Apply styles based on different states using [selectors](/guide/state-selectors) and [conditional queries](/guide/conditional-queries).
```html
<div class="animation-iteration-count:infinite:hover animation-iteration-count:1@print animation-iteration-count:3@sm">...</div>
```

---

# animation-name

Source: https://rc.css.master.co/en/reference/animation-name

Summary: Setting the names of the animation.

## Overview

## Examples
### Choose the keyframes to run
Use `animation-name:*` to select a named keyframes rule while controlling the other animation parts separately.
```html
<!-- @MARK animation-name:fade -->
<div class="animation-duration:300ms animation-name:fade animation-timing-function:ease-out">
  Saved
</div>
```
### Disable an animation
Use `animation-name:none` when the element should keep the rest of its animation settings but stop running keyframes in a specific condition.
```html
<!-- @MARK animation-name:none@print -->
<div class="animation-name:fade animation-name:none@print">
  No animation in print
</div>
```

### Combine with timing longhands
The name alone does not define how long the animation runs. Pair it with duration, timing, delay, iteration count, and fill mode as needed.
```html
<span class="animation-duration:200ms animation-fill-mode:both animation-name:fade">
  Appears once
</span>
```

### Apply conditionally
Apply styles based on different states using [selectors](/guide/state-selectors) and [conditional queries](/guide/conditional-queries).
```html
<div class="animation-name:fade:hover animation-name:none@print animation-name:fade@sm">...</div>
```

---

# animation-play-state

Source: https://rc.css.master.co/en/reference/animation-play-state

Summary: Setting whether an animation is running or paused.

## Overview

## Examples
### Run an animation
Use `animation-play-state:running` to ensure an animation is active when another state may pause it.
```html
<!-- @MARK animation-play-state:running -->
<div class="animation-duration:1s animation-iteration-count:infinite animation-name:rotate animation-play-state:running">
  Running
</div>
```
### Pause animation
Use `animation-play-state:paused` when an animation should stop without resetting its current frame.
```html
<!-- @MARK animation-play-state:paused -->
<button class="animation-duration:1s animation-iteration-count:infinite animation-name:rotate animation-play-state:paused:hover">
  Pause on hover
</button>
```

### Pause nonessential motion
Pause decoration when the user is interacting with the control or when the motion would compete with a more important state.
```html
<div class="animation-play-state:running animation-play-state:paused:focus-within">
  Interactive panel
</div>
```

### Apply conditionally
Apply styles based on different states using [selectors](/guide/state-selectors) and [conditional queries](/guide/conditional-queries).
```html
<div class="animation-play-state:paused:hover animation-play-state:paused@print animation-play-state:running@sm">...</div>
```

---

# animation-timing-function

Source: https://rc.css.master.co/en/reference/animation-timing-function

Summary: Setting speed curve of the animation.

## Overview

## Examples
### Set keyframe easing
Use `animation-timing-function:*` to control how keyframes progress between each keyframe stop.
```html
<!-- @MARK animation-timing-function:ease-out -->
<div class="animation-duration:300ms animation-name:fade animation-timing-function:ease-out">
  Enters
</div>
```
### Use linear timing for rotation
Continuous indicators usually need `linear` so the motion does not speed up and slow down every cycle.
```html
<!-- @MARK animation-timing-function:linear -->
<svg class="animation-duration:1s animation-name:rotate animation-timing-function:linear">
  ...
</svg>
```

### Match easing to intent
Use `ease-out` for entrance motion and `ease-in` for exit motion. Prefer `linear` for clocks, progress, and loading rotation.
```html
<!-- @MARK animation-timing-function:ease-in -->
<div class="animation-timing-function:ease-out animation-timing-function:ease-in:hover">
  Dismiss
</div>
```

### Apply conditionally
Apply styles based on different states using [selectors](/guide/state-selectors) and [conditional queries](/guide/conditional-queries).
```html
<div class="animation-timing-function:ease-out:hover animation-timing-function:ease-in@print animation-timing-function:linear@sm">...</div>
```

---

# appearance

Source: https://rc.css.master.co/en/reference/appearance

Summary: Controlling the native appearance of UI controls.

## Overview

## Examples
### Remove default styling
Use `appearance:none` to remove the browser's native control styling before applying your own visual treatment.

    <option>Yes</option>
    <option>No</option>
```html
<!-- @MARK appearance:none -->
<select class="appearance:none">
  <option>Yes</option>
  <option>No</option>
</select>
```
### Restore native appearance
Use `appearance:auto` when a variant should return to the platform control instead of the custom one.
```html
<!-- @MARK appearance:auto -->
<select class="appearance:none appearance:auto@sm">
  <option>Native on larger screens</option>
</select>
```

### Keep semantics intact
`appearance:none` only changes rendering. Keep using the correct form element and accessible label.
```html
<label>
  Sort
  <select class="appearance:none">
    <option>Newest</option>
  </select>
</label>
```

### Apply conditionally
Apply styles based on different states using [selectors](/guide/state-selectors) and [conditional queries](/guide/conditional-queries).
```html
<select class="appearance:none:hover appearance:auto@print appearance:auto@sm">...</select>
```

---

# aspect-ratio

Source: https://rc.css.master.co/en/reference/aspect-ratio

Summary: Setting the ratio for the box.

## Overview

## Examples
### Set a custom ratio
Use `aspect-ratio:<ratio>` to reserve a proportional box before media or content finishes loading.
```html
<!-- @MARK aspect-ratio:4/3 --><!-- @MARK w:full -->
<img class="w:full aspect-ratio:4/3 object-cover" src="..." alt="" />
```
### Use square and video shortcuts
Use `square` for `1 / 1` and `video` for a common widescreen media frame.
```html
<!-- @MARK square -->
<div class="square bg:gray-5"></div>

<!-- @MARK video -->
<iframe class="w:full video" src="..." title="Product walkthrough"></iframe>
```

### Pair with one explicit axis
Aspect ratio needs at least one axis to be resolved by width, height, or content. The common pattern is a fluid width with an aspect ratio.
```html
<!-- @MARK w:full --><!-- @MARK max-w:4xl --><!-- @MARK aspect-ratio:16/9 -->
<figure class="w:full max-w:4xl aspect-ratio:16/9">
  ...
</figure>
```

If both width and height are fixed, the browser follows those dimensions and the ratio is only a preferred constraint.

### Use the video shortcut
Use `video` when you need the common `16 / 9` media frame.
```html
<figure class="w:full video">...</figure>
```

### Choose size for fixed squares
Use [size](/reference/size) for fixed square UI elements. Use `aspect-ratio:*` when at least one axis should remain fluid.
```html
<!-- @MARK size:10x -->
<button class="size:10x round">...</button>
```

### Apply conditionally
Apply styles based on different states using [selectors](/guide/state-selectors) and [conditional queries](/guide/conditional-queries).
```html
<div class="aspect-ratio:1/1 aspect-ratio:16/9@dark aspect-ratio:auto@print aspect-ratio:4/3@sm">...</div>
```

Use `object-cover` or `object-contain` on replaced media when the content should adapt inside the reserved ratio.

---

# backdrop-filter

Source: https://rc.css.master.co/en/reference/backdrop-filter

Summary: Style syntax for applying filter effects to the area behind an target element.

## Overview

## Examples
### Blur content behind an element
Use `backdrop-filter:blur(...)` to apply a backdrop filter to pixels behind the element.
```html
<!-- @MARK bg:white/.72 --><!-- @MARK backdrop-filter:blur(12px) -->
<header class="bg:white/.72 backdrop-filter:blur(12px)">
  ...
</header>
```
### Combine with translucent backgrounds
Backdrop filters are only visible when the element lets the backdrop show through, usually with an alpha background.
```html
<!-- @MARK bg:white/.64 --><!-- @MARK backdrop-filter:saturate(1.5) -->
<div class="bg:white/.64 backdrop-filter:saturate(1.5)">...</div>
```

### Reset backdrop filters
Use `backdrop-filter:none` to disable a backdrop filter.
```html
<!-- @MARK backdrop-filter:none -->
<div class="backdrop-filter:none@print">...</div>
```

### Apply conditionally
Apply styles based on different states using [selectors](/guide/state-selectors) and [conditional queries](/guide/conditional-queries).
```html
<div class="backdrop-filter:none backdrop-filter:none@print backdrop-filter:blur(12px)@sm">...</div>
```

Backdrop filters can be costly and browser-dependent; verify important surfaces in target browsers.

---

# background

Source: https://rc.css.master.co/en/reference/background

Summary: Setting all background style properties at once.

## Overview

## Examples
### Use the background shorthand
Use `bg:*` with pipe separators when several background longhands should be set together.
```html
<!-- @MARK bg:url(/hero.jpg)|center/cover|no-repeat -->
<section class="bg:url(/hero.jpg)|center/cover|no-repeat">
  ...
</section>
```
### Prefer focused utilities for simple changes
Use [background-color](/reference/background-color), [background-image](/reference/background-image), [background-position](/reference/background-position), [background-size](/reference/background-size), and [background-repeat](/reference/background-repeat) when only one background part should change.
```html
<!-- @MARK bg:white --><!-- @MARK bg-center --><!-- @MARK bg-cover -->
<article class="bg-center bg-cover bg:white">
  ...
</article>
```

The native `background` shorthand resets several background longhands. Use it intentionally when that reset is part of the design.

### Apply conditionally
Apply styles based on different states using [selectors](/guide/state-selectors) and [conditional queries](/guide/conditional-queries).
```html
<div class="bg:white bg:white@print bg:url(/hero.jpg)|center/cover|no-repeat@sm">...</div>
```

Use layered backgrounds with comma-separated values only when the visual needs multiple images or gradients.

---

# background-attachment

Source: https://rc.css.master.co/en/reference/background-attachment

Summary: Setting whether position of background image is fixed when scrolling.

## Overview

## Examples
### Scroll with the element
Use `bg-scroll` for the normal background attachment behavior.
```html
<!-- @MARK bg-scroll -->
<section class="bg-scroll">...</section>
```
### Fix a background to the viewport
Use `bg-fixed` when the background should stay fixed relative to the viewport.
```html
<!-- @MARK bg-fixed --><!-- @MARK bg-cover -->
<section class="bg-cover bg-fixed">...</section>
```

Fixed backgrounds can behave differently on mobile browsers. Keep the effect decorative and verify it on target devices.

### Attach to scrollable content
Use `bg-local` when the background should scroll with the element's contents.
```html
<!-- @MARK bg-local --><!-- @MARK overflow:auto -->
<div class="overflow:auto bg-local">...</div>
```

### Apply conditionally
Apply styles based on different states using [selectors](/guide/state-selectors) and [conditional queries](/guide/conditional-queries).
```html
<div class="bg-scroll bg-scroll@print bg-fixed@lg">...</div>
```

Use motion and contrast carefully when fixed backgrounds sit behind text.

---

# background-blend-mode

Source: https://rc.css.master.co/en/reference/background-blend-mode

Summary: Setting how an element's background images should blend with the background color.

## Overview

## Examples
### Blend background layers
Use `background-blend-mode:*` when multiple background layers or a background image and color should blend together.
```html
<!-- @MARK bg:url(/hero.jpg) --><!-- @MARK bg:blue-60/.4 --><!-- @MARK background-blend-mode:multiply -->
<section class="background-blend-mode:multiply bg:blue-60/.4 bg:url(/hero.jpg)">
  ...
</section>
```
### Restore normal blending
Use `background-blend-mode:normal` to remove a blend mode at a breakpoint or state.
```html
<!-- @MARK background-blend-mode:normal -->
<section class="background-blend-mode:normal">...</section>
```

For blending the whole element with content behind it, use [mix-blend-mode](/reference/mix-blend-mode).

### Apply conditionally
Apply styles based on different states using [selectors](/guide/state-selectors) and [conditional queries](/guide/conditional-queries).
```html
<div class="background-blend-mode:normal background-blend-mode:normal@print background-blend-mode:multiply@sm">...</div>
```

Check contrast after blending, especially when text sits on top of the background.

---

# background-clip

Source: https://rc.css.master.co/en/reference/background-clip

Summary: Controlling how clip the background.

## Overview

## Examples
### Clip a background to a box
Use `bg-clip-border`, `bg-clip-padding`, or `bg-clip-content` to control where the background is painted.
```html
<!-- @MARK bg-clip-padding -->
<section class="b:8px|solid|black/.1 bg-clip-padding">
  ...
</section>
```
### Clip a background to text
Use `bg-clip-text` with a transparent text fill when a gradient or image should show through the glyphs.
```html
<!-- @MARK bg-clip-text --><!-- @MARK text-fill-color:transparent -->
<h1 class="bg-clip-text bg:linear-gradient(90deg,red,blue) text-fill-color:transparent">
  Gradient text
</h1>
```

Use this for display text, not body copy, because it can reduce contrast and selection readability.

### Apply conditionally
Apply styles based on different states using [selectors](/guide/state-selectors) and [conditional queries](/guide/conditional-queries).
```html
<div class="bg-clip-border bg-clip-border@print bg-clip-padding@sm">...</div>
```

Use [background-origin](/reference/background-origin) when the issue is positioning rather than painting.

---

# background-color

Source: https://rc.css.master.co/en/reference/background-color

Summary: Setting the background color of an element.

## Overview

---

## Basic usage
### With opacity
Add the suffix `/alpha` to change the opacity of any color.

Use `bg:*` for preset palette colors, project theme colors, and one-off colors.
```html
<!-- @MARK bg:blue --><!-- @MARK bg:pink/.12 -->
<section class="bg:blue">...</section>
<span class="bg:pink/.12">Badge</span>
```
Use alpha suffixes for local overlays, badges, and hover states. Add project theme colors only when a repeated color decision needs a shared name.

### Apply conditionally
Apply styles based on different states using [selectors](/guide/state-selectors) and [conditional queries](/guide/conditional-queries).
```html
<div class="bg:blue bg:pink/.12:hover bg:white@print">...</div>
```

---

# background-image

Source: https://rc.css.master.co/en/reference/background-image

Summary: Setting background images on an element.

## Overview

## Examples
### Add a background image
Use `bg:url(...)` to set `background-image`.
```html
<!-- @MARK bg:url(/hero.jpg) -->
<section class="bg-center bg-cover bg:url(/hero.jpg)">
  ...
</section>
```
### Use gradients
Use native CSS gradient functions directly in the class.
```html
<!-- @MARK bg:linear-gradient(90deg,red,blue) -->
<div class="bg:linear-gradient(90deg,red,blue)">
  ...
</div>
```

Pair image utilities with [background-position](/reference/background-position), [background-size](/reference/background-size), and [background-repeat](/reference/background-repeat) unless you intentionally want the full [background](/reference/background) shorthand.

### Apply conditionally
Apply styles based on different states using [selectors](/guide/state-selectors) and [conditional queries](/guide/conditional-queries).
```html
<div class="background-image:none background-image:none@print bg:url(/hero.jpg)@sm">...</div>
```

Use local or bundled assets according to the framework integration you are using.

---

# background-origin

Source: https://rc.css.master.co/en/reference/background-origin

Summary: Setting the background's origin.

## Overview

## Examples
### Choose the background positioning area
Use `bg-origin-padding`, `bg-origin-border`, or `bg-origin-content` to decide which box positions the background image.
```html
<!-- @MARK bg-origin-content -->
<section class="p:md b:1px|solid|gray-20 bg-origin-content">
  ...
</section>
```
### Align art with borders or content
Use `bg-origin-border` when the background should start from the border box, and `bg-origin-content` when it should align with the content box.
```html
<!-- @MARK bg-origin-border --><!-- @MARK bg-origin-content -->
<div class="bg-origin-border">...</div>
<div class="bg-origin-content">...</div>
```

This affects positioning and sizing, not clipping. Use [background-clip](/reference/background-clip) to control where the background is painted.

### Apply conditionally
Apply styles based on different states using [selectors](/guide/state-selectors) and [conditional queries](/guide/conditional-queries).
```html
<div class="bg-origin-padding bg-origin-padding@print bg-origin-content@sm">...</div>
```

---

# background-position

Source: https://rc.css.master.co/en/reference/background-position

Summary: Setting the initial position for background image.

## Overview

## Examples
### Position a background image
Use `bg-center`, `bg-top`, `bg-right`, `bg-bottom`, or `bg-left` to set `background-position`.
```html
<!-- @MARK bg:url(/hero.jpg) --><!-- @MARK bg-center -->
<section class="bg-center bg-cover bg:url(/hero.jpg)">
  ...
</section>
```
### Use explicit positions
Use `background-position:*` when you need two-value or measured positions.
```html
<!-- @MARK background-position:50%|25% -->
<div class="background-position:50%|25%">...</div>
```

### Apply conditionally
Apply styles based on different states using [selectors](/guide/state-selectors) and [conditional queries](/guide/conditional-queries).
```html
<div class="bg-center bg-center@print bg-top@sm">...</div>
```

Position changes are most visible when the image is larger than the background area or when `bg-cover` crops the image.

---

# background-repeat

Source: https://rc.css.master.co/en/reference/background-repeat

Summary: Setting how background images are repeated.

## Overview

## Examples
### Disable tiling
Use `bg-no-repeat` when a background image should render once.
```html
<!-- @MARK bg:url(/hero.jpg) --><!-- @MARK bg-no-repeat -->
<section class="bg-no-repeat bg:url(/hero.jpg)">
  ...
</section>
```
### Repeat on one axis
Use `bg-repeat-x` or `bg-repeat-y` for stripes, dividers, and patterned backgrounds.
```html
<!-- @MARK bg-repeat-x -->
<div class="bg-repeat-x">...</div>
```

Use `background-repeat:*` for values that do not have a shortcut.

### Apply conditionally
Apply styles based on different states using [selectors](/guide/state-selectors) and [conditional queries](/guide/conditional-queries).
```html
<div class="bg-no-repeat bg-no-repeat@print bg-repeat@sm">...</div>
```

Most photographic backgrounds should use `bg-no-repeat`; repeating is mainly for patterns.

---

# background-size

Source: https://rc.css.master.co/en/reference/background-size

Summary: Setting the size of the background image.

## Overview

## Examples
### Cover a frame
Use `bg-cover` when the background image should fill the element and may be cropped.
```html
<!-- @MARK bg:url(/hero.jpg) --><!-- @MARK bg-cover -->
<section class="bg-cover bg:url(/hero.jpg)">
  ...
</section>
```
### Contain an image
Use `bg-contain` when the entire background image should remain visible.
```html
<!-- @MARK bg-contain --><!-- @MARK bg-no-repeat -->
<div class="bg-contain bg-no-repeat">...</div>
```

### Use measured sizes
Use `background-size:*` for measured or multi-layer sizes.
```html
<!-- @MARK background-size:12x|12x -->
<div class="background-size:12x|12x">...</div>
```

### Apply conditionally
Apply styles based on different states using [selectors](/guide/state-selectors) and [conditional queries](/guide/conditional-queries).
```html
<div class="bg-contain bg-auto@print bg-cover@sm">...</div>
```

Pair size with [background-position](/reference/background-position) to control the crop.

---

# border

Source: https://rc.css.master.co/en/reference/border

Summary: Setting an element’s border.

## Overview

## Examples
### Set width, style, and color together
Use `b:<size>|<style>|<color>` for the native border shorthand.
```html
<!-- @MARK b:1px|solid|gray-20 -->
<div class="b:1px|solid|gray-20">
  ...
</div>
```
### Set one side or one axis
Use `bt`, `br`, `bb`, and `bl` for one side. Use `bx` and `by` for logical axes.
```html
<!-- @MARK bt:1px|solid|gray-20 --><!-- @MARK bx:1px|solid|gray-20 -->
<header class="bb:1px|solid|gray-20">...</header>
<section class="bx:1px|solid|gray-20">...</section>
```

### Use focused border utilities
Use [border-width](/reference/border-width), [border-style](/reference/border-style), and [border-color](/reference/border-color) when only one part of the border should change.
```html
<!-- @MARK b:1px --><!-- @MARK b-solid -->
<div class="b-solid b:1px">...</div>
```

### Apply conditionally
Apply styles based on different states using [selectors](/guide/state-selectors) and [conditional queries](/guide/conditional-queries).
```html
<div class="b:1px|solid|gray-20 b:1px|solid|blue-60:hover b:0@print">...</div>
```

The border shorthand resets border width, style, and color for the targeted side or axis.

---

# border-collapse

Source: https://rc.css.master.co/en/reference/border-collapse

Summary: Setting whether table cell have shared or separate borders.

## Overview

## Examples
### Collapse table borders
Use `border-collapse:collapse` when adjacent table cell borders should merge into a single border.
```html
<!-- @MARK border-collapse:collapse -->
<table class="border-collapse:collapse">
  <tr><td>Cell</td></tr>
</table>
```
### Separate table borders
Use `border-collapse:separate` when cells need their own border boxes and spacing.
```html
<!-- @MARK border-collapse:separate -->
<table class="border-collapse:separate">
  <tr><td>Cell</td></tr>
</table>
```

### Match border spacing to the mode
Collapsed borders ignore `border-spacing`. Use separate borders when spacing between cells is part of the design.
```html
<table class="border-collapse:separate border-spacing:xs">
  <tr><td>Cell</td></tr>
</table>
```

### Apply conditionally
Apply styles based on different states using [selectors](/guide/state-selectors) and [conditional queries](/guide/conditional-queries).
```html
<table class="border-collapse:collapse border-collapse:collapse@print border-collapse:separate@sm">...</table>
```

---

# border-color

Source: https://rc.css.master.co/en/reference/border-color

Summary: Setting the color of an element’s border.

## Overview

## Examples
### Set border color
Use `border-color:*` when only the border color should change.
```html
<!-- @MARK border-color:blue-60 -->
<div class="b:1px|solid border-color:blue-60">
  Primary border
</div>
```
### Use side-specific color utilities
Use side aliases when only one edge should change.
```html
<!-- @MARK bt:transparent -->
<div class="b:1px|solid|gray-20 bt:transparent">
  No top border color
</div>
```

### Follow the current text color
Use `border-color:currentColor` when the border should track the foreground color.
```html
<!-- @MARK border-color:currentColor -->
<button class="b:1px|solid border-color:currentColor fg:blue-60">
  Current color
</button>
```

### Apply conditionally
Apply styles based on different states using [selectors](/guide/state-selectors) and [conditional queries](/guide/conditional-queries).
```html
<div class="border-color:blue-60:hover border-color:transparent@print border-color:currentColor@sm">...</div>
```

---

## Customization
### Customize line colors
Define a project line color token when separators need a semantic, mode-aware value.
```css name=index.css
@theme light {
  --color-line-divider: --alpha(var(--color-slate-60) / 20%); /* [!code highlight] */
}

@theme dark {
  --color-line-divider: --alpha(var(--color-gray-30) / 20%); /* [!code highlight] */
}
```
Apply the token to a border color.
```html
<div class="b:1px|solid border-color:divider"></div>
```

---

# border-image

Source: https://rc.css.master.co/en/reference/border-image

Summary: Drawing an image around an element as its border.

## Overview

## Basic usage
### Draw a gradient border image
Use `border-image` to set the source, slice, optional width, outset, and repeat behavior in one declaration. Keep a regular border width and style as a fallback.

```html
<!-- @MARK b:16px|solid|transparent -->
<!-- @MARK border-image:linear-gradient(45deg,dodgerblue,hotpink)|30 -->
<div class="b:16px|solid|transparent border-image:linear-gradient(45deg,dodgerblue,hotpink)|30">
  Gradient border image
</div>
```

### Include width and repeat
The shorthand can also include border image width after `/` and repeat behavior after `|`.
```html
<!-- @MARK border-image:linear-gradient(45deg,dodgerblue,hotpink)|30/16|round -->
<div class="b:16px|solid|transparent border-image:linear-gradient(45deg,dodgerblue,hotpink)|30/16|round">
  Rounded repeat border image
</div>
```

### Apply conditionally
Apply styles based on different states using [selectors](/guide/state-selectors) and [conditional queries](/guide/conditional-queries).
```html
<div class="border-image:linear-gradient(45deg,dodgerblue,hotpink)|30:hover border-image:linear-gradient(45deg,dodgerblue,hotpink)|30@dark border-image:linear-gradient(45deg,dodgerblue,hotpink)|30@print border-image:linear-gradient(45deg,dodgerblue,hotpink)|30@sm">…</div>
```

---

# border-image-outset

Source: https://rc.css.master.co/en/reference/border-image-outset

Summary: Setting how far the border image extends beyond the border box.

## Overview

## Basic usage
### Extend the border image outside the box
Use `border-image-outset` to paint the border image beyond the element's border box. The outset area does not create extra layout space.

```html
<!-- @MARK border-image-outset:8 -->
<div class="b:12px|solid|transparent border-image-outset:8 border-image-slice:30 border-image-source:linear-gradient(45deg,dodgerblue,hotpink)">
  Outset 8
</div>
```

### Use separate vertical and horizontal values
```html
<!-- @MARK border-image-outset:8|16 -->
<div class="b:12px|solid|transparent border-image-outset:8|16 border-image-slice:30 border-image-source:linear-gradient(45deg,dodgerblue,hotpink)">
  Vertical and horizontal outset
</div>
```

### Apply conditionally
Apply styles based on different states using [selectors](/guide/state-selectors) and [conditional queries](/guide/conditional-queries).
```html
<div class="border-image-outset:8:hover border-image-outset:8@dark border-image-outset:8@print border-image-outset:8@sm">…</div>
```

---

# border-image-repeat

Source: https://rc.css.master.co/en/reference/border-image-repeat

Summary: Defining how border image edge regions fit the border image area.

## Overview

## Basic usage
### Round repeated edge slices
Use `border-image-repeat` to control how the edge slices fit the border image area.

```html
<!-- @MARK border-image-repeat:round -->
<div class="b:16px|solid|transparent border-image-repeat:round border-image-slice:30 border-image-source:linear-gradient(45deg,dodgerblue,hotpink)">
  Round repeat
</div>
```

### Set vertical and horizontal behavior
```html
<!-- @MARK border-image-repeat:round|stretch -->
<div class="b:16px|solid|transparent border-image-repeat:round|stretch border-image-slice:30 border-image-source:linear-gradient(45deg,dodgerblue,hotpink)">
  Round vertically, stretch horizontally
</div>
```

### Apply conditionally
Apply styles based on different states using [selectors](/guide/state-selectors) and [conditional queries](/guide/conditional-queries).
```html
<div class="border-image-repeat:round:hover border-image-repeat:round@dark border-image-repeat:round@print border-image-repeat:round@sm">…</div>
```

---

# border-image-slice

Source: https://rc.css.master.co/en/reference/border-image-slice

Summary: Dividing a border image source into corner, edge, and center regions.

## Overview

## Basic usage
### Slice the source image
Use `border-image-slice` to divide the source image into corners, edges, and a center region. The center is discarded unless `fill` is included.

```html
<!-- @MARK border-image-source:linear-gradient(45deg,dodgerblue,hotpink) -->
<!-- @MARK border-image-slice:30 -->
<div class="b:16px|solid|transparent border-image-slice:30 border-image-source:linear-gradient(45deg,dodgerblue,hotpink)">
  Slice 30
</div>
```

### Preserve the center with fill
Use `fill` when the middle region of the source should be painted like a background.
```html
<!-- @MARK border-image-slice:30|fill -->
<div class="b:16px|solid|transparent border-image-slice:30|fill border-image-source:linear-gradient(45deg,dodgerblue,hotpink)">
  Filled center
</div>
```

### Apply conditionally
Apply styles based on different states using [selectors](/guide/state-selectors) and [conditional queries](/guide/conditional-queries).
```html
<div class="border-image-slice:30:hover border-image-slice:30@dark border-image-slice:30@print border-image-slice:30@sm">…</div>
```

---

# border-image-source

Source: https://rc.css.master.co/en/reference/border-image-source

Summary: Setting the source image used to create an element border image.

## Overview

## Basic usage
### Set a gradient source
Use `border-image-source` to choose the image painted into the border. Pair it with [`border-image-slice`](/reference/border-image-slice), plus a visible border width and style.

```html
<!-- @MARK border-image-source:linear-gradient(135deg,dodgerblue,hotpink) -->
<!-- @MARK border-image-slice:30 -->
<div class="b:16px|solid|transparent border-image-slice:30 border-image-source:linear-gradient(135deg,dodgerblue,hotpink)">
  Gradient source
</div>
```

### Use no source
When the source is `none`, the normal border style is displayed instead.
```html
<!-- @MARK border-image-source:none -->
<div class="b:16px|solid|blue-60 border-image-source:none">Fallback border</div>
```

### Apply conditionally
Apply styles based on different states using [selectors](/guide/state-selectors) and [conditional queries](/guide/conditional-queries).
```html
<div class="border-image-source:linear-gradient(135deg,dodgerblue,hotpink):hover border-image-source:linear-gradient(135deg,dodgerblue,hotpink)@dark border-image-source:linear-gradient(135deg,dodgerblue,hotpink)@print border-image-source:linear-gradient(135deg,dodgerblue,hotpink)@sm">…</div>
```

---

# border-image-width

Source: https://rc.css.master.co/en/reference/border-image-width

Summary: Setting the width of an element border image.

## Overview

## Basic usage
### Set the border image width
Use `border-image-width` to control how thick the painted border image is. It can be larger than the fallback `border-width`.

```html
<!-- @MARK border-image-width:16 -->
<div class="b:8px|solid|transparent border-image-slice:30 border-image-source:linear-gradient(45deg,dodgerblue,hotpink) border-image-width:16">
  Image width 16
</div>
```

### Use automatic width
Use `auto` to derive the width from the slice value when possible.
```html
<!-- @MARK border-image-width:auto -->
<div class="b:16px|solid|transparent border-image-slice:30 border-image-source:linear-gradient(45deg,dodgerblue,hotpink) border-image-width:auto">
  Auto image width
</div>
```

### Apply conditionally
Apply styles based on different states using [selectors](/guide/state-selectors) and [conditional queries](/guide/conditional-queries).
```html
<div class="border-image-width:16:hover border-image-width:16@dark border-image-width:16@print border-image-width:16@sm">…</div>
```

---

# border-radius

Source: https://rc.css.master.co/en/reference/border-radius

Summary: Setting radius of an element’s corners.

## Overview

## Examples
### Basic usage

### Create a pill button

### Create an icon button

### Use a radius token
Use `r:*` to apply a border radius token or size directly.
```html
<!-- @MARK r:md -->
<div class="r:md">
  Rounded panel
</div>
```
### Round individual corners
Use CSS corner properties or corner shorthands when only part of the element should be rounded.
```html
<!-- @MARK rtl:md --><!-- @MARK rtr:md -->
<div class="rtl:md rtr:md">
  Rounded top
</div>
```

Use `rtl`, `rtr`, `rbl`, and `rbr` for individual corners.
```html
<!-- @MARK rtr:md --><!-- @MARK rbl:sm -->
<div class="rbl:sm rtr:md">
  Rounded corners
</div>
```

### Apply conditionally
Apply styles based on different states using [selectors](/guide/state-selectors) and [conditional queries](/guide/conditional-queries).
```html
<div class="r:md:hover r:0@print r:lg@sm">...</div>
```

---

## Customization
### Use custom border radius
Customize your border radius tokens by defining [theme tokens](/guide/theme).
```css name=index.css
@theme {
  --radius-xs: 0.125rem; /* [!code ++] */
  --radius-sm: 0.25rem; /* [!code ++] */
}
```
Apply the defined `radius` variables.
```html
<div class="r:sm">...</div>
```

---

# border-style

Source: https://rc.css.master.co/en/reference/border-style

Summary: Setting the line style for an element’s border.

## Overview

## Examples
### Set border style
Use `b-solid`, `b-dashed`, and related short style utilities to set `border-style`.
```html
<!-- @MARK b-solid -->
<div class="b-solid b:1px">
  ...
</div>
```
### Use dashed or dotted borders
Use `b-dashed` or `b-dotted` for separators, drop zones, and placeholder states.
```html
<!-- @MARK b-dashed -->
<div class="b-dashed b:1px">Upload files</div>
```

### Remove border style
Use `b-none` when a border rule should no longer render.
```html
<!-- @MARK b-none -->
<button class="b-none">...</button>
```

### Apply conditionally
Apply styles based on different states using [selectors](/guide/state-selectors) and [conditional queries](/guide/conditional-queries).
```html
<div class="b-solid b-dashed:hover b-none@print">...</div>
```

Use side aliases such as `bt-solid` when only one side should change style.

---

# border-width

Source: https://rc.css.master.co/en/reference/border-width

Summary: Setting the width of an element’s border.

## Overview

## Examples
### Set border width
Use `b:*` with a size value to set `border-width`.
```html
<!-- @MARK b:1px -->
<div class="b-solid b:1px">
  ...
</div>
```
### Set one side or axis
Use `bt:*`, `br:*`, `bb:*`, and `bl:*` for physical sides. Use `bx:*` and `by:*` for logical axes.
```html
<!-- @MARK bt:2px --><!-- @MARK by:1px -->
<div class="by:1px bt:2px">...</div>
```

Use [border](/reference/border) when width, style, and color should be declared together.

### Apply conditionally
Apply styles based on different states using [selectors](/guide/state-selectors) and [conditional queries](/guide/conditional-queries).
```html
<div class="b:0 b:0@print b:1px@sm">...</div>
```

Remember that a border is not visible unless its style is not `none`.

---

# box-decoration-break

Source: https://rc.css.master.co/en/reference/box-decoration-break

Summary: Setting how an element's fragments should be rendered when broken across multiple lines, columns, or pages.

## Overview

## Examples
### Slice
Use `box-decoration-break:slice` when inline fragments should share one continuous background, border, shadow, and decoration.
```html
<!-- @MARK box-decoration-break:slice -->
<span class="bg:blue-60/.12 box-decoration-break:slice">
  Wrapped inline text
</span>
```
### Clone
Use `box-decoration-break:clone` when each wrapped line should get its own background, border, shadow, and decoration.
```html
<!-- @MARK box-decoration-break:clone -->
<span class="px:3xs bg:blue-60/.12 box-decoration-break:clone">
  Wrapped inline text
</span>
```

### Use on inline content
This property is most visible when inline content wraps across multiple lines.
```html
<span class="bg:blue-5 box-decoration-break:clone">
  A highlighted phrase that can wrap
</span>
```

### Apply conditionally
Apply styles based on different states using [selectors](/guide/state-selectors) and [conditional queries](/guide/conditional-queries).
```html
<span class="box-decoration-break:clone:hover box-decoration-break:slice@print box-decoration-break:slice@sm">...</span>
```

---

# box-shadow

Source: https://rc.css.master.co/en/reference/box-shadow

Summary: Adding light and dark shadow effects around an element.

## Overview

---

## Basic usage
### Use shadow tokens
Use `shadow:*` tokens for common elevation levels. Preset shadow tokens are defined separately for light and dark modes, so the class name stays the same while the active theme changes the `box-shadow` value.
```html
<!-- @MARK shadow:md -->
<article class="shadow:md">
  ...
</article>
```
### Use raw values
Use raw values when a shadow does not belong in the shared scale. Raw values are literal; they do not automatically adapt between light and dark modes.

```html
<!-- @MARK shadow:0|1px|2px|black/.12,0|4px|8px|black/.08 -->
<div class="shadow:0|1px|2px|black/.12,0|4px|8px|black/.08">...</div>
```

### Use inset shadows
Use `shadow:inset|...` when the shadow should render inside the element.
```html
<!-- @MARK shadow:inset|0|1px|2px|black/.12 -->
<div class="shadow:inset|0|1px|2px|black/.12">...</div>
```

### Apply conditionally
Apply styles based on different states using [selectors](/guide/state-selectors) and [conditional queries](/guide/conditional-queries).
```html
<div class="shadow:sm shadow:md:hover shadow:none@print">...</div>
```

### Customize mode-specific tokens
Override the same preset `shadow-*` key in `@theme light` and `@theme dark` when an elevation decision should adapt across modes.

```css name=index.css
@theme light {
  --shadow-sm: 0 0 0 1px oklch(0% 0 none / .05), 0 2px 4px -2px oklch(0% 0 none / .08), 0 8px 16px -4px oklch(0% 0 none / .10);
}

@theme dark {
  --shadow-sm: 0 0 0 1px oklch(100% 0 none / .06), 0 2px 4px -2px oklch(0% 0 none / .38), 0 8px 16px -4px oklch(0% 0 none / .30);
}
```

```html
<article class="shadow:sm">...</article>
```

Prefer tokens for product surfaces. Use raw values for one-off art direction, then promote repeated values into the shadow scale.

---

# box-sizing

Source: https://rc.css.master.co/en/reference/box-sizing

Summary: Setting how the total width and height of an element is calculated.

## Overview

## Examples
### Include border and padding in size
Use `box-border` when an element's declared width and height should include its padding and border.
```html
<!-- @MARK box-border -->
<div class="w:40x p:md b:1px|solid|gray-20 box-border">
  Border-box
</div>
```
### Size the content box only
Use `box-content` when the declared size should apply only to the content area and padding or border can add to the rendered size.
```html
<!-- @MARK box-content -->
<div class="w:40x p:md b:1px|solid|gray-20 box-content">
  Content-box
</div>
```

### Prefer consistency inside components
Most UI components should use one sizing model consistently. Switch box sizing only at component boundaries or for compatibility with third-party content.
```html
<div class="box-border">
  <iframe class="box-content"></iframe>
</div>
```

### Apply conditionally
Apply styles based on different states using [selectors](/guide/state-selectors) and [conditional queries](/guide/conditional-queries).
```html
<div class="box-border box-border@print box-content@sm">...</div>
```

---

# break-after

Source: https://rc.css.master.co/en/reference/break-after

Summary: Controlling how page, column, or region breaks should occur after an element.

## Overview

## Basic usage
### Set the break after behavior
Use `break-after:value` to set how breaks should behave after a generated box.

      <p>A content brief is a document that outlines the key details of a piece of content. It should include an overview of the project, a well as any specific instructions or requirements. </p>

      <p>There are a wide variety of animals in the world, and each one has its own unique set of characteristics and habits.</p>

```html
<div class="columns:2">
  <h3>Briefs</h3>
  <p>A content brief is a document …</p>
  <!-- @MARK break-after:column -->
  <hr class="break-after:column" />
  <h3>Animals</h3>
  <p>There are a wide variety of animals in the world …</p>
</div>
```

### Apply conditionally
Apply styles based on different states using [selectors](/guide/state-selectors) and [conditional queries](/guide/conditional-queries).
```html
<div class="break-after:auto:hover break-after:auto@dark break-after:auto@print break-after:auto@sm">…</div>
```

---

# break-before

Source: https://rc.css.master.co/en/reference/break-before

Summary: Controlling how page, column, or region breaks should occur before the specified element.

## Overview

## Basic usage
### Set the break before behavior
Use `break-before:value` to set how breaks should behave before a generated box.

      <p>A content brief is a document that outlines the key details of a piece of content. It should include an overview of the project, a well as any specific instructions or requirements. </p>

      <p>There are a wide variety of animals in the world, and each one has its own unique set of characteristics and habits.</p>

```html
<div class="columns:2">
  <h3>Briefs</h3>
  <p>A content brief is a document …</p>
  <!-- @MARK break-before:column -->
  <hr class="break-before:column" />
  <h3>Animals</h3>
  <p>There are a wide variety of animals in the world …</p>
</div>
```

### Apply conditionally
Apply styles based on different states using [selectors](/guide/state-selectors) and [conditional queries](/guide/conditional-queries).
```html
<div class="break-before:auto:hover break-before:auto@dark break-before:auto@print break-before:auto@sm">…</div>
```

---

# break-inside

Source: https://rc.css.master.co/en/reference/break-inside

Summary: Controlling how page, column, or region breaks should occur within the specified element.

## Overview

## Basic usage
### Set the break inside behavior
Use `break-inside:value` to set how breaks should behave inside a generated box.

```html
<ul class="columns:2">
  <li class="h:90px">1</li>
  <!-- @MARK break-inside:avoid -->
  <li class="h:70px break-inside:avoid">2</li>
  <li class="h:90px">3</li>
  <li class="h:40px">4</li>
</ul>
```
Before setting the `break-inside:avoid`, the item is break within the list. It looks like this:

```html
<ul class="columns:2">
  <li class="h:90px">1</li>
  <li class="h:70px">2</li>
  <li class="h:90px">3</li>
  <li class="h:40px">4</li>
</ul>
```

### Apply conditionally
Apply styles based on different states using [selectors](/guide/state-selectors) and [conditional queries](/guide/conditional-queries).
```html
<div class="break-inside:avoid:hover break-inside:avoid@dark break-inside:avoid@print break-inside:avoid@sm">…</div>
```

---

# caret-color

Source: https://rc.css.master.co/en/reference/caret-color

Summary: Setting the color of the cursor in text input.

## Overview

## Examples
### Set the text caret color
Use `caret-color:*` to change the insertion caret color in inputs and editable text.
Focus on input to see the cursor color

```html
<!-- @MARK caret-color:pink-70 -->
<input type="text" class="caret-color:pink-70">
```
### Use the current text color
Use `caret-color:current` when the caret should follow the foreground color.
```html
<!-- @MARK caret-color:current -->
<input class="fg:blue-60 caret-color:current" value="Editable value">
```

### Hide the caret intentionally
Use `caret-color:transparent` only for custom editing surfaces that draw their own caret.
```html
<!-- @MARK caret-color:transparent -->
<div contenteditable="true" class="caret-color:transparent">
  Custom editor
</div>
```

### Apply conditionally
Apply styles based on different states using [selectors](/guide/state-selectors) and [conditional queries](/guide/conditional-queries).
```html
<input class="caret-color:blue-60:focus caret-color:current@print caret-color:current@sm">
```

---

# clear

Source: https://rc.css.master.co/en/reference/clear

Summary: Moving an element below floating elements instead of floating to the left or right.

## Overview

---

## Basic usage
### Clearing both left and right floats
Use `both:clear` to move the element below all floated elements.

```html
<div>
  <div class="float:left">Left</div>
  <div class="float:right">Right</div>
  <!-- @MARK clear:both -->
  <div class="clear:both">Clear</div>
</div>
```

### Clearing left floats
Use `both:left` to move the element below all left floated elements.

```html
<div>
  <div class="float:right">Right</div>
  <div class="float:right">Right</div>
  <div class="float:left">Left</div>
  <!-- @MARK clear:left -->
  <div class="clear:left">Clear</div>
</div>
```

### Clearing right floats
Use `both:right` to move the element below all right floated elements.

```html
<div>
  <div class="float:left">Left</div>
  <div class="float:left">Left</div>
  <div class="float:right">Right</div>
  <!-- @MARK clear:left -->
  <div class="clear:left">Clear</div>
</div>
```

### Apply conditionally
Apply styles based on different states using [selectors](/guide/state-selectors) and [conditional queries](/guide/conditional-queries).
```html
<div class="clear:both:hover clear:both@dark clear:both@print clear:both@sm">…</div>
```

---

# clip-path

Source: https://rc.css.master.co/en/reference/clip-path

Summary: Creating a clipping region.

## Overview

## Examples
### Clip to a circle
Use `clip-path:circle(*)` to apply a circular clip path.
```html
<!-- @MARK clip-path:circle(40px) -->
<img class="clip-path:circle(40px)" src="/images/avatar.jpg" alt="Avatar">
```
### Clip with an inset
Use `clip-path:inset(*)` with `|` between values when the inset has multiple sides.
```html
<!-- @MARK clip-path:inset(0|20px) -->
<div class="clip-path:inset(0|20px)">
  Cropped content
</div>
```

### Remove clipping
Use `clip-none` when a responsive or state variant should restore the full element.
```html
<!-- @MARK clip-none -->
<img class="clip-path:circle(40px) clip-none@sm" src="/images/avatar.jpg" alt="Avatar">
```

### Apply conditionally
Apply styles based on different states using [selectors](/guide/state-selectors) and [conditional queries](/guide/conditional-queries).
```html
<div class="clip-path:inset(0|20px):hover clip-none@print clip-path:circle(40px)@sm">...</div>
```

---

# color

Source: https://rc.css.master.co/en/reference/color

Summary: Setting foreground color of an element.

## Overview

## Examples
### With opacity
Add the suffix `/alpha` to change the opacity of any color.

### Apply conditionally
Apply styles based on different states using [selectors](/guide/state-selectors) and [conditional queries](/guide/conditional-queries).
```html
<div class="fg:slate-10:hover fg:slate-10@dark fg:slate-10@print fg:slate-10@sm">...</div>
```

---

## Customization
### Use custom text colors
Add a color to the text variable namespace.
```css name=index.css
@theme {
  --color-text-primary: #000; /* [!code ++] */
}
```
Apply the custom color:
```html
<!-- @MARK text:primary -->
<p class="text:primary"></p>
```
Apply the defined `text-*` variables using the inherited rules .
```html
<!-- @MARK text:primary -->
<html class="light">
  <body class="text:primary"></body> <!-- [!code highlight] -->
  <body class="text:primary">equals</body>
  <body class="text:$text-primary">equals</body>
</html>
```
(x) Use `text:color` for foreground color. Use [text fill color](/reference/text-fill-color) only when you need the WebKit text fill property.
```html
<p class="text-fill-color:pink">text fill property</p>
```
Besides inheriting the above rules, you can use `text-*` to access global text color variables in other syntax.
```html
<!-- @MARK stroke:text-primary -->
<svg class="stroke:text-primary"></svg>
```
To escape inherited text colors, use `var(--color-blue)` to apply the base hue token instead of a text color token.
```html
<!-- @MARK fg:var(--color-blue) -->
<p class="fg:blue">...</p>
```

---

# column-span

Source: https://rc.css.master.co/en/reference/column-span

Summary: Setting how elements span across multiple columns.

## Overview

## Examples
### Span across all columns
Use `column-span:all` for headings, pull quotes, or media that should break out of a multi-column flow.
```html
<!-- @MARK column-span:all -->
<h2 class="column-span:all">
  Section heading
</h2>
```
### Does not span multiple columns
Use `column-span:none` to keep an element inside the current column.
```html
<!-- @MARK column-span:none -->
<p class="column-span:none">
  Regular column content
</p>
```

### Use inside multi-column layouts
Column spanning only matters in a multi-column formatting context.
```html
<article class="columns:3">
  <h2 class="column-span:all">Report</h2>
  <p>Column content</p>
</article>
```

### Apply conditionally
Apply styles based on different states using [selectors](/guide/state-selectors) and [conditional queries](/guide/conditional-queries).
```html
<h2 class="column-span:none column-span:all@print column-span:all@sm">...</h2>
```

---

# columns

Source: https://rc.css.master.co/en/reference/columns

Summary: Setting the number of columns within the container.

## Overview

## Basic usage
### Set column count
Use `mcss columns:value` to set the number of columns when creating a multi-column layout. The column width will automatically adjust to the column count.

```html
<!-- @MARK columns:3 -->
<div class="columns:3">
  <img class="w:full aspect-ratio:1/1" src="…" />
  <img class="w:full aspect-ratio:3/2" src="…" />
  …
</div>
```

### Flexible multi-column layout
Use `mcss columns:count|width` to set the minimum width of each column to `width` and the maximum number of columns to `count` columns when creating a flexible multi-column layout.

```html
<!-- @MARK columns:4|100px -->
<div class="columns:4|100px">
  <img class="w:full aspect-ratio:1/1" src="…" />
  <img class="w:full aspect-ratio:3/2" src="…" />
  …
</div>
```

### Apply conditionally
Apply styles based on different states using [selectors](/guide/state-selectors) and [conditional queries](/guide/conditional-queries).
```html
<div class="columns:5:hover columns:5@dark columns:5@print columns:5@sm">…</div>
```

---

# contain

Source: https://rc.css.master.co/en/reference/contain

Summary: Providing performance benefits by limiting calculations of layout.

## Overview

## Examples
### Contain layout and paint
Use `contain:content` for self-contained panels where layout and paint work should not affect the outside page.
```html
<!-- @MARK contain:content -->
<section class="contain:content">
  Feed item
</section>
```
### Contain painting
Use `contain:paint` when overflowing visual effects should be contained without opting into every containment mode.
```html
<!-- @MARK contain:paint -->
<div class="contain:paint">
  Preview
</div>
```

### Reset containment
Use `contain:none` when a nested element needs to participate normally in layout or painting again.
```html
<!-- @MARK contain:none -->
<div class="contain:content">
  <div class="contain:none">Escapes containment</div>
</div>
```

### Apply conditionally
Apply styles based on different states using [selectors](/guide/state-selectors) and [conditional queries](/guide/conditional-queries).
```html
<div class="contain:content contain:none@print contain:paint@sm">...</div>
```

---

# content

Source: https://rc.css.master.co/en/reference/content

Summary: Replacing an element with a generated value.

## Overview

## Basic usage
### Add indicators for external links
The most typical example is using a pseudo-element to add an indicator ` ↗` after external links.

    <p class="my:0">Discover high-quality products at XYZ Corporation. Visit [our website](https://www.example.com) for exclusive deals and unbeatable prices.</p>

```html
<!-- @MARK content:'\00a0↗'_:where(a[href^='http'])::after -->
<article class="content:'\00a0↗'_:where(a[href^='http'])::after">
  …<a target="_blank" href="https://www.example.com">our website</a>…
</article>
```

### Resolve whitespaces in the value
Whitespace is used in the class attribute of the template to separate different classes. To replace whitespaces ` ` with non-breaking spaces `\00a0`.
```html
<a class="content:'\00a0↗'::after">…</a>
```
Is it not very kind to use `\00a0` in markup?

(o) Predefine your content [theme tokens](/guide/theme) without `\00a0`.
```css name=index.css
@theme {
  --content-external: " ↗"; /* [!code ++] */
}
```
Apply your custom content:
```html
<!-- @MARK content:var(--content-external)::after -->
<a class="content:var(--content-external)::after">…</a>
```

### Apply conditionally
Apply styles based on different states using [selectors](/guide/state-selectors) and [conditional queries](/guide/conditional-queries).
```html
<div class="content:normal:hover content:normal@dark content:normal@print content:normal@sm">…</div>
```

---

# counter-increment

Source: https://rc.css.master.co/en/reference/counter-increment

Summary: Increasing or decreasing the value of named CSS counters.

## Overview

## Basic usage
### Number sections
Use `counter-increment` to advance a named counter on each matching element. The counter is usually created with [`counter-reset`](/reference/counter-reset) and displayed with [`content`](/reference/content).

```html
<!-- @MARK counter-reset:section -->
<article class="counter-reset:section">
  <!-- @MARK counter-increment:section -->
  <!-- @MARK content:counter(section)::before -->
  <h2 class="counter-increment:section inline-flex::before r:full::before content:counter(section)::before">Overview</h2>
  <h2 class="counter-increment:section inline-flex::before r:full::before content:counter(section)::before">Installation</h2>
  <h2 class="counter-increment:section inline-flex::before r:full::before content:counter(section)::before">Configuration</h2>
</article>
```

### Count backward
Pass a negative integer to decrease a counter. Here the first generated value is `10` because the counter starts at `11` and decrements before it is displayed.

        <span>Prepare release notes</span>

        <span>Run validation</span>

        <span>Publish the build</span>

```html
<!-- @MARK counter-reset:step|11 -->
<ol class="list-style:none counter-reset:step|11">
  <!-- @MARK counter-increment:step|-1 -->
  <!-- @MARK content:counter(step)::before -->
  <li class="counter-increment:step|-1 inline-flex::before r:full::before content:counter(step)::before">Prepare release notes</li>
  <li class="counter-increment:step|-1 inline-flex::before r:full::before content:counter(step)::before">Run validation</li>
  <li class="counter-increment:step|-1 inline-flex::before r:full::before content:counter(step)::before">Publish the build</li>
</ol>
```

### Apply conditionally
Apply styles based on different states using [selectors](/guide/state-selectors) and [conditional queries](/guide/conditional-queries).
```html
<div class="counter-increment:section:hover counter-increment:section@dark counter-increment:section@print counter-increment:section@sm">…</div>
```

---

# counter-reset

Source: https://rc.css.master.co/en/reference/counter-reset

Summary: Creating named CSS counters and initializing them to specific values.

## Overview

## Basic usage
### Create a section counter
Use `counter-reset` to create a named counter and set its initial value. Regular counters default to `0`, so the first `counter-increment:section` produces `1`.

```html
<!-- @MARK counter-reset:section -->
<article class="counter-reset:section">
  <!-- @MARK counter-increment:section -->
  <!-- @MARK content:'Section\00a0'counter(section)'.\00a0'::before -->
  <h2 class="counter-increment:section content:'Section\00a0'counter(section)'.\00a0'::before">Setup</h2>
  <h2 class="counter-increment:section content:'Section\00a0'counter(section)'.\00a0'::before">Usage</h2>
</article>
```

### Start from another number
Add an integer after the counter name to choose its initial value.

```html
<!-- @MARK counter-reset:chapter|4 -->
<article class="counter-reset:chapter|4">
  <!-- @MARK counter-increment:chapter -->
  <!-- @MARK content:'Chapter\00a0'counter(chapter)':\00a0'::before -->
  <h2 class="counter-increment:chapter content:'Chapter\00a0'counter(chapter)':\00a0'::before">Advanced topics</h2>
</article>
```

### Create a reversed counter
Use `reversed()` when a counter should count down from the number of items. Adjust the step with [`counter-increment`](/reference/counter-increment).

```html
<!-- @MARK counter-reset:reversed(step) -->
<ol class="list-style:none counter-reset:reversed(step)">
  <!-- @MARK counter-increment:step|-1 -->
  <!-- @MARK content:counter(step)::before -->
  <li class="counter-increment:step|-1 block::before content:counter(step)::before">Final review</li>
  <li class="counter-increment:step|-1 block::before content:counter(step)::before">Deploy</li>
  <li class="counter-increment:step|-1 block::before content:counter(step)::before">Monitor</li>
</ol>
```

### Apply conditionally
Apply styles based on different states using [selectors](/guide/state-selectors) and [conditional queries](/guide/conditional-queries).
```html
<div class="counter-reset:section:hover counter-reset:section@dark counter-reset:section@print counter-reset:section@sm">…</div>
```

---

# counter-set

Source: https://rc.css.master.co/en/reference/counter-set

Summary: Setting existing CSS counters to specific values on selected elements.

## Overview

## Basic usage
### Set a counter on one item
Use `counter-set` to set an existing counter to a specific value on selected elements. MDN recommends [`counter-reset`](/reference/counter-reset) for creating counters and `counter-set` for changing a counter value in the flow.

        <span>Install dependencies</span>

        <span>Jump to the deployment checklist</span>

        <span>Verify production</span>

```html
<!-- @MARK counter-reset:step -->
<ol class="list-style:none counter-reset:step">
  <!-- @MARK counter-increment:step -->
  <!-- @MARK content:counter(step)::before -->
  <li class="counter-increment:step inline-flex::before r:full::before content:counter(step)::before">Install dependencies</li>
  <!-- @MARK counter-set:step|9 -->
  <li class="counter-increment:step counter-set:step|9 inline-flex::before r:full::before content:counter(step)::before">Jump to the deployment checklist</li>
  <li class="counter-increment:step inline-flex::before r:full::before content:counter(step)::before">Verify production</li>
</ol>
```

### Set multiple counters
Separate counter names and values with `|` to set more than one counter in the same declaration.

```html
<!-- @MARK counter-set:chapter|2|section|4 -->
<!-- @MARK content:'Chapter\00a0'counter(chapter)',\00a0section\00a0'counter(section)::before -->
<h2 class="counter-set:chapter|2|section|4 content:'Chapter\00a0'counter(chapter)',\00a0section\00a0'counter(section)::before">Resume point</h2>
```

### Apply conditionally
Apply styles based on different states using [selectors](/guide/state-selectors) and [conditional queries](/guide/conditional-queries).
```html
<div class="counter-set:section|4:hover counter-set:section|4@dark counter-set:section|4@print counter-set:section|4@sm">…</div>
```

---

# cursor

Source: https://rc.css.master.co/en/reference/cursor

Summary: Setting the mouse cursor style.

## Overview

## Examples
### Show clickable affordance
Use `cursor:pointer` for custom controls that are not native buttons or links.
```html
<!-- @MARK cursor:pointer -->
<div role="button" tabindex="0" class="cursor:pointer">
  Open menu
</div>
```
### Mark disabled actions
Use `cursor:not-allowed` with a real disabled state or equivalent accessibility attributes.
```html
<!-- @MARK cursor:not-allowed -->
<button disabled class="opacity:.5 cursor:not-allowed">
  Unavailable
</button>
```

### Support drag handles
Use `cursor:grab` and `cursor:grabbing` to make draggable handles clearer.
```html
<!-- @MARK cursor:grab --><!-- @MARK cursor:grabbing:active -->
<button class="cursor:grab cursor:grabbing:active">
  Move
</button>
```

### Apply conditionally
Apply styles based on different states using [selectors](/guide/state-selectors) and [conditional queries](/guide/conditional-queries).
```html
<div class="cursor:pointer:hover cursor:auto@print cursor:default@sm">...</div>
```

---

# direction

Source: https://rc.css.master.co/en/reference/direction

Summary: Setting the direction of text.

## Overview

## Examples
### Set left-to-right direction
Use `direction:ltr` for content that should flow left to right regardless of the surrounding document direction.
```html
<!-- @MARK direction:ltr -->
<p class="direction:ltr">Invoice #1048</p>
```
### Set right-to-left direction
Use `direction:rtl` for right-to-left content embedded in a left-to-right page.
```html
<!-- @MARK direction:rtl -->
<p class="direction:rtl">Right-to-left text</p>
```

### Prefer semantic document direction
Use the `dir` attribute for user content and document-level language direction. Use the utility for localized component exceptions.
```html
<section dir="rtl">
  <code class="direction:ltr">npm install</code>
</section>
```

### Apply conditionally
Apply styles based on different states using [selectors](/guide/state-selectors) and [conditional queries](/guide/conditional-queries).
```html
<p class="direction:ltr@print direction:rtl@sm">...</p>
```

---

# display

Source: https://rc.css.master.co/en/reference/display

Summary: Controlling the element's inner and outer display types.

## Overview

## Basic usage
### Block & Inline
Use `block`, `inline`, and `inline-block` to set the flow of elements.

      Block elements start on a new line and take the available width.

        `display:block`

      Inline elements stay in the same text flow and only occupy the space they need.

        `display:inline`

      Inline-block elements stay inline but can accept box dimensions.

        `display:inline-block`

      Use the display mode that matches the element's role in the flow.

```html
<div>
  Block elements start on a new line.
  <span class="block">
    display:block
  </span>
  Inline elements stay in text flow.
  <span class="inline">
    display:inline
  </span>
  Inline-block elements accept dimensions.
  <span class="inline-block">
    display:inline-block
  </span>
  Choose the display mode for the layout.
</div>
```

### Flex
Use `flex` to create a block-level flex container.

```html
<div class="flex items-center gap:sm">
  <img src="...">
  <div>
    <div>aron</div>
    <p>CSS needs a revolution</p>
  </div>
</div>
```

### Inline Flex
Use `inline-flex` to create an inline-level flex container.

      Inline flex is useful when an inline phrase needs aligned children.
      The element still participates in text flow while its contents use flex alignment.

      This keeps the badge baseline-aligned with the surrounding sentence.

```html
<div>
  Inline flex keeps this badge in the text flow.
  <div class="inline-flex items-baseline mx:sm">
    <img src="...">
    <div>Aron</div>
  </div>
  The surrounding sentence continues after it.
</div>
```

### Grid
Use `grid` to create a block-level grid container.

```html
<div class="grid grid-template-columns:repeat(2,auto) gap:sm">
  <div>01</div>
  <div>02</div>
  <div>03</div>
  <div>04</div>
</div>
```

### Inline Grid
Use `inline-grid` to create a inline-level grid container.

```html
<div class="inline-grid grid-template-columns:repeat(2,auto) gap:sm">
  <div>01</div>
  <div>02</div>
  <div>03</div>
  <div>04</div>
</div>
<div class="inline-grid grid-template-columns:repeat(2,auto) gap:sm">
  <div>01</div>
  <div>02</div>
  <div>03</div>
  <div>04</div>
</div>
```

### Table
Use `table`, `table-row`, `table-column`, `table-cell`, `table-caption`, `table-row-group`, `table-column-group`, `table-header-group`, and `table-footer-group` to create elements that behave like their respective table elements.

```html
<div class="table">
  <div class="table-caption">Orders</div>
  <div class="table-header-group bg:gray-90">
    <div class="table-row">
      <div class="table-cell">Product</div>
      <div class="table-cell">Qty</div>
      <div class="table-cell">Price</div>
    </div>
  </div>
  <div class="table-row-group">
    <div class="table-row">
      <div class="table-cell">Milk</div>
      <div class="table-cell">2</div>
      <div class="table-cell">10.00</div>
    </div>
    <div class="table-row">
      <div class="table-cell">Cola</div>
      <div class="table-cell">3</div>
      <div class="table-cell">12.00</div>
    </div>
    <div class="table-row">
      <div class="table-cell">Juice</div>
      <div class="table-cell">5</div>
      <div class="table-cell">18.00</div>
    </div>
  </div>
  <div class="table-footer-group bg:gray-90">
    <div class="table-row">
      <div class="table-cell">Total</div>
      <div class="table-cell text-center">10</div>
      <div class="table-cell text-center">40.00</div>
    </div>
  </div>
</div>
```

### Contents
Use `contents` to make the element's children behave like direct children of the element's parent, ignoring the element itself.

```html
<div class="flex gap:5x">
  <div class="flex:1">01</div>
  <div class="contents">
    <div class="flex:1">02</div>
    <div class="flex:1">03</div>
  </div>
  <div class="flex:1">04</div>
</div>
```

### Flow Root
Use `flow-root` to create a block-level element that establishes a new block formatting context.
{

    <p>Use `flow-root` to clear floats.</p>

}
```html
<div class="flow-root">
  <img class="float:left" .../>
  <p>The paragraph wraps around the floated image.</p>
</div>
Use flow-root to clear floats
```

### List Item
Use `list-item` to create a block that behave like a list item.

```html
<div>
  <div class="list-item">01</div>
  <div class="list-item">02</div>
  <div class="list-item">03</div>
</div>
```

### Hidden
Use `hidden` to hide the element. The element is not rendered in the document.

```html
<div class="flex gap:5x">
  <div>01</div>
  <div class="hidden">02</div>
  <div>03</div>
</div>
```

### Apply conditionally
Apply styles based on different states using [selectors](/guide/state-selectors) and [conditional queries](/guide/conditional-queries).
```html
<div class="display:block:hover display:block@dark display:block@print display:block@sm">...</div>
```

---

# fill

Source: https://rc.css.master.co/en/reference/fill

Summary: Setting the color of an SVG shape.

## Overview

## Examples
### Set SVG fill color
Use `fill:*` to set the fill paint for SVG shapes.
```html
<!-- @MARK fill:current -->
<svg class="fill:current" viewBox="0 0 16 16" aria-hidden="true">
  <path d="M8 2 14 14H2Z" />
</svg>
```
### Use theme colors
Use color tokens when SVG paint should match the design system.
```html
<!-- @MARK fill:blue-60 -->
<svg class="fill:blue-60" aria-hidden="true"></svg>
```

Use `fill:transparent` for shapes that should only show their stroke.

### Apply conditionally
Apply styles based on different states using [selectors](/guide/state-selectors) and [conditional queries](/guide/conditional-queries).
```html
<svg class="fill:current fill:blue-60:hover fill:current@print">...</svg>
```

Use [stroke](/reference/stroke) for outline paint.

---

# filter

Source: https://rc.css.master.co/en/reference/filter

Summary: Applying graphic effects to an element.

## Overview

## Examples
### Apply filter functions
Use `filter:*` with functions such as `blur(...)`, `brightness(...)`, and `drop-shadow(...)` to apply CSS filters.
```html
<!-- @MARK filter:blur(4px)|brightness(.8) -->
<img class="filter:blur(4px)|brightness(.8)" src="..." alt="" />
```
### Use drop shadow for transparent images
Use `filter:drop-shadow(...)` when the shadow should follow the alpha shape of an image or SVG.
```html
<!-- @MARK filter:drop-shadow(0|2px|4px|black/.2) -->
<img class="filter:drop-shadow(0|2px|4px|black/.2)" src="..." alt="" />
```

Use [box-shadow](/reference/box-shadow) for the element box instead.

### Reset filters
Use `filter:none` to remove filters at a breakpoint or state.
```html
<!-- @MARK filter:none -->
<img class="filter:none@print" src="..." alt="" />
```

### Apply conditionally
Apply styles based on different states using [selectors](/guide/state-selectors) and [conditional queries](/guide/conditional-queries).
```html
<div class="filter:none filter:blur(4px):hover filter:none@print">...</div>
```

Filters can be expensive on large areas; use them where the visual benefit is clear.

---

# flex

Source: https://rc.css.master.co/en/reference/flex

Summary: Setting how flex items grow or shrink.

## Overview

## Examples
### Let an item fill remaining space
Use `flex:1` on a flex item that should grow and shrink to take the available space.
```html
<!-- @MARK flex --><!-- @MARK flex:1 -->
<div class="flex gap:md">
  <aside class="flex:0 w:24x">...</aside>
  <main class="flex:1 min-w:0">...</main>
</div>
```
### Prevent an item from flexing
Use `flex:0` for icons, fixed media, and side controls that should keep their measured size while siblings flex around them.
```html
<!-- @MARK flex:0 --><!-- @MARK size:10x -->
<div class="flex items-center gap:sm">
  <img class="flex:0 size:10x" src="..." alt="" />
  <span class="min-w:0">Profile details</span>
</div>
```

### Set grow, shrink, and basis together
The `flex` property is shorthand for `flex-grow`, `flex-shrink`, and `flex-basis`. Use pipe separators when you need to pass multiple CSS values.
```html
<!-- @MARK flex:0|0|18x -->
<aside class="flex:0|0|18x">
  ...
</aside>
```

Reach for [flex-grow](/reference/flex-grow), [flex-shrink](/reference/flex-shrink), or [flex-basis](/reference/flex-basis) when only one part of the shorthand should change.

### Remember the parent display
`flex:*` affects a flex item. The parent still needs `flex`, `inline-flex`, or another layout mode that makes the child participate in flex sizing.
```html
<!-- @MARK flex -->
<section class="flex">
  <div class="flex:1">...</div>
</section>
```

### Apply conditionally
Apply styles based on different states using [selectors](/guide/state-selectors) and [conditional queries](/guide/conditional-queries).
```html
<div class="flex:0 flex:0@print flex:1@sm">...</div>
```

For text-heavy flex children, pair flexible sizing with `min-w:0` so long content can shrink.

---

# flex-basis

Source: https://rc.css.master.co/en/reference/flex-basis

Summary: Setting the initial main size of a flex item.

## Overview

## Examples
### Set the starting size of a flex item
Use `flex-basis:*` to set the initial main-axis size before grow and shrink are applied.
```html
<!-- @MARK flex --><!-- @MARK flex-basis:24x -->
<div class="flex">
  <aside class="flex-basis:24x flex-shrink:0">...</aside>
  <main class="flex:1 min-w:0">...</main>
</div>
```
### Use content or parent-sized basis values
Use `flex-basis:full`, `flex-basis:fit`, or `flex-basis:max` when the basis should follow a native sizing keyword.
```html
<!-- @MARK flex-basis:full -->
<section class="flex-basis:full">...</section>
```

### Use container basis values
Use `flex-basis:*` when flex item sizing should align with the shared container scale.
```html
<!-- @MARK flex-basis:md -->
<aside class="flex-basis:md flex-shrink:0">...</aside>
```

### Prefer shorthand for complete flex behavior
If the item needs grow, shrink, and basis at the same time, use [flex](/reference/flex).
```html
<!-- @MARK flex:0|0|18x -->
<aside class="flex:0|0|18x">...</aside>
```

### Apply conditionally
Apply styles based on different states using [selectors](/guide/state-selectors) and [conditional queries](/guide/conditional-queries).
```html
<div class="flex-basis:full flex-basis:auto@print flex-basis:24x@sm">...</div>
```

The basis follows the flex direction: width in rows, height in columns.

---

# flex-direction

Source: https://rc.css.master.co/en/reference/flex-direction

Summary: Setting the direction of flex items.

## Overview

## Examples
### Lay out items in a row
Use `flex-row` for the default horizontal main axis.
```html
<!-- @MARK flex --><!-- @MARK flex-row -->
<nav class="flex flex-row gap:sm">
  ...
</nav>
```
### Stack items in a column
Use `flex-col` when children should stack vertically.
```html
<!-- @MARK flex --><!-- @MARK flex-col -->
<section class="flex flex-col gap:md">
  ...
</section>
```

### Reverse visual order
Use `flex-row-reverse` or `flex-col-reverse` only when the visual order intentionally differs from source order.
```html
<!-- @MARK flex-row-reverse -->
<div class="flex flex-row-reverse">...</div>
```

(i) Reversed flex direction changes visual order, but it does not rewrite the document source. Keep keyboard and reading order in mind.

### Apply conditionally
Apply styles based on different states using [selectors](/guide/state-selectors) and [conditional queries](/guide/conditional-queries).
```html
<div class="flex flex-col flex-col@print flex-row@sm">...</div>
```

Use [gap](/reference/gap), [justify-content](/reference/justify-content), and [align-items](/reference/align-items) to control spacing and alignment along the chosen axis.

---

# flex-grow

Source: https://rc.css.master.co/en/reference/flex-grow

Summary: Setting how flex items grow.

## Overview

## Examples
### Let an item grow
Use `flex-grow:1` on a flex item that should absorb remaining free space.
```html
<!-- @MARK flex --><!-- @MARK flex-grow:1 -->
<div class="flex gap:md">
  <aside class="flex-grow:0 w:24x">...</aside>
  <main class="flex-grow:1 min-w:0">...</main>
</div>
```
### Keep an item at its basis
Use `flex-grow:0` when an item should keep its width or basis and leave free space to siblings.
```html
<!-- @MARK flex-grow:0 --><!-- @MARK flex-basis:24x -->
<aside class="flex-basis:24x flex-grow:0">...</aside>
```

Use the [flex](/reference/flex) shorthand when grow, shrink, and basis should be set together.

### Apply conditionally
Apply styles based on different states using [selectors](/guide/state-selectors) and [conditional queries](/guide/conditional-queries).
```html
<div class="flex-grow:0 flex-grow:0@print flex-grow:1@sm">...</div>
```

The parent must be a flex container for `flex-grow` to affect layout.

---

# flex-shrink

Source: https://rc.css.master.co/en/reference/flex-shrink

Summary: Setting how flex items shrink.

## Overview

## Examples
### Allow an item to shrink
Use `flex-shrink:1` when a flex item can become smaller than its basis to fit the row.
```html
<!-- @MARK flex --><!-- @MARK flex-shrink:1 -->
<div class="flex">
  <main class="flex-shrink:1 min-w:0">...</main>
</div>
```
### Prevent fixed media from shrinking
Use `flex-shrink:0` for icons, avatars, and fixed side regions that should preserve their measured size.
```html
<!-- @MARK flex-shrink:0 --><!-- @MARK size:10x -->
<img class="flex-shrink:0 size:10x" src="..." alt="" />
```

Text siblings often need `min-w:0` so they shrink instead of pushing fixed media out of the container.

### Apply conditionally
Apply styles based on different states using [selectors](/guide/state-selectors) and [conditional queries](/guide/conditional-queries).
```html
<div class="flex-shrink:1 flex-shrink:1@print flex-shrink:0@sm">...</div>
```

Use [flex](/reference/flex) when the grow, shrink, and basis values should be expressed as one rule.

---

# flex-wrap

Source: https://rc.css.master.co/en/reference/flex-wrap

Summary: Setting how flex items wrap.

## Overview

## Examples
### Allow items to wrap
Use `flex-wrap` when flex items should move onto additional lines instead of shrinking indefinitely.
```html
<!-- @MARK flex --><!-- @MARK flex-wrap --><!-- @MARK gap:sm -->
<div class="flex flex-wrap gap:sm">
  ...
</div>
```
### Keep items on one line
Use `flex-nowrap` for toolbars, segmented controls, and rows where wrapping would break the interaction.
```html
<!-- @MARK flex-nowrap --><!-- @MARK overflow-x:auto -->
<div class="flex overflow-x:auto flex-nowrap">
  ...
</div>
```

### Reverse wrap direction
Use `flex-wrap-reverse` when new lines should stack in the opposite cross-axis direction.
```html
<!-- @MARK flex-wrap-reverse -->
<div class="flex flex-wrap-reverse">...</div>
```

### Apply conditionally
Apply styles based on different states using [selectors](/guide/state-selectors) and [conditional queries](/guide/conditional-queries).
```html
<div class="flex-nowrap flex-nowrap@print flex-wrap@sm">...</div>
```

Use `gap-y:*` as well as `gap-x:*` when wrapped rows need vertical spacing.

---

# float

Source: https://rc.css.master.co/en/reference/float

Summary: Placing an element on the left or right side of its container.

## Overview

## Examples
### Float elements to the left
Use `float:left` when inline content should wrap around an element on the left.
```html
<!-- @MARK float:left -->
<img class="float:left mr:md" src="/images/avatar.jpg" alt="Avatar">
```
### Float elements to the right
Use `float:right` to place a pull quote, image, or callout on the right side of a text flow.
```html
<!-- @MARK float:right -->
<aside class="float:right ml:md">
  Pull quote
</aside>
```

### Reset floats
Use `float:none` when a responsive or print context should return the element to normal flow.
```html
<!-- @MARK float:none -->
<img class="float:left float:none@print" src="/images/avatar.jpg" alt="Avatar">
```

### Apply conditionally
Apply styles based on different states using [selectors](/guide/state-selectors) and [conditional queries](/guide/conditional-queries).
```html
<img class="float:left:hover float:none@print float:right@sm" src="/images/avatar.jpg" alt="">
```

---

# font-family

Source: https://rc.css.master.co/en/reference/font-family

Summary: Setting the font for an element.

## Overview

## Examples
### Basic usage

### Set the font family
Set the typeface of an element using the `font-family:` syntax.

      Heavy boxes perform quick waltzes and jigs.
```html
<!-- @MARK font-family:cursive -->
<p class="font-family:cursive">Heavy boxes perform quick waltzes and jigs.</p>
```
In practice, you wouldn't arbitrarily set the font family within the template; instead, you would unify your fonts through [custom fonts](#use-custom-fonts).

### Apply fonts globally
Relying on the `font-family` inherited behavior, you can set the entire page font in `html <body>`.
```html
<!-- @MARK font:sans -->
<body class="font:sans">…</body>
```

### Apply conditionally
Apply styles based on different states using [selectors](/guide/state-selectors) and [conditional queries](/guide/conditional-queries).
```html
<div class="font:mono:hover font:mono@dark font:mono@print font:mono@sm">…</div>
```
### Apply fonts to specified elements
Use the `mcss _:is(code,pre)` to select specified elements and apply the font.
```html
<!-- @MARK font:mono_:is(code,pre) -->
<body class="font:mono_:is(code,pre)">…</body>
```

---

## Resolve whitespaces in the value
Whitespace is used in the class attribute of the template to separate different classes. To replace whitespaces ` ` with non-breaking spaces `\00a0`.
```html
<!-- @MARK font-family:'Open\00a0Sans' -->
<p class="font-family:'Open\00a0Sans'">…</p>
```
Is it not very kind to use `\00a0` in markup?

(o) Predefine your [font](/guide/theme) tokens without `\00a0`.
```css name=index.css
@theme {
  --font-family-open-sans: Open Sans; /* [!code ++] */
}
```
Apply your custom fonts:
```html
<!-- @MARK font:open-sans -->
<p class="font:open-sans">…</p>
```

---

## Customization
### Use custom fonts
Customize your font tokens by defining [theme tokens](/guide/theme). For example, add `Geist` as the general font and `Fira Code` as the code font.
```css name=index.css
@theme {
  --font-sans: "Geist"; /* [!code ++] */
  --font-mono: "Fira Code"; /* [!code ++] */
}
```
Apply the defined `font-family` variables. For example, presetting the global fonts in `html <body>`:
```html
<!-- @MARK font:sans --><!-- @MARK font:mono_:is(code,pre) -->
<body class="font-feature-settings:'ss01' font:sans font:mono_:is(code,pre)">…</body>
```
Don't forget to add the [font faces](/guide/fonts#font-faces).

### Google fonts
The fastest way to declare custom font faces is through [Google Fonts](https://fonts.google.com/).
```html name=index.html
<!DOCTYPE html>
<html lang="en">
<head>
  <link rel="preconnect" href="https://fonts.googleapis.com">
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  <link href="https://fonts.googleapis.com/css2?family=Fira+Code&family=Roboto:wght@400;500;600;700;800&display=swap" rel="stylesheet"> <!-- [!code ++] -->
</head>
</html>
```

### Self-hosted fonts
You can also self-host the fonts via native CSS, as usual.
```css name=styles/fonts.css
@font-face {
  font-family: 'Geist';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("/fonts/GeistVariable.woff2") format("woff2");
}
```
Self-host the complete font build when you rely on advanced OpenType features such as `font-feature-settings:'ss01'`.

---

# font-feature-settings

Source: https://rc.css.master.co/en/reference/font-feature-settings

Summary: Controlling advanced typographic features in OpenType fonts.

## Overview

## Examples
### Enable a font feature
Use `font-feature-settings:*` to pass OpenType feature tags directly to `font-feature-settings`.
```html
<!-- @MARK font-feature-settings:'tnum' -->
<span class="font-feature-settings:'tnum'">1234567890</span>
```
### Reset features
Use `font-feature-settings:normal` when a nested element should not inherit custom feature settings.
```html
<!-- @MARK font-feature-settings:normal -->
<span class="font-feature-settings:'tnum'">
  <span class="font-feature-settings:normal">Reset</span>
</span>
```

### Prefer semantic numeric utilities
For common numeric features, prefer [`tabular-nums`](/reference/font-variant-numeric) or related numeric utilities because they are easier to read than raw feature tags.
```html
<span class="tabular-nums">12:45</span>
```

### Use feature tokens
Define `font-feature-*` tokens when a feature combination is shared across several typographic treatments.

```css name=index.css
@theme {
  --font-feature-tabular: "tnum";
}
```

```html
<span class="font-feature-settings:tabular">1234567890</span>
```

### Apply conditionally
Apply styles based on different states using [selectors](/guide/state-selectors) and [conditional queries](/guide/conditional-queries).
```html
<span class="font-feature-settings:'tnum':hover font-feature-settings:normal@print font-feature-settings:normal@sm">...</span>
```

---

# font-size

Source: https://rc.css.master.co/en/reference/font-size

Summary: Setting the font size of elements.

## Overview

## Examples
### Basic usage

Use `font:*` size tokens for project typography steps such as body copy, labels, and headings. The token names come from the font-size theme token scale.
```html
<!-- @MARK font:sm --><!-- @MARK font:2xl -->
<p class="font:sm">Small supporting text</p>
<h2 class="font:2xl">Section title</h2>
```
### With line height
Set the line height, use the [`leading:<size>`](/reference/line-height) syntax along with the font size.
```html
<!-- @MARK font:md leading:1.2 -->
<div class="font:md leading:xs">Sphinx of black quartz, judge my vow.</div>
```
You can also use the [`text:<size>`](/reference/text-size) syntax to set the line height and font size together.

### Use an explicit font size
Use `font-size:*` when a one-off value should not become a named token.
```html
<!-- @MARK font-size:clamp(1.25rem,2vw,2rem) -->
<h1 class="font-size:clamp(1.25rem,2vw,2rem)">
  Fluid title
</h1>
```

Prefer named tokens for repeated typography. Use explicit CSS values for local measured cases, demos, or fluid formulas.

### Apply conditionally
Apply styles based on different states using [selectors](/guide/state-selectors) and [conditional queries](/guide/conditional-queries).
```html
<div class="font:sm font:sm@print font:md@sm font:lg@lg">...</div>
```

---

# font-smooth

Source: https://rc.css.master.co/en/reference/font-smooth

Summary: Controlling the application of anti-aliasing when fonts are rendered.

## Overview

## Examples
### Use antialiased text
Use `font-antialiased` when display text should use grayscale antialiasing.
```html
<!-- @MARK font-antialiased -->
<h1 class="font-antialiased">Dashboard</h1>
```
### Restore subpixel antialiasing
Use `font-subpixel-antialiased` when you want to return to the platform default smoothing behavior.
```html
<!-- @MARK font-subpixel-antialiased -->
<p class="font-antialiased font-subpixel-antialiased@sm">
  Body text
</p>
```

### Use sparingly
Font smoothing is platform-specific. Prefer testing it on the actual surfaces where the text will appear.
```html
<h2 class="font-antialiased">Large heading</h2>
```

### Apply conditionally
Apply styles based on different states using [selectors](/guide/state-selectors) and [conditional queries](/guide/conditional-queries).
```html
<p class="font-antialiased:hover font-subpixel-antialiased@print font-subpixel-antialiased@sm">...</p>
```

---

# font-style

Source: https://rc.css.master.co/en/reference/font-style

Summary: Setting font style of an element.

## Overview

## Examples
### Italicize emphasis
Use `italic` for emphasized text when the typeface includes an italic style.
```html
<!-- @MARK italic -->
<em class="italic">Important</em>
```
### Use oblique text
Use `oblique` when the design calls for a slanted style rather than a true italic face.
```html
<!-- @MARK oblique -->
<span class="oblique">Draft</span>
```

### Reset font style
Use `font-style:normal` to cancel inherited italic or oblique styles.
```html
<!-- @MARK font-style:normal -->
<span class="italic">
  <span class="font-style:normal">Not emphasized</span>
</span>
```

### Apply conditionally
Apply styles based on different states using [selectors](/guide/state-selectors) and [conditional queries](/guide/conditional-queries).
```html
<span class="italic:hover font-style:normal@print font-style:normal@sm">...</span>
```

---

# font-variant-numeric

Source: https://rc.css.master.co/en/reference/font-variant-numeric

Summary: Controlling the usage of alternate glyphs for numbers, fractions, and ordinal markers.

## Overview

## Examples
### Align tabular numbers
Use `tabular-nums` for tables, timers, and dashboards where digits should line up across rows.
```html
<!-- @MARK tabular-nums -->
<td class="tabular-nums">12,480.00</td>
```
### Show slashed zeroes
Use `slashed-zero` when zeroes need to be visually distinct from the letter O.
```html
<!-- @MARK slashed-zero -->
<code class="slashed-zero">OID-00042</code>
```

### Reset numeric variants
Use `font-variant-numeric:normal` to remove numeric variant features from a nested element.
```html
<!-- @MARK font-variant-numeric:normal -->
<span class="tabular-nums">
  <span class="font-variant-numeric:normal">Normal numbers</span>
</span>
```

### Apply conditionally
Apply styles based on different states using [selectors](/guide/state-selectors) and [conditional queries](/guide/conditional-queries).
```html
<span class="tabular-nums:hover font-variant-numeric:normal@print font-variant-numeric:normal@sm">...</span>
```

---

# font-weight

Source: https://rc.css.master.co/en/reference/font-weight

Summary: Setting the weight of the font.

## Overview

## Examples
### Basic usage

Use `font:*` weight shortcuts for common type emphasis.
```html
<!-- @MARK font:regular --><!-- @MARK font:semibold --><!-- @MARK font:heavy -->
<p class="font:regular">Regular body text</p>
<strong class="font:semibold">Important label</strong>
<h1 class="font:heavy">Display heading</h1>
```
### Use explicit weights
Use `font-weight:*` for numeric or keyword weights that do not have a shortcut.
```html
<!-- @MARK font-weight:600 -->
<span class="font-weight:600">Custom weight</span>
```

Weight changes only work when the active font family provides that weight or the browser can synthesize it.

### Apply conditionally
Apply styles based on different states using [selectors](/guide/state-selectors) and [conditional queries](/guide/conditional-queries).
```html
<div class="font:regular font:semibold:hover font:regular@print font:bold@sm">...</div>
```

---

# gap

Source: https://rc.css.master.co/en/reference/gap

Summary: Setting the gutters between rows and columns.

## Overview

## Examples
### Add the same gap on both axes
Use `gap:*` on flex and grid containers to set the spacing between children. Unlike margin, gap only affects space between items and does not add space around the outside edge.
```html
<!-- @MARK grid-cols:3 --><!-- @MARK gap:md -->
<div class="grid-cols:3 gap:md">
  <article>...</article>
  <article>...</article>
  <article>...</article>
</div>
```
### Set row and column gaps separately
Use `gap-y:*` for row gaps and `gap-x:*` for column gaps. This is common in card grids where horizontal gutters and vertical rhythm need different values.
```html
<!-- @MARK gap-x:lg --><!-- @MARK gap-y:xl -->
<section class="grid-cols:1 gap-x:lg gap-y:xl grid-cols:3@md">
  ...
</section>
```

You can also set row and column values in one class with `gap:<row>|<column>`.
```html
<!-- @MARK gap:xl|lg -->
<section class="grid-cols:3 gap:xl|lg">
  ...
</section>
```

### Use gap for component internals
Gap is usually easier to maintain than child margins for toolbars, stacks, media objects, and repeated lists.
```html
<!-- @MARK flex --><!-- @MARK items-center --><!-- @MARK gap:sm -->
<div class="flex items-center gap:sm">
  <img class="size:8x round" alt="" />
  <span>Aron</span>
</div>
```

### Apply conditionally
Apply styles based on different states using [selectors](/guide/state-selectors) and [conditional queries](/guide/conditional-queries).
```html
<div class="gap:xs:hover gap:lg@dark gap:0@print gap:md@sm">...</div>
```

For page and component rhythm, prefer shared spacing tokens such as `sm`, `md`, and `lg`.

---

# grid

Source: https://rc.css.master.co/en/reference/grid

Summary: Setting layout of grid system.

## Overview

## Examples
### Set the native grid shorthand
Use `grid:*` when you need the complete CSS `grid` shorthand in one class.
```html
<!-- @MARK grid:none -->
<div class="grid:none">
  ...
</div>
```
### Define rows, columns, and auto flow together
Use pipe separators for spaces inside the shorthand and `/` for the row/column separator.
```html
<!-- @MARK grid:auto-flow|1fr/1fr|1fr -->
<section class="grid:auto-flow|1fr/1fr|1fr">
  ...
</section>
```

The `grid` shorthand resets several grid longhands. For most layouts, prefer focused utilities such as [grid-template-columns](/reference/grid-template-columns), [grid-template-rows](/reference/grid-template-rows), [grid-auto-flow](/reference/grid-auto-flow), and [gap](/reference/gap).

### Apply conditionally
Apply styles based on different states using [selectors](/guide/state-selectors) and [conditional queries](/guide/conditional-queries).
```html
<div class="grid:none grid:none@print grid:auto-flow|1fr/1fr|1fr@sm">...</div>
```

Use the static `grid` display utility when the goal is only `display: grid`.

---

# grid-area

Source: https://rc.css.master.co/en/reference/grid-area

Summary: Setting a size and location within a grid.

## Overview

## Basic usage
### Place an item by grid lines
Use `grid-area` to place a grid item by `row-start / column-start / row-end / column-end`.

```html
<div class="grid grid-cols:3 grid-template-rows:64px|88px|88px">
  <!-- @MARK grid-area:1/1/2/4 -->
  <header class="grid-area:1/1/2/4">Header</header>

  <!-- @MARK grid-area:2/1/4/2 -->
  <nav class="grid-area:2/1/4/2">Navigation</nav>

  <!-- @MARK grid-area:2/2/4/4 -->
  <main class="grid-area:2/2/4/4">Content</main>
</div>
```

### Span tracks
Use `span` values when the item should cover a number of rows or columns from its starting line.

```html
<!-- @MARK grid-area:2/2/span|2/span|2 -->
<section class="grid-area:2/2/span|2/span|2">Featured panel</section>
```

### Use a named area
`grid-area` also accepts a custom identifier that matches a named area from [`grid-template-areas`](/reference/grid-template-areas).
```html
<!-- @MARK grid-area:hero -->
<section class="grid-area:hero">Hero</section>
```

### Apply conditionally
Apply styles based on different states using [selectors](/guide/state-selectors) and [conditional queries](/guide/conditional-queries).
```html
<div class="grid-area:auto:hover grid-area:auto@dark grid-area:auto@print grid-area:auto@sm">…</div>
```

---

# grid-auto-columns

Source: https://rc.css.master.co/en/reference/grid-auto-columns

Summary: Setting the size of the grid columns.

## Overview

## Basic usage
### Size implicit columns
Use `grid-auto-columns` to size columns created outside the explicit grid.

```html
<div class="grid grid-auto-flow:column">
  <!-- @MARK grid-auto-columns:96px -->
  <div class="grid-auto-columns:96px">A</div>
  <div>B</div>
  <div>C</div>
</div>
```

### Apply conditionally
Apply styles based on different states using [selectors](/guide/state-selectors) and [conditional queries](/guide/conditional-queries).
```html
<div class="grid-auto-columns:96px:hover grid-auto-columns:96px@dark grid-auto-columns:96px@print grid-auto-columns:96px@sm">…</div>
```

---

# grid-auto-flow

Source: https://rc.css.master.co/en/reference/grid-auto-flow

Summary: Controlling how auto-placed items get inserted in the grid.

## Overview

## Basic usage
### Fill by column
Use `grid-auto-flow` to control how auto-placed grid items flow into the grid.

```html
<!-- @MARK grid-auto-flow:column -->
<div class="grid grid-auto-flow:column grid-template-rows:56px|56px">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
</div>
```

### Fill gaps densely
Use `dense` to let later items fill earlier holes when possible.
```html
<!-- @MARK grid-auto-flow:row|dense -->
<div class="grid grid-auto-flow:row|dense">…</div>
```

### Apply conditionally
Apply styles based on different states using [selectors](/guide/state-selectors) and [conditional queries](/guide/conditional-queries).
```html
<div class="grid-auto-flow:column:hover grid-auto-flow:column@dark grid-auto-flow:column@print grid-auto-flow:column@sm">…</div>
```

---

# grid-auto-rows

Source: https://rc.css.master.co/en/reference/grid-auto-rows

Summary: Setting the size of the grid rows.

## Overview

## Basic usage
### Size implicit rows
Use `grid-auto-rows` to size rows created outside the explicit grid.

```html
<!-- @MARK grid-auto-rows:64px -->
<div class="grid grid-cols:2 grid-auto-rows:64px">
  <div>A</div><div>B</div><div>C</div>
</div>
```

### Apply conditionally
Apply styles based on different states using [selectors](/guide/state-selectors) and [conditional queries](/guide/conditional-queries).
```html
<div class="grid-auto-rows:64px:hover grid-auto-rows:64px@dark grid-auto-rows:64px@print grid-auto-rows:64px@sm">…</div>
```

---

# grid-column

Source: https://rc.css.master.co/en/reference/grid-column

Summary: Setting a grid items's size and location in a grid layout.

## Overview

## Basic usage
### Place an item by columns
Use `grid-column` to place an item between column grid lines.

```html
<!-- @MARK grid-column:2/4 -->
<div class="grid-column:2/4">Item</div>
```

### Span columns
```html
<!-- @MARK grid-col-span:2 -->
<div class="grid-col-span:2">Spans two columns</div>
```

### Apply conditionally
Apply styles based on different states using [selectors](/guide/state-selectors) and [conditional queries](/guide/conditional-queries).
```html
<div class="grid-column:2/4:hover grid-column:2/4@dark grid-column:2/4@print grid-column:2/4@sm">…</div>
```

---

# grid-columns

Source: https://rc.css.master.co/en/reference/grid-columns

Summary: Style utility for creating multiple grid columns.

## Overview

## Basic usage
### Create equal columns
Use `grid-cols` to create an equal-width column grid. It also sets `display:grid`.

```html
<!-- @MARK grid-cols:3 -->
<div class="grid-cols:3">
  <div>1</div><div>2</div><div>3</div>
</div>
```

### Apply conditionally
Apply styles based on different states using [selectors](/guide/state-selectors) and [conditional queries](/guide/conditional-queries).
```html
<div class="grid-cols:3:hover grid-cols:3@dark grid-cols:3@print grid-cols:3@sm">…</div>
```

---

# grid-row

Source: https://rc.css.master.co/en/reference/grid-row

Summary: Setting a grid items's size and location in a grid layout.

## Overview

## Basic usage
### Place an item by rows
Use `grid-row` to place an item between row grid lines.

```html
<!-- @MARK grid-row:1/3 -->
<div class="grid-row:1/3">Item</div>
```

### Span rows
```html
<!-- @MARK grid-row-span:2 -->
<div class="grid-row-span:2">Spans two rows</div>
```

### Apply conditionally
Apply styles based on different states using [selectors](/guide/state-selectors) and [conditional queries](/guide/conditional-queries).
```html
<div class="grid-row:1/3:hover grid-row:1/3@dark grid-row:1/3@print grid-row:1/3@sm">…</div>
```

---

# grid-rows

Source: https://rc.css.master.co/en/reference/grid-rows

Summary: Style utility for creating multiple grid rows.

## Overview

## Basic usage
### Create equal rows
Use `grid-rows` to create equal-height rows. It also sets `display:grid` and `grid-auto-flow:column`.

```html
<!-- @MARK grid-rows:3 -->
<div class="grid-rows:3">
  <div>1</div><div>2</div><div>3</div>
</div>
```

### Apply conditionally
Apply styles based on different states using [selectors](/guide/state-selectors) and [conditional queries](/guide/conditional-queries).
```html
<div class="grid-rows:3:hover grid-rows:3@dark grid-rows:3@print grid-rows:3@sm">…</div>
```

---

# grid-template

Source: https://rc.css.master.co/en/reference/grid-template

Summary: Setting grid columns, grid rows, and grid areas.

## Overview

## Basic usage
### Define rows and columns together
Use `grid-template` to set grid rows and columns in one shorthand.

```html
<!-- @MARK grid-template:64px|1fr/120px|1fr -->
<div class="grid grid-template:64px|1fr/120px|1fr">…</div>
```

### Apply conditionally
Apply styles based on different states using [selectors](/guide/state-selectors) and [conditional queries](/guide/conditional-queries).
```html
<div class="grid-template:64px|1fr/120px|1fr:hover grid-template:64px|1fr/120px|1fr@dark grid-template:64px|1fr/120px|1fr@print grid-template:64px|1fr/120px|1fr@sm">…</div>
```

---

# grid-template-areas

Source: https://rc.css.master.co/en/reference/grid-template-areas

Summary: Setting areas in the grid container

## Overview

## Basic usage
### Name areas in a grid
Use `grid-template-areas` to define named layout regions, then place children with [`grid-area`](/reference/grid-area).

```html
<!-- @MARK grid-template-areas:'head_head'|'nav_main' -->
<div class="grid grid-template-areas:'head_head'|'nav_main'">
  <header class="grid-area:head">Head</header>
  <nav class="grid-area:nav">Nav</nav>
  <main class="grid-area:main">Main</main>
</div>
```

### Apply conditionally
Apply styles based on different states using [selectors](/guide/state-selectors) and [conditional queries](/guide/conditional-queries).
```html
<div class="grid-template-areas:none:hover grid-template-areas:none@dark grid-template-areas:none@print grid-template-areas:none@sm">…</div>
```

---

# grid-template-columns

Source: https://rc.css.master.co/en/reference/grid-template-columns

Summary: Creating columns in a grid layout.

## Overview

## Basic usage
### Define explicit columns
Use `grid-template-columns` to define the track list for grid columns.

```html
<!-- @MARK grid-template-columns:96px|1fr|72px -->
<div class="grid grid-template-columns:96px|1fr|72px">…</div>
```

### Use minmax
```html
<!-- @MARK grid-template-columns:minmax(0,1fr)|2fr -->
<div class="grid grid-template-columns:minmax(0,1fr)|2fr">…</div>
```

### Apply conditionally
Apply styles based on different states using [selectors](/guide/state-selectors) and [conditional queries](/guide/conditional-queries).
```html
<div class="grid-template-columns:96px|1fr|72px:hover grid-template-columns:96px|1fr|72px@dark grid-template-columns:96px|1fr|72px@print grid-template-columns:96px|1fr|72px@sm">…</div>
```

---

# grid-template-rows

Source: https://rc.css.master.co/en/reference/grid-template-rows

Summary: Creating rows in a grid layout.

## Overview

## Basic usage
### Define explicit rows
Use `grid-template-rows` to define the track list for grid rows.

```html
<!-- @MARK grid-template-rows:48px|80px|48px -->
<div class="grid grid-template-rows:48px|80px|48px">…</div>
```

### Use minmax
```html
<!-- @MARK grid-template-rows:minmax(48px,auto)|1fr -->
<div class="grid grid-template-rows:minmax(48px,auto)|1fr">…</div>
```

### Apply conditionally
Apply styles based on different states using [selectors](/guide/state-selectors) and [conditional queries](/guide/conditional-queries).
```html
<div class="grid-template-rows:48px|80px|48px:hover grid-template-rows:48px|80px|48px@dark grid-template-rows:48px|80px|48px@print grid-template-rows:48px|80px|48px@sm">…</div>
```

---

# height

Source: https://rc.css.master.co/en/reference/height

Summary: Setting an element’s height.

## Overview

## Examples
### Set a fixed height
Use `h:*` to set the CSS `height` property. Fixed heights are best for controls, media frames, skeletons, and areas with intentionally bounded content.
```html
<!-- @MARK h:12x -->
<div class="h:12x bg:gray-5">
  ...
</div>
```
### Fill a parent height
Use `h:full` when the parent has a definite height.
```html
<!-- @MARK h:64x --><!-- @MARK h:full -->
<section class="h:3xs">
  <div class="h:full">...</div>
</section>
```

If the parent height is automatic, percentage heights such as `h:full` and `h:50%` may not resolve the way you expect. This is native CSS behavior.

### Use viewport and intrinsic values
Use native CSS units for viewport-sized regions, and keywords when the content should define the block size.
```html
<!-- @MARK min-h:100dvh -->
<main class="min-h:100dvh">...</main>

<!-- @MARK h:fit -->
<aside class="h:fit">...</aside>
```

### Size both axes together
For square icons, avatars, and controls, prefer [size](/reference/size) over repeating `w:*` and `h:*`.
```html
<!-- @MARK size:10x -->
<button class="size:10x round">...</button>
```

### Apply conditionally
Apply styles based on different states using [selectors](/guide/state-selectors) and [conditional queries](/guide/conditional-queries).
```html
<div class="h:10x:hover h:full@dark h:auto@print h:14x@sm">...</div>
```

Use [min-height](/reference/min-height) when content may grow but the region still needs a baseline size.

---

# hyphens

Source: https://rc.css.master.co/en/reference/hyphens

Summary: Set how to split words to improve the layout of paragraphs.

## Overview

## Examples
### Allow automatic hyphenation
Use `hyphens:auto` for narrow text columns where long words can otherwise create uneven lines.
```html
<!-- @MARK hyphens:auto -->
<p lang="en" class="hyphens:auto">
  Antidisestablishmentarianism can hyphenate when the browser has language data.
</p>
```
### Respect manual hyphenation points
Use `hyphens:manual` when the content includes soft hyphens or explicit hyphenation decisions.
```html
<!-- @MARK hyphens:manual -->
<p class="hyphens:manual">trans&shy;formation</p>
```

### Disable hyphenation
Use `hyphens:none` for codes, product names, or text where inserted hyphens would change meaning.
```html
<!-- @MARK hyphens:none -->
<code class="hyphens:none">MASTERCSS_RUNTIME_TOKEN</code>
```

### Apply conditionally
Apply styles based on different states using [selectors](/guide/state-selectors) and [conditional queries](/guide/conditional-queries).
```html
<p class="hyphens:auto hyphens:none@print hyphens:none@sm">...</p>
```

---

# inset

Source: https://rc.css.master.co/en/reference/inset

Summary: Setting distance between an element and the parent element.

## Overview

## Examples
### Pin all sides
Use `inset:*` on positioned elements to set `top`, `right`, `bottom`, and `left` together.

    <div className="box rel inset:20px w:180px aspect-ratio:1/1">`inset:20px`</div>
```html
<!-- @MARK inset:20px -->
<div>
  <div class="rel inset:20px">inset:5x</div>
</div>
```
### Pin one side
Use side utilities such as `top:*`, `right:*`, `bottom:*`, and `left:*` when only one edge should move.
```html
<!-- @MARK top:0 --><!-- @MARK right:0 -->
<button class="abs right:0 top:0">
  Close
</button>
```

### Center overlays with inset
`inset:0` is useful for overlays that should cover their positioned parent.
```html
<div class="rel">
  <div class="abs inset:0"></div>
</div>
```

### Apply conditionally
Apply styles based on different states using [selectors](/guide/state-selectors) and [conditional queries](/guide/conditional-queries).
```html
<div class="inset:0.625rem:hover inset:0@print inset:20px@sm">...</div>
```

---

# isolation

Source: https://rc.css.master.co/en/reference/isolation

Summary: Controlling whether an element should create a new stacking context.

## Overview

## Examples
### Create a stacking context
Use `isolate` when a component's blending, z-index, or effects should be contained inside its own stacking context.
```html
<!-- @MARK isolate -->
<section class="isolate">
  <div class="mix-blend-mode:multiply">Blend locally</div>
</section>
```
### Return to automatic isolation
Use `isolation:auto` when a variant should let the browser use normal stacking behavior.
```html
<!-- @MARK isolation:auto -->
<section class="isolate isolation:auto@sm">
  Normal stacking on larger screens
</section>
```

### Protect layered components
Isolation is useful for cards, modals, and previews that use blend modes or negative z-index children.
```html
<article class="rel isolate">
  <div class="abs inset:0 z:-1"></div>
</article>
```

### Apply conditionally
Apply styles based on different states using [selectors](/guide/state-selectors) and [conditional queries](/guide/conditional-queries).
```html
<div class="isolate:hover isolation:auto@print isolation:auto@sm">...</div>
```

---

# justify-content

Source: https://rc.css.master.co/en/reference/justify-content

Summary: Controlling how items are aligned along its main axis.

## Overview

## Examples
### Align items on the main axis
Use `justify-*` utilities to distribute flex or grid items along the container main axis. In a default row flexbox, that axis is horizontal.
```html
<!-- @MARK flex --><!-- @MARK justify-between -->
<nav class="flex justify-between">
  <a href="/">Home</a>
  <a href="/settings">Settings</a>
</nav>
```
### Start, center, or end a group
Use `justify-start`, `justify-center`, and `justify-end` for the most common positional alignment.
```html
<!-- @MARK justify-center -->
<div class="flex justify-center gap:sm">
  <button>Cancel</button>
  <button>Save</button>
</div>
```

In a column flexbox, the main axis becomes vertical, so `justify-center` centers items vertically instead.
```html
<!-- @MARK flex-col --><!-- @MARK justify-center -->
<section class="flex flex-col justify-center h:3xs">
  ...
</section>
```

### Distribute extra space
Use `justify-between`, `justify-around`, or `justify-evenly` when the container has extra space to distribute between items.
```html
<!-- @MARK justify-evenly -->
<ul class="flex justify-evenly gap:sm">
  <li>One</li>
  <li>Two</li>
  <li>Three</li>
</ul>
```

Use `gap:*` when the distance between items should be fixed. Use `justify-*` when the remaining container space should control placement.

### Use explicit CSS values
Use `justify-content:<value>` when you need a value that does not have a shortcut.
```html
<!-- @MARK justify-content:safe|center -->
<div class="flex justify-content:safe|center">
  ...
</div>
```

### Apply conditionally
Apply styles based on different states using [selectors](/guide/state-selectors) and [conditional queries](/guide/conditional-queries).
```html
<div class="justify-start justify-start@print justify-center@sm justify-between@lg">...</div>
```

Use [align-items](/reference/align-items) for the cross axis.

---

# justify-items

Source: https://rc.css.master.co/en/reference/justify-items

Summary: Controlling how items are aligned along its inline axis.

## Overview

## Examples
### Align grid items inline
Use `justify-items:*` to set the default inline-axis alignment for children in a grid container.
```html
<!-- @MARK grid --><!-- @MARK justify-items:center -->
<div class="grid justify-items:center">
  ...
</div>
```
### Stretch items by default
Use `justify-items:stretch` when grid children should fill their grid areas inline.
```html
<!-- @MARK justify-items:stretch -->
<section class="grid justify-items:stretch">...</section>
```

Use [justify-self](/reference/justify-self) when only one grid item needs different alignment.

### Apply conditionally
Apply styles based on different states using [selectors](/guide/state-selectors) and [conditional queries](/guide/conditional-queries).
```html
<div class="justify-items:stretch justify-items:stretch@print justify-items:center@sm">...</div>
```

For flexbox main-axis distribution, use [justify-content](/reference/justify-content) instead.

---

# justify-self

Source: https://rc.css.master.co/en/reference/justify-self

Summary: Controlling how an individual item is aligned along its inline axis.

## Overview

## Examples
### Align one grid item inline
Use `justify-self:*` to override inline-axis alignment for a single grid item.
```html
<!-- @MARK grid --><!-- @MARK justify-self:end -->
<div class="grid">
  <button class="justify-self:end">Save</button>
</div>
```
### Center an item inside its area
Use `justify-self:center` when the grid area is wider than the item.
```html
<!-- @MARK justify-self:center -->
<img class="justify-self:center" src="..." alt="" />
```

Use [justify-items](/reference/justify-items) when every child should share the same inline alignment.

### Apply conditionally
Apply styles based on different states using [selectors](/guide/state-selectors) and [conditional queries](/guide/conditional-queries).
```html
<div class="justify-self:stretch justify-self:stretch@print justify-self:end@sm">...</div>
```

For cross-axis item overrides, use [align-self](/reference/align-self).

---

# letter-spacing

Source: https://rc.css.master.co/en/reference/letter-spacing

Summary: Setting the spacing between text characters.

## Overview

## Examples
### Basic usage

Use `tracking:*` to control letter spacing. Tight tracking is common for large headings, while wider tracking is often used for short uppercase labels.
```html
<!-- @MARK tracking:tight --><!-- @MARK tracking:wide -->
<h1 class="tracking:tight">Product launch</h1>
<p class="font:xs tracking:wide text-transform:uppercase">Preview</p>
```
### Use a custom value
Use `tracking:*` with an explicit CSS value when the spacing is a local typographic adjustment.
```html
<!-- @MARK tracking:.04em -->
<span class="tracking:.04em">Custom tracking</span>
```

Avoid wide tracking on long paragraphs because it reduces readability.

### Apply conditionally
Apply styles based on different states using [selectors](/guide/state-selectors) and [conditional queries](/guide/conditional-queries).
```html
<div class="tracking:normal tracking:wide:hover tracking:normal@print tracking:tight@sm">...</div>
```

---

# line-clamp

Source: https://rc.css.master.co/en/reference/line-clamp

Summary: Limiting the contents of a container to the specified number of lines.

## Overview

## Examples
### Clamp long summaries
Use `line-clamp:*` to limit text to a fixed number of lines and hide the overflow.
```html
<!-- @MARK line-clamp:3 -->
<p class="line-clamp:3">
  Master CSS turns class strings into deterministic CSS rules, making it practical to keep styling close to markup without giving up cascade control.
</p>
```
### Remove a clamp
Use `line-clamp:none` when a responsive layout has enough space to show the whole paragraph.
```html
<!-- @MARK line-clamp:none@sm -->
<p class="line-clamp:2 line-clamp:none@sm">
  The full description appears once the layout has enough horizontal room.
</p>
```

### Keep important content accessible
Line clamping is visual truncation. Do not hide required legal, error, or instruction text behind a clamp without another way to read it.
```html
<p class="line-clamp:2" title="Full project description">
  Project description
</p>
```

### Apply conditionally
Apply styles based on different states using [selectors](/guide/state-selectors) and [conditional queries](/guide/conditional-queries).
```html
<p class="line-clamp:2:hover line-clamp:none@print line-clamp:3@sm">...</p>
```

---

# line-height

Source: https://rc.css.master.co/en/reference/line-height

Summary: Setting the height of a line box.

## Overview

## Examples
### Basic usage

You can also use [`text:<size>`](/reference/text-size) to set a text size with a golden ratio line height.

### Set line height with font size
Use `leading:*` with `font:*` when the type size and line height need to be tuned independently.
```html
<!-- @MARK font:md --><!-- @MARK leading:lg -->
<p class="font:md leading:lg">
  Comfortable paragraph text for longer reading.
</p>
```
### Tighten display text
Use `leading:1` or another compact value for large headings where default paragraph leading would create too much vertical space.
```html
<!-- @MARK font:5xl --><!-- @MARK leading:1 -->
<h1 class="font:5xl leading:1">Launch faster</h1>
```

### Use explicit values
Use `leading:*` with a unitless number, length, or token depending on the typographic need.
```html
<!-- @MARK leading:1.35 -->
<p class="leading:1.35">Measured line height</p>
```

### Apply conditionally
Apply styles based on different states using [selectors](/guide/state-selectors) and [conditional queries](/guide/conditional-queries).
```html
<div class="leading:sm leading:lg@print leading:md@sm">...</div>
```

---

# list-style

Source: https://rc.css.master.co/en/reference/list-style

Summary: Setting all the list style properties at once.

## Overview

## Examples
### Set type and position together
Use `list-style:*|*` when list marker type and marker position belong together.
```html
<!-- @MARK list-style:disc|inside -->
<ul class="list-style:disc|inside">
  <li>Install</li>
  <li>Configure</li>
</ul>
```
### Use an image marker
Use `list-style-image:url(*)` when the marker should come from an image asset.
```html
<!-- @MARK list-style-image:url(/marker.svg) -->
<ul class="list-style-image:url(/marker.svg)">
  <li>Custom marker</li>
</ul>
```

### Split longhands when variants differ
Use the type, position, and image pages when only one part of the list style changes across states.
```html
<ul class="list-style:decimal list-style:inside@sm">
  <li>Step</li>
</ul>
```

### Apply conditionally
Apply styles based on different states using [selectors](/guide/state-selectors) and [conditional queries](/guide/conditional-queries).
```html
<ul class="list-style:disc|inside:hover list-style:disc@print list-style:decimal@sm">...</ul>
```

---

# list-style-image

Source: https://rc.css.master.co/en/reference/list-style-image

Summary: Replacing the list item marker with an image.

## Overview

## Examples
### Use an image marker
Use `list-style-image:url(*)` when each list item should use an image marker.
```html
<!-- @MARK list-style-image:url(/marker.svg) -->
<ul class="list-style-image:url(/marker.svg)">
  <li>Custom marker</li>
</ul>
```
### Use a gradient marker
Gradient functions can also be used when a generated marker is more appropriate than an asset.
```html
<!-- @MARK list-style-image:linear-gradient(var(--color-blue-60)|var(--color-blue-40)) -->
<ul class="list-style-image:linear-gradient(var(--color-blue-60)|var(--color-blue-40))">
  <li>Gradient marker</li>
</ul>
```

### Fall back to type markers
Use `list-style:disc` or another type utility when image markers are not desired in a condition.
```html
<ul class="list-style-image:url(/marker.svg) list-style:disc@print">
  <li>Printable marker</li>
</ul>
```

### Apply conditionally
Apply styles based on different states using [selectors](/guide/state-selectors) and [conditional queries](/guide/conditional-queries).
```html
<ul class="list-style-image:url(/marker.svg):hover list-style:disc@print list-style:disc@sm">...</ul>
```

---

# list-style-position

Source: https://rc.css.master.co/en/reference/list-style-position

Summary: Setting the position of the list item marker.

## Overview

## Examples
### Place markers inside the content box
Use `list-style:inside` when markers should be part of the text block and align with wrapped lines.
```html
<!-- @MARK list-style:inside -->
<ul class="list-style:inside">
  <li>Long item that wraps inside the same text block.</li>
</ul>
```
### Keep markers outside
Use `list-style:outside` for the default marker placement outside the principal block box.
```html
<!-- @MARK list-style:outside -->
<ul class="list-style:outside">
  <li>Marker outside</li>
</ul>
```

### Combine with marker type
You can set position by itself or combine it with type using the `list-style:*|*` shorthand.
```html
<ul class="list-style:decimal|inside">
  <li>Step</li>
</ul>
```

### Apply conditionally
Apply styles based on different states using [selectors](/guide/state-selectors) and [conditional queries](/guide/conditional-queries).
```html
<ul class="list-style:inside:hover list-style:outside@print list-style:outside@sm">...</ul>
```

---

# list-style-type

Source: https://rc.css.master.co/en/reference/list-style-type

Summary: Setting the style of the list item marker.

## Overview

## Examples
### Use decimal markers
Use `list-style:decimal` for ordered instructions that need numeric markers.
```html
<!-- @MARK list-style:decimal -->
<ol class="list-style:decimal">
  <li>Install dependencies</li>
  <li>Run the build</li>
</ol>
```
### Use disc markers
Use `list-style:disc` for unordered lists with default disc markers.
```html
<!-- @MARK list-style:disc -->
<ul class="list-style:disc">
  <li>Fast</li>
  <li>Typed</li>
</ul>
```

### Use a native list style type
Use `list-style-type:*` when the marker type is not covered by an alias.
```html
<!-- @MARK list-style-type:square -->
<ul class="list-style-type:square">
  <li>Square marker</li>
</ul>
```

### Apply conditionally
Apply styles based on different states using [selectors](/guide/state-selectors) and [conditional queries](/guide/conditional-queries).
```html
<ul class="list-style:disc:hover list-style:disc@print list-style:decimal@sm">...</ul>
```

---

# margin

Source: https://rc.css.master.co/en/reference/margin

Summary: Setting the margin area on all four sides of an element.

## Overview

## Examples
### Add margin on every side
Use `m:*` to create space outside an element. Margin separates the element from neighboring boxes; it is not painted by the element background.
```html
<!-- @MARK m:md -->
<aside class="m:md b:1px|solid|gray-20 bg:white">
  Detached content
</aside>
```
### Set one side
Use `mt:*`, `mr:*`, `mb:*`, and `ml:*` for one physical side. One-side margins are useful for vertical rhythm between headings, paragraphs, media, and actions.
```html
<!-- @MARK mt:lg --><!-- @MARK mb:sm -->
<section>
  <h2 class="mb:sm mt:lg">Billing</h2>
  <p class="m:0">Manage invoices and payment details.</p>
</section>
```

### Set horizontal or vertical margins
Use `mx:*` for inline margins and `my:*` for block margins.
```html
<!-- @MARK mx:auto --><!-- @MARK my:lg --><!-- @MARK max-w:5xl -->
<main class="w:full max-w:5xl mx:auto my:lg">
  ...
</main>
```

`mx:auto` is the standard way to center a block with a constrained width. The element still needs a width or maximum width that leaves free inline space.

### Avoid margin for internal spacing
Use [padding](/reference/padding) for space inside a component and [gap](/reference/gap) for spacing between flex or grid children. Reserve margin for relationships between separate layout regions.
```html
<!-- @MARK gap:md -->
<div class="flex gap:md">
  <button>Cancel</button>
  <button>Save</button>
</div>
```

### Apply conditionally
Apply styles based on different states using [selectors](/guide/state-selectors) and [conditional queries](/guide/conditional-queries).
```html
<div class="m:0:hover m:lg@dark m:0@print m:md@sm">...</div>
```

(i) Vertical margins can collapse in normal block flow, following native CSS behavior. Padding and gap do not collapse.

---

# mask-image

Source: https://rc.css.master.co/en/reference/mask-image

Summary: Setting the image that is used as mask layer for an element.

## Overview

## Examples
### Apply a mask image
Use `mask-image:*` to control the alpha mask for an element.
```html
<!-- @MARK mask-image:linear-gradient(black,transparent) -->
<div class="mask-image:linear-gradient(black,transparent)">
  ...
</div>
```
### Fade overflowing media
Gradient masks are useful when media or scroll regions should fade out without changing layout.
```html
<!-- @MARK overflow:hidden --><!-- @MARK mask-image:linear-gradient(black,transparent) -->
<figure class="overflow:hidden mask-image:linear-gradient(black,transparent)">
  ...
</figure>
```

Masks affect painting and hit testing can still follow the original element box. Keep interactive controls outside heavily masked regions.

### Apply conditionally
Apply styles based on different states using [selectors](/guide/state-selectors) and [conditional queries](/guide/conditional-queries).
```html
<div class="mask-image:none mask-image:none@print mask-image:linear-gradient(black,transparent)@sm">...</div>
```

---

# max-height

Source: https://rc.css.master.co/en/reference/max-height

Summary: Setting the maximum height of an element.

## Overview

## Examples
### Cap a vertical region
Use `max-h:*` when content should stop growing past a limit.
```html
<!-- @MARK max-h:64x --><!-- @MARK overflow-y:auto -->
<div class="overflow-y:auto max-h:3xs">
  ...
</div>
```
### Keep media inside a frame
Use `max-h:*` with `object-contain` or `object-cover` when replaced media must stay within a visual frame.
```html
<!-- @MARK max-h:48x --><!-- @MARK w:full -->
<img class="w:full max-h:48x object-contain" src="..." alt="" />
```

### Use viewport caps
Use `max-vh` or native viewport units when overlays and menus must stay within the visible viewport.
```html
<!-- @MARK max-h:80dvh --><!-- @MARK overflow:auto -->
<div class="overflow:auto max-h:80dvh">
  ...
</div>
```

### Apply conditionally
Apply styles based on different states using [selectors](/guide/state-selectors) and [conditional queries](/guide/conditional-queries).
```html
<div class="max-h:none max-h:none@print max-h:3xs@sm">...</div>
```

Pair max height with an overflow rule when content can exceed the cap.

---

# max-size

Source: https://rc.css.master.co/en/reference/max-size

Summary: Style shorthand for setting the max-width and max-height of an element.

## Overview

## Examples
### Cap width and height together
Use `max:*` when both `max-width` and `max-height` should use the same value.
```html
<!-- @MARK max:24x -->
<img class="max:24x object-contain" src="..." alt="" />
```
### Keep square media bounded
Use `max:*` with `size:*` or `full` when media should fill available space but stay within a maximum box.
```html
<!-- @MARK full --><!-- @MARK max:40x -->
<img class="full max:40x object-cover" src="..." alt="" />
```

### Cap one logical axis
Use `max-size-x:*` for `max-inline-size` and `max-size-y:*` for `max-block-size`.
```html
<!-- @MARK max-size-x:7xl --><!-- @MARK max-size-y:80dvh -->
<main class="max-size-x:7xl max-size-y:80dvh">...</main>
```

### Use one-axis caps for layout
Most page layout constraints only need one axis. Use [max-width](/reference/max-width) for wrappers and [max-height](/reference/max-height) for scroll regions.
```html
<!-- @MARK w:full --><!-- @MARK max-w:5xl -->
<main class="w:full max-w:5xl">...</main>
```

### Apply conditionally
Apply styles based on different states using [selectors](/guide/state-selectors) and [conditional queries](/guide/conditional-queries).
```html
<div class="max:16x max:100%@print max:24x@sm">...</div>
```

Use `max:*` for paired limits; use one-axis max utilities when the element is intentionally rectangular.

---

# max-width

Source: https://rc.css.master.co/en/reference/max-width

Summary: Setting the maximum width of an element.

## Overview

## Examples
### Cap a fluid element
Use `max-w:*` to let an element shrink with its container while preventing it from growing too wide.
```html
<!-- @MARK w:full --><!-- @MARK max-w:5xl --><!-- @MARK mx:auto -->
<main class="w:full max-w:5xl mx:auto">
  ...
</main>
```
### Set a readable measure
Use text-relative units when the maximum width is based on reading comfort instead of the container scale.
```html
<!-- @MARK max-w:72ch -->
<article class="w:full max-w:72ch">
  ...
</article>
```

### Keep media responsive
Use `max-w:full` to prevent replaced elements such as images or videos from overflowing their parent.
```html
<!-- @MARK max-w:full --><!-- @MARK h:auto -->
<img class="h:auto max-w:full" src="..." alt="" />
```

### Use viewport and container caps
Use `max-vw` when an element should never exceed the viewport width. Use `max-w:*` when the cap should follow the container theme token scale.
```html
<!-- @MARK max-vw --><!-- @MARK max-w:7xl@lg -->
<section class="max-vw max-w:7xl@lg">
  ...
</section>
```

### Apply conditionally
Apply styles based on different states using [selectors](/guide/state-selectors) and [conditional queries](/guide/conditional-queries).
```html
<div class="max-w:full max-w:72ch@print max-w:4xl@sm">...</div>
```

Pair `max-w:*` with `w:full` for wrappers that should be fluid until they hit the cap.

---

# min-height

Source: https://rc.css.master.co/en/reference/min-height

Summary: Setting the minimum height of an element.

## Overview

## Examples
### Set a baseline height
Use `min-h:*` when content may grow but the region still needs a minimum block size.
```html
<!-- @MARK min-h:48x -->
<section class="min-h:48x">
  ...
</section>
```
### Build viewport sections
Use native viewport units for full-screen or near full-screen layouts.
```html
<!-- @MARK min-h:100dvh -->
<main class="min-h:100dvh">
  ...
</main>
```

`100dvh` follows the dynamic viewport size on modern mobile browsers. Use `min-vh` when the legacy `100vh` value is the intended cap.

### Let content define the final size
Unlike `h:*`, a minimum height does not clip or force overflow by itself. It establishes a floor, then lets content expand the element.
```html
<!-- @MARK min-h:32x --><!-- @MARK overflow:visible -->
<article class="overflow:visible min-h:32x">
  ...
</article>
```

### Apply conditionally
Apply styles based on different states using [selectors](/guide/state-selectors) and [conditional queries](/guide/conditional-queries).
```html
<div class="min-h:32x min-h:0@print min-h:100dvh@sm">...</div>
```

Use [height](/reference/height) when the element should have an exact height.

---

# min-size

Source: https://rc.css.master.co/en/reference/min-size

Summary: Style shorthand for setting the min-width and min-height of an element.

## Overview

## Examples
### Set minimum width and height together
Use `min:*` when both `min-width` and `min-height` should share the same value.
```html
<!-- @MARK min:10x -->
<button class="min:10x">
  ...
</button>
```
### Preserve touch targets
Pair `min:*` with flexible padding when a control can grow with content but must never become too small.
```html
<!-- @MARK min:11x --><!-- @MARK px:md -->
<button class="min:11x px:md">
  Save
</button>
```

### Set one logical axis
Use `min-size-x:*` for `min-inline-size` and `min-size-y:*` for `min-block-size`.
```html
<!-- @MARK min-size-x:md --><!-- @MARK min-size-y:12x -->
<section class="min-size-x:md min-size-y:12x">...</section>
```

### Use percentages with care
Percentages resolve from the parent size on both axes. They are useful inside definite-size containers, but less predictable when the parent height is automatic.
```html
<!-- @MARK min:50% -->
<div class="min:50%">...</div>
```

### Apply conditionally
Apply styles based on different states using [selectors](/guide/state-selectors) and [conditional queries](/guide/conditional-queries).
```html
<div class="min:8x min:0@print min:10x@sm">...</div>
```

Use [min-width](/reference/min-width) or [min-height](/reference/min-height) when only one axis needs a lower bound.

---

# min-width

Source: https://rc.css.master.co/en/reference/min-width

Summary: Setting the minimum width of an element.

## Overview

## Examples
### Preserve a minimum inline size
Use `min-w:*` to keep an element from shrinking below a usable width. It is useful for buttons, sidebars, table columns, and controls with fixed affordances.
```html
<!-- @MARK min-w:32x -->
<button class="min-w:32x px:md">
  Continue
</button>
```
### Allow flexible children to shrink
In flex and grid layouts, `min-w:0` is often the fix for text or media that refuses to shrink inside a constrained container.
```html
<!-- @MARK flex --><!-- @MARK min-w:0 --><!-- @MARK overflow:hidden -->
<article class="flex gap:md">
  <img class="flex:0 size:12x" alt="" />
  <div class="overflow:hidden min-w:0">
    Long content can truncate instead of widening the row.
  </div>
</article>
```

### Combine with width and max-width
Use `min-w:*` as a lower bound, then let `w:*` or `max-w:*` describe the preferred or upper size.
```html
<!-- @MARK w:50% --><!-- @MARK min-w:40x --><!-- @MARK max-w:4xl -->
<aside class="w:50% min-w:40x max-w:4xl">
  ...
</aside>
```

### Use intrinsic keywords
Use `min-w:fit`, `min-w:min`, or `min-w:max` when content sizing should drive the lower bound.
```html
<!-- @MARK min-w:max -->
<nav class="min-w:max">
  ...
</nav>
```

### Apply conditionally
Apply styles based on different states using [selectors](/guide/state-selectors) and [conditional queries](/guide/conditional-queries).
```html
<div class="min-w:0 min-w:fit:hover min-w:0@print min-w:32x@sm">...</div>
```

Use [max-width](/reference/max-width) for upper bounds and [width](/reference/width) for the preferred size.

---

# mix-blend-mode

Source: https://rc.css.master.co/en/reference/mix-blend-mode

Summary: Setting how an element's content should blend with its parent background.

## Overview

## Examples
### Blend an element with its backdrop
Use `mix-blend-mode:*` to set how the entire element blends with content behind it.
```html
<!-- @MARK mix-blend-mode:multiply -->
<div class="mix-blend-mode:multiply">
  ...
</div>
```
### Restore normal blending
Use `mix-blend-mode:normal` to remove a blend mode.
```html
<!-- @MARK mix-blend-mode:normal -->
<div class="mix-blend-mode:normal">...</div>
```

For blending background layers inside the same element, use [background-blend-mode](/reference/background-blend-mode).

### Apply conditionally
Apply styles based on different states using [selectors](/guide/state-selectors) and [conditional queries](/guide/conditional-queries).
```html
<div class="mix-blend-mode:normal mix-blend-mode:normal@print mix-blend-mode:multiply@sm">...</div>
```

Blend modes can change contrast unpredictably as the backdrop changes.

---

# object-fit

Source: https://rc.css.master.co/en/reference/object-fit

Summary: Setting how the content should be resized to fit its container.

## Overview

## Examples
### Cover a fixed frame
Use `object-cover` when media should fill its frame while preserving its aspect ratio.
```html
<!-- @MARK object-cover -->
<img class="w:full aspect-ratio:16/9 object-cover" src="/images/cover.jpg" alt="Cover">
```
### Contain the full media
Use `object-contain` when the full image or video must remain visible inside the frame.
```html
<!-- @MARK object-contain -->
<img class="w:full aspect-ratio:1/1 object-contain" src="/images/logo.png" alt="Logo">
```

### Disable object fitting
Use `object-fit:none` when the media should render at its intrinsic size within the content box.
```html
<!-- @MARK object-fit:none -->
<img class="object-fit:none" src="/images/icon.png" alt="Icon">
```

### Apply conditionally
Apply styles based on different states using [selectors](/guide/state-selectors) and [conditional queries](/guide/conditional-queries).
```html
<img class="object-cover:hover object-fit:none@print object-contain@sm" src="/images/photo.jpg" alt="">
```

---

# object-position

Source: https://rc.css.master.co/en/reference/object-position

Summary: Setting the alignment of the selected replaced element within the element's box.

## Overview

## Examples
### Center cropped media
Use `object-center` to keep the center of an image visible when `object-cover` crops the edges.
```html
<!-- @MARK object-center -->
<img class="aspect-ratio:16/9 object-center object-cover" src="/images/photo.jpg" alt="Photo">
```
### Pin the top of an image
Use `object-top` for portraits or screenshots where the important content is near the top.
```html
<!-- @MARK object-top -->
<img class="aspect-ratio:4/3 object-cover object-top" src="/images/portrait.jpg" alt="Portrait">
```

### Use precise positions
Use `object-position:*|*` when the focal point needs a custom x and y position.
```html
<!-- @MARK object-position:50%|25% -->
<img class="object-cover object-position:50%|25%" src="/images/scene.jpg" alt="Scene">
```

### Apply conditionally
Apply styles based on different states using [selectors](/guide/state-selectors) and [conditional queries](/guide/conditional-queries).
```html
<img class="object-center:hover object-position:50%|50%@print object-top@sm" src="/images/photo.jpg" alt="">
```

---

# opacity

Source: https://rc.css.master.co/en/reference/opacity

Summary: Setting the opacity of an element.

## Overview

## Examples
### Fade an entire element
Use `opacity:*` to change the opacity of the whole element, including its text, background, border, and children.
```html
<!-- @MARK opacity:.5 -->
<button class="opacity:.5">
  Disabled
</button>
```
### Prefer color alpha for surfaces
When only a color should be translucent, use the color alpha suffix instead of reducing the whole element opacity.
```html
<!-- @MARK bg:blue-60/.12 --><!-- @MARK fg:blue-60 -->
<span class="bg:blue-60/.12 fg:blue-60">Status</span>
```

This keeps text and child content fully opaque.

### Apply conditionally
Apply styles based on different states using [selectors](/guide/state-selectors) and [conditional queries](/guide/conditional-queries).
```html
<div class="opacity:1 opacity:.72:hover opacity:1@print">...</div>
```

Use opacity transitions with care for content that must remain readable.

---

# order

Source: https://rc.css.master.co/en/reference/order

Summary: Changing the order of item in flex or grid container.

## Overview

## Examples
### Change visual order
Use `order:*` to change the visual order of flex or grid items.
```html
<!-- @MARK order:1 --><!-- @MARK order:2 -->
<div class="flex">
  <aside class="order:2">Sidebar</aside>
  <main class="order:1">Content</main>
</div>
```
### Keep source order meaningful
Use order utilities for responsive layout adjustments, not as a replacement for semantic markup.
```html
<!-- @MARK order:2 --><!-- @MARK order:0@sm -->
<aside class="order:2 order:0@sm">...</aside>
```

(i) `order` changes visual layout only. Screen readers and keyboard navigation still follow source order in many workflows.

### Apply conditionally
Apply styles based on different states using [selectors](/guide/state-selectors) and [conditional queries](/guide/conditional-queries).
```html
<div class="order:2 order:0@print order:0@sm">...</div>
```

Prefer source order whenever it can satisfy the layout.

---

# outline

Source: https://rc.css.master.co/en/reference/outline

Summary: Setting all the outline properties at once.

## Overview

## Examples
### Set the full outline shorthand
Use `outline:*` when width, style, and color should be set together.
```html
<!-- @MARK outline:2px|solid|blue-60 -->
<button class="outline:2px|solid|blue-60">
  Focused action
</button>
```
### Keep outlines for focus
Outlines do not affect layout and are important for keyboard focus. If you customize them, keep a visible focus style.
```html
<!-- @MARK outline:2px|solid|blue-60 --><!-- @MARK outline-offset:2x -->
<button class="outline:2px|solid|blue-60 outline-offset:xs:focus">
  Save
</button>
```

Use [outline-width](/reference/outline-width), [outline-style](/reference/outline-style), [outline-color](/reference/outline-color), and [outline-offset](/reference/outline-offset) for focused changes.

### Apply conditionally
Apply styles based on different states using [selectors](/guide/state-selectors) and [conditional queries](/guide/conditional-queries).
```html
<div class="outline:0 outline:2px|solid|blue-60:focus outline:0@print">...</div>
```

Avoid removing focus outlines unless another visible focus indicator replaces them.

---

# outline-color

Source: https://rc.css.master.co/en/reference/outline-color

Summary: Setting the color of an element’s outline.

## Overview

## Examples
### Set outline color
Use `outline:*` with a color value to set the outline color.
```html
<!-- @MARK outline:blue-60 -->
<button class="outline:solid outline:2px outline:blue-60">
  ...
</button>
```
### Inherit the text color
Use `outline:current` when the outline should follow `currentColor`.
```html
<!-- @MARK outline:current -->
<button class="outline:current fg:blue-60">...</button>
```

Use `outline:transparent` only when a transparent outline is needed to reserve contrast-mode behavior or avoid layout-free jumps between states.

### Apply conditionally
Apply styles based on different states using [selectors](/guide/state-selectors) and [conditional queries](/guide/conditional-queries).
```html
<div class="outline:transparent outline:blue-60:focus outline:current@print">...</div>
```

The outline also needs a visible width and style.

---

# outline-offset

Source: https://rc.css.master.co/en/reference/outline-offset

Summary: Setting the spacing between an outline and the border of an element.

## Overview

## Examples
### Move an outline away from the element
Use `outline-offset:*` to create space between an outline and the element edge.
```html
<!-- @MARK outline:2px|solid|blue-60 --><!-- @MARK outline-offset:2x -->
<button class="outline:2px|solid|blue-60 outline-offset:2x">
  Save
</button>
```
### Pull an outline inward
Negative values can pull the outline inside the element edge.
```html
<!-- @MARK outline-offset:-1px -->
<button class="outline-offset:-1px">...</button>
```

Use inward offsets carefully so the focus indicator remains visible.

### Apply conditionally
Apply styles based on different states using [selectors](/guide/state-selectors) and [conditional queries](/guide/conditional-queries).
```html
<div class="outline-offset:0 outline-offset:2x:focus outline-offset:0@print">...</div>
```

Offset changes only matter when an outline is visible.

---

# outline-style

Source: https://rc.css.master.co/en/reference/outline-style

Summary: Setting the style of an element's outline.

## Overview

## Examples
### Set outline style
Use `outline:*` with a style keyword to set `outline-style`.
```html
<!-- @MARK outline:solid -->
<button class="outline:solid outline:2px">
  ...
</button>
```
### Use dashed focus indicators
Use `outline:dashed` or `outline:dotted` when that style is part of the interaction design.
```html
<!-- @MARK outline:dashed -->
<a class="outline:dashed:focus">Skip to content</a>
```

Avoid `outline:none` unless another visible focus indicator is present.

### Apply conditionally
Apply styles based on different states using [selectors](/guide/state-selectors) and [conditional queries](/guide/conditional-queries).
```html
<div class="outline:none outline:solid:focus outline:none@print">...</div>
```

Use [outline](/reference/outline) to set width, style, and color together.

---

# outline-width

Source: https://rc.css.master.co/en/reference/outline-width

Summary: Setting the thickness of an element's outline.

## Overview

## Examples
### Set outline width
Use `outline:*` with a size to set `outline-width`.
```html
<!-- @MARK outline:2px -->
<button class="outline:solid outline:2px">
  ...
</button>
```
### Use keyword widths
Use `outline:thin`, `outline:medium`, or `outline:thick` for native keyword widths.
```html
<!-- @MARK outline:thick|solid -->
<button class="outline:thick|solid">...</button>
```

The outline also needs a style to be visible.

### Apply conditionally
Apply styles based on different states using [selectors](/guide/state-selectors) and [conditional queries](/guide/conditional-queries).
```html
<div class="outline:0 outline:2px:focus outline:0@print">...</div>
```

Use [outline-offset](/reference/outline-offset) to move the outline away from the element edge.

---

# overflow

Source: https://rc.css.master.co/en/reference/overflow

Summary: Controlling the desired behavior for an element's overflow.

## Overview

## Examples
### Hide overflowing content
Use `overflow:hidden` when content should be clipped to the element box.
```html
<!-- @MARK overflow:hidden --><!-- @MARK r:md -->
<div class="overflow:hidden r:md">
  ...
</div>
```
### Create a scroll container
Use `overflow:auto` when scrollbars should appear only if content overflows. Use axis-specific utilities when only one direction should scroll.
```html
<!-- @MARK max-h:64x --><!-- @MARK overflow-y:auto -->
<div class="overflow-y:auto max-h:3xs">
  ...
</div>

<!-- @MARK overflow-x:auto -->
<div class="overflow-x:auto">
  <table>...</table>
</div>
```

### Clip without scrolling
Use `overflow:clip` when content should be clipped without creating a scroll container.
```html
<!-- @MARK overflow:clip -->
<figure class="overflow:clip">
  ...
</figure>
```

Use `overflow:hidden` when you still need scroll-container behavior, clipping for border radius, or compatibility with patterns that depend on hidden overflow.

### Truncate a single line
Overflow is often paired with `white-space:nowrap` and `text-overflow:ellipsis` for one-line truncation.
```html
<!-- @MARK min-w:0 --><!-- @MARK overflow:hidden --><!-- @MARK white-space:nowrap --><!-- @MARK text-overflow:ellipsis -->
<span class="overflow:hidden min-w:0 text-ellipsis white-space:nowrap">
  A very long file name that should not widen the toolbar
</span>
```

### Apply conditionally
Apply styles based on different states using [selectors](/guide/state-selectors) and [conditional queries](/guide/conditional-queries).
```html
<div class="overflow:hidden overflow:visible@print overflow:auto@sm">...</div>
```

Use [overscroll-behavior](/reference/overscroll-behavior) when the problem is scroll chaining rather than clipping.

---

# overflow-wrap

Source: https://rc.css.master.co/en/reference/overflow-wrap

Summary: Controlling how words should break when they overflow their element

## Overview

## Examples
### Break long unbroken content
Use `wrap-break-word` when long URLs, hashes, or generated identifiers should wrap only when needed to avoid overflow.
```html
<!-- @MARK wrap-break-word -->
<p class="wrap-break-word">
  https://example.com/releases/2026/very-long-generated-path
</p>
```
### Allow breaks anywhere
Use `wrap-anywhere` for very narrow UI where even emergency wrapping should consider every character boundary.
```html
<!-- @MARK wrap-anywhere -->
<code class="wrap-anywhere">
  7e9a41f817c928c6d9a4b6501f1e2bd6
</code>
```

### Restore normal wrapping
Use `wrap-normal` to undo an aggressive wrapping rule at a larger breakpoint or in print.
```html
<!-- @MARK wrap-anywhere --><!-- @MARK wrap-normal@md -->
<p class="wrap-anywhere wrap-normal@md">
  ...
</p>
```

Compared with [word-break](/reference/word-break), overflow wrapping is usually a gentler way to protect layouts from unbroken content.

### Apply conditionally
Apply styles based on different states using [selectors](/guide/state-selectors) and [conditional queries](/guide/conditional-queries).
```html
<div class="wrap-break-word wrap-normal@print wrap-anywhere@sm">...</div>
```

Use [overflow](/reference/overflow) and [text-overflow](/reference/text-overflow) when content should be clipped instead of wrapped.

---

# overscroll-behavior

Source: https://rc.css.master.co/en/reference/overscroll-behavior

Summary: Setting what a browser does when reaching the boundary of a scrolling area.

## Overview

## Examples
### Contain nested scrolling
Use `overscroll-behavior:contain` on a scroll area when reaching its edge should not chain scrolling to the page behind it.
```html
<!-- @MARK overscroll-behavior:contain -->
<div class="overflow:auto overscroll-behavior:contain">
  Modal content
</div>
```
### Block page bounce on one axis
Use axis-specific utilities when only vertical or horizontal scroll chaining should be controlled.
```html
<!-- @MARK overscroll-behavior-y:none -->
<div class="overflow-y:auto overscroll-behavior-y:none">
  Sheet
</div>
```

### Keep horizontal gestures local
Horizontal carousels often need `overscroll-behavior-x:contain` so a sideways gesture stays inside the carousel.
```html
<!-- @MARK overscroll-behavior-x:contain -->
<div class="overflow-x:auto overscroll-behavior-x:contain">
  Carousel
</div>
```

### Apply conditionally
Apply styles based on different states using [selectors](/guide/state-selectors) and [conditional queries](/guide/conditional-queries).
```html
<div class="overscroll-behavior:contain overscroll-behavior:auto@print overscroll-behavior:auto@sm">...</div>
```

---

# padding

Source: https://rc.css.master.co/en/reference/padding

Summary: Setting the padding area on all four sides of an element.

## Overview

## Examples
### Add padding on every side
Use `p:*` to create space inside an element on all four sides. Padding is part of the element box, so backgrounds and borders include the padded area.
```html
<!-- @MARK p:md -->
<section class="p:md b:1px|solid|gray-20 bg:white">
  Content with breathing room.
</section>
```
### Set one side
Use `pt:*`, `pr:*`, `pb:*`, and `pl:*` when only one physical side needs spacing.
```html
<!-- @MARK pt:lg --><!-- @MARK pr:md --><!-- @MARK pb:xl --><!-- @MARK pl:md -->
<article class="px:md pb:xl pt:lg">
  ...
</article>
```

Physical sides are useful for fixed component anatomy. For bidirectional layouts, check whether the design needs logical CSS properties before relying on left and right.

### Set horizontal or vertical padding
Use `px:*` for inline padding and `py:*` for block padding. This is the common pattern for buttons, cards, fields, and page gutters.
```html
<!-- @MARK px:md --><!-- @MARK py:sm -->
<button class="px:md py:sm r:md">
  Save changes
</button>
```

Use `p:0` to remove inherited or component-level padding at a breakpoint or state.
```html
<!-- @MARK p:0@sm -->
<section class="p:md p:0@sm">
  ...
</section>
```

### Apply conditionally
Apply styles based on different states using [selectors](/guide/state-selectors) and [conditional queries](/guide/conditional-queries).
```html
<div class="p:sm:hover p:lg@dark p:0@print p:md@sm">...</div>
```

Use spacing tokens for repeated component rhythm. Use raw values only when the padding is a measured local detail.

---

# place-content

Source: https://rc.css.master.co/en/reference/place-content

Summary: Setting align-content and justify-content at the same time.

## Overview

## Examples
### Align grid or wrapped flex content on both axes
Use `place-content:*` as shorthand for `align-content` and `justify-content`.
```html
<!-- @MARK grid --><!-- @MARK place-content:center -->
<div class="grid place-content:center h:3xs">
  ...
</div>
```
### Use separate axis values
Pass two values when block and inline distribution should differ.
```html
<!-- @MARK place-content:start|space-between -->
<section class="grid place-content:start|space-between">
  ...
</section>
```

Use [place-items](/reference/place-items) for item alignment inside grid areas, not distribution of the tracks as a group.

### Apply conditionally
Apply styles based on different states using [selectors](/guide/state-selectors) and [conditional queries](/guide/conditional-queries).
```html
<div class="place-content:start place-content:start@print place-content:center@sm">...</div>
```

`place-content` is visible only when the container has extra space to distribute.

---

# place-items

Source: https://rc.css.master.co/en/reference/place-items

Summary: Setting align-items and justify-items at the same time.

## Overview

## Examples
### Align grid items on both axes
Use `place-items:*` as shorthand for `align-items` and `justify-items`.
```html
<!-- @MARK grid --><!-- @MARK place-items:center -->
<div class="grid place-items:center h:48x">
  <button>Centered</button>
</div>
```
### Stretch items
Use `place-items:stretch` when children should fill their grid areas in both axes.
```html
<!-- @MARK place-items:stretch -->
<section class="grid place-items:stretch">...</section>
```

Use [place-self](/reference/place-self) when only one item needs a different two-axis alignment.

### Apply conditionally
Apply styles based on different states using [selectors](/guide/state-selectors) and [conditional queries](/guide/conditional-queries).
```html
<div class="place-items:stretch place-items:stretch@print place-items:center@sm">...</div>
```

For flexbox, `place-items` has limited use; prefer [align-items](/reference/align-items) and [justify-content](/reference/justify-content).

---

# place-self

Source: https://rc.css.master.co/en/reference/place-self

Summary: Setting align-self and justify-self at the same time.

## Overview

## Examples
### Align one item on both axes
Use `place-self:*` as shorthand for `align-self` and `justify-self`.
```html
<!-- @MARK grid --><!-- @MARK place-self:end -->
<div class="grid h:48x">
  <button class="place-self:end">Save</button>
</div>
```
### Center one item
Use `place-self:center` when one grid item should sit in the middle of its grid area.
```html
<!-- @MARK place-self:center -->
<div class="place-self:center">...</div>
```

Use [place-items](/reference/place-items) when every child should share the same two-axis alignment.

### Apply conditionally
Apply styles based on different states using [selectors](/guide/state-selectors) and [conditional queries](/guide/conditional-queries).
```html
<div class="place-self:auto place-self:auto@print place-self:center@sm">...</div>
```

The effect depends on the parent layout mode and available space in the item area.

---

# pointer-events

Source: https://rc.css.master.co/en/reference/pointer-events

Summary: Setting whether an element reacts to pointer events.

## Overview

## Examples
### Let clicks pass through an overlay
Use `pointer-events:none` when an overlay is visual only and should not block the control beneath it.
```html
<!-- @MARK pointer-events:none -->
<div class="rel">
  <button>Open</button>
  <span class="abs inset:0 pointer-events:none"></span>
</div>
```
### Use the untouchable alias
`untouchable` is an alias for `pointer-events:none` and is useful for decorative icons and images.
```html
<!-- @MARK untouchable -->
<svg class="untouchable" aria-hidden="true">...</svg>
```

### Restore pointer events on a child
Combine a non-interactive parent with `pointer-events:auto` on a child that should still receive clicks.
```html
<!-- @MARK pointer-events:auto -->
<div class="pointer-events:none">
  <button class="pointer-events:auto">Dismiss</button>
</div>
```

### Apply conditionally
Apply styles based on different states using [selectors](/guide/state-selectors) and [conditional queries](/guide/conditional-queries).
```html
<div class="pointer-events:none:hover pointer-events:auto@print pointer-events:auto@sm">...</div>
```

---

# position

Source: https://rc.css.master.co/en/reference/position

Summary: Setting an element is positioned in a document.

## Overview

## Examples
### Positioning elements as static
Use `static` to position an element according to the normal document flow. HTML elements are static by default.

    <div>static parent</div>

```html
<!-- @MARK static -->
<div class="static p:5x">
  <div>static parent</div>
  <div class="abs bottom:10px left:10px">abs child</div>
</div>
```

### Positioning elements as relative
Use `rel` to keep an element in the normal document flow while offsetting it relative to itself with top, right, bottom, and left values.

      <div>relative parent</div>

```html
<!-- @MARK rel -->
<div class="rel left:20px top:30px p:5x">
  <div>relative parent</div>
</div>
```

### Positioning elements as absolute
Use `abs` to remove an element from the normal document flow and position it relative to its closest positioned ancestor.

    <div>relative parent</div>

```html
<!-- @MARK rel -->
<div class="rel p:2xl">
  <div>relative parent</div>
  <!-- @MARK abs -->
  <div class="abs left:0 top:0">abs child</div>
</div>
```

### Positioning elements as fixed
Use `fixed` to remove an element from the normal document flow and position it relative to the viewport.

      {users.map((user, index) =>

      )}

```html
<div>
  <!-- @MARK fixed -->
  <input type="search" class="fixed">
  <ul>
    <li>
      <div class="rel">
        <img src="...">
      </div>
      <div>
        <div class="flex">
          <div>Aron</div>
          <div>3:03 a.m</div>
        </div>
        <p>Front-end needs a revolution</p>
      </div>
    </li>
    ...
  </ul>
</div>
```

### Positioning elements as sticky
Use `sticky` to position an element based on scroll position. It behaves like a relatively positioned element until a given offset is reached, then sticks to that offset.

      {users.map((user, index) =>

      )}

```html
<ul class="overflow:auto">
  ...
  <!-- @MARK sticky -->
  <li class="sticky top:0">
    <img src="...">
    <div>Joy</div>
    ...
  </li>
  ...
</ul>
```

### Apply conditionally
Apply styles based on different states using [selectors](/guide/state-selectors) and [conditional queries](/guide/conditional-queries).
```html
<div class="rel:hover rel@dark rel@print rel@sm">...</div>
```

---

# resize

Source: https://rc.css.master.co/en/reference/resize

Summary: Setting whether an element is resizable.

## Overview

## Examples
### Allow both-axis resizing
Use `resize:both` on elements that should be manually resizable in both directions, such as textareas or debug panels.
```html
<!-- @MARK resize:both -->
<textarea class="min-h:12x min-w:20x resize:both">
  Notes
</textarea>
```
### Restrict resizing to one axis
Use `resize:vertical` for text inputs that can grow without breaking the surrounding layout.
```html
<!-- @MARK resize:vertical -->
<textarea class="w:full min-h:10x resize:vertical">
  Comment
</textarea>
```

### Disable native resizing
Use `resize:none` when the component already controls its own size or when the surrounding layout cannot absorb manual resizing.
```html
<!-- @MARK resize:none -->
<textarea class="resize:none">
  Fixed size
</textarea>
```

### Apply conditionally
Apply styles based on different states using [selectors](/guide/state-selectors) and [conditional queries](/guide/conditional-queries).
```html
<textarea class="resize:none resize:none@print resize:vertical@sm">...</textarea>
```

---

# screen-readers

Source: https://rc.css.master.co/en/reference/screen-readers

Summary: Style utility for imporving the accessibility with screen readers.

## Overview

## Examples
### Hide text visually
Use `sr-only` to keep text available to assistive technologies while removing it from the visual layout.
```html
<!-- @MARK sr-only -->
<button>
  <span class="sr-only">Open navigation</span>
  <svg aria-hidden="true">...</svg>
</button>
```
### Label icon-only controls
Icon-only buttons need a text alternative. `sr-only` lets the visual control stay compact without dropping the accessible name.
```html
<button class="inline-grid place-content:center">
  <span class="sr-only">Delete item</span>
  <svg aria-hidden="true">...</svg>
</button>
```

### Avoid hiding interactive content
Use `sr-only` for labels and descriptions, not for focusable controls that users need to reach visually.
```html
<p id="status-help" class="sr-only">Changes are saved automatically.</p>
<input aria-describedby="status-help">
```

### Apply conditionally
Apply styles based on different states using [selectors](/guide/state-selectors) and [conditional queries](/guide/conditional-queries).
```html
<span class="sr-only sr-only@print sr-only@sm">...</span>
```

---

# scroll-behavior

Source: https://rc.css.master.co/en/reference/scroll-behavior

Summary: Setting the scrolling behavior for a scrolling box.

## Overview

## Examples
### Enable smooth anchor scrolling
Use `scroll-behavior:smooth` on the scrolling container or root element when anchor navigation should animate.
```html
<!-- @MARK scroll-behavior:smooth -->
<main class="scroll-behavior:smooth">
  ...
</main>
```
### Keep static output immediate
Use `scroll-behavior:auto` when a context should jump directly, such as print or automated layout measurement.
```html
<!-- @MARK scroll-behavior:auto -->
<main class="scroll-behavior:smooth scroll-behavior:auto@print">
  ...
</main>
```

### Combine with scroll offsets
Smooth scrolling pairs well with `scroll-mt:*` on the destination element or `scroll-pt:*` on the container.
```html
<main class="scroll-pt:3xl scroll-behavior:smooth">
  <section id="details" class="scroll-mt:3xl">Details</section>
</main>
```

### Apply conditionally
Apply styles based on different states using [selectors](/guide/state-selectors) and [conditional queries](/guide/conditional-queries).
```html
<main class="scroll-behavior:smooth scroll-behavior:auto@print">...</main>
```

---

# scroll-margin

Source: https://rc.css.master.co/en/reference/scroll-margin

Summary: Setting the scroll margin of an element.

## Overview

## Examples
### Offset anchor targets
Use `scroll-mt:*` on the target element so anchor navigation leaves room for fixed headers.
```html
<!-- @MARK scroll-mt:16x -->
<section id="pricing" class="scroll-mt:3xl">
  Pricing
</section>
```
### Add horizontal snap margin
Use `scroll-mx:*` on snap items when the item should stop with space on both sides.
```html
<!-- @MARK scroll-mx:4x -->
<article class="scroll-mx:md snap-start">
  Slide
</article>
```

### Use all-side margin for compact cases
Use `scroll-m:*` when the same offset should apply on every side of the target.
```html
<!-- @MARK scroll-m:0.625rem -->
<h2 class="scroll-m:0.625rem">Overview</h2>
```

### Apply conditionally
Apply styles based on different states using [selectors](/guide/state-selectors) and [conditional queries](/guide/conditional-queries).
```html
<section class="scroll-mt:3xl scroll-m:0@print scroll-mt:xl@sm">...</section>
```

---

# scroll-padding

Source: https://rc.css.master.co/en/reference/scroll-padding

Summary: Setting the scroll padding of an element.

## Overview

## Examples
### Pad the scroll container
Use `scroll-p:*` on the scroll container to keep snapped or anchored content away from the container edges.
```html
<!-- @MARK scroll-p:0.625rem -->
<div class="overflow:auto scroll-p:0.625rem">
  ...
</div>
```
### Reserve space for fixed headers
Use `scroll-pt:*` when vertical scrolling should stop below a sticky or fixed header.
```html
<!-- @MARK scroll-pt:16x -->
<main class="overflow:auto scroll-pt:3xl">
  ...
</main>
```

### Pad horizontal snapping
Use `scroll-px:*` on horizontal carousels so the first and last item can snap with visual breathing room.
```html
<!-- @MARK scroll-px:4x -->
<div class="overflow-x:auto scroll-px:md snap-x">
  ...
</div>
```

### Apply conditionally
Apply styles based on different states using [selectors](/guide/state-selectors) and [conditional queries](/guide/conditional-queries).
```html
<div class="scroll-p:0.625rem scroll-p:0@print scroll-pt:3xl@sm">...</div>
```

---

# scroll-snap-align

Source: https://rc.css.master.co/en/reference/scroll-snap-align

Summary: Setting the scroll snap position.

## Overview

## Examples
### Align a snap item to the start
Use `snap-start` on child items inside a snapping scroll container.
```html
<!-- @MARK snap-start -->
<article class="snap-start">
  Slide
</article>
```
### Center snap items
Use `snap-center` when cards should settle in the middle of the scroll viewport.
```html
<!-- @MARK snap-center -->
<article class="snap-center">
  Featured card
</article>
```

### Disable item snapping
Use `scroll-snap-align:none` for an item inside a snapping container that should not become a stop.
```html
<!-- @MARK scroll-snap-align:none -->
<article class="scroll-snap-align:none">
  Spacer
</article>
```

### Apply conditionally
Apply styles based on different states using [selectors](/guide/state-selectors) and [conditional queries](/guide/conditional-queries).
```html
<article class="snap-start scroll-snap-align:none@print snap-center@sm">...</article>
```

---

# scroll-snap-stop

Source: https://rc.css.master.co/en/reference/scroll-snap-stop

Summary: Setting whether scroll container is pass over snap positions.

## Overview

## Examples
### Force a snap stop
Use `snap-always` on an important snap item when fast scrolling should not skip over it.
```html
<!-- @MARK snap-always -->
<section class="snap-always snap-start">
  Required step
</section>
```
### Keep normal scroll momentum
Use `snap-normal` for ordinary items where the browser can skip a snap point during fast scrolling.
```html
<!-- @MARK snap-normal -->
<section class="snap-normal snap-start">
  Optional step
</section>
```

### Use sparingly
Reserve `always` for onboarding steps, paged experiences, or essential panels. Too many forced stops can make scroll feel heavy.
```html
<section class="snap-always snap-start">
  Confirm details
</section>
```

### Apply conditionally
Apply styles based on different states using [selectors](/guide/state-selectors) and [conditional queries](/guide/conditional-queries).
```html
<section class="snap-normal snap-normal@print snap-always@sm">...</section>
```

---

# scroll-snap-type

Source: https://rc.css.master.co/en/reference/scroll-snap-type

Summary: Setting how strictly snap points are enforced on the scroll container.

## Overview

## Examples
### Snap on the horizontal axis
Use `snap-x` on a horizontal scroll container. Add snap alignment to the children.
```html
<!-- @MARK snap-x -->
<div class="overflow-x:auto snap-x">
  <article class="snap-start">One</article>
</div>
```
### Require a snap point
Use `scroll-snap-type:*|mandatory` when the container must settle on a snap point after scrolling.
```html
<!-- @MARK scroll-snap-type:y|mandatory -->
<div class="overflow-y:auto scroll-snap-type:y|mandatory">
  <section class="snap-start">Step</section>
</div>
```

### Allow nearby snap points
Use `proximity` when snapping should help alignment without taking over every scroll gesture.
```html
<!-- @MARK scroll-snap-type:x|proximity -->
<div class="overflow-x:auto scroll-snap-type:x|proximity">
  ...
</div>
```

### Apply conditionally
Apply styles based on different states using [selectors](/guide/state-selectors) and [conditional queries](/guide/conditional-queries).
```html
<div class="snap-x scroll-snap-type:none@print scroll-snap-type:y|mandatory@sm">...</div>
```

---

# shape-image-threshold

Source: https://rc.css.master.co/en/reference/shape-image-threshold

Summary: Setting the alpha channel threshold for a CSS shape.

## Overview

## Examples
### Set the alpha threshold
Use `shape-image-threshold:*` with image-based shapes to decide which pixels participate in the shape.
```html
<!-- @MARK shape-image-threshold:.5 -->
<img class="float:left shape-image-threshold:.5 shape-outside:url(/mask.png)" src="/images/photo.jpg" alt="Photo">
```
### Use lower thresholds for soft masks
Lower thresholds include more semi-transparent pixels in the text wrap shape.
```html
<!-- @MARK shape-image-threshold:.2 -->
<img class="shape-image-threshold:.2" src="/images/photo.jpg" alt="">
```

### Use with image shapes
This property only matters for shapes that use an image source, such as `shape-outside:url(*)` or gradient-based shapes.
```html
<img class="float:left shape-image-threshold:.5 shape-outside:url(/mask.png)" src="/images/photo.jpg" alt="">
```

### Apply conditionally
Apply styles based on different states using [selectors](/guide/state-selectors) and [conditional queries](/guide/conditional-queries).
```html
<img class="shape-image-threshold:.5:hover shape-image-threshold:0@print shape-image-threshold:.2@sm" src="/images/photo.jpg" alt="">
```

---

# shape-margin

Source: https://rc.css.master.co/en/reference/shape-margin

Summary: Setting a margin for a CSS shape.

## Overview

## Examples
### Add space around a shape
Use `shape-margin:*` with floated shapes so inline content does not sit directly on the shape boundary.
```html
<!-- @MARK shape-margin:1rem -->
<img class="float:left shape-margin:1rem shape-outside:circle(40px)" src="/images/avatar.jpg" alt="Avatar">
```
### Increase margin for large media
Use a larger shape margin when the floated media is visually heavy or the text column is narrow.
```html
<!-- @MARK shape-margin:2rem -->
<img class="float:left shape-margin:2rem shape-outside:circle(40px)" src="/images/photo.jpg" alt="Photo">
```

### Pair with shape outside
`shape-margin:*` only has an effect when the element participates in shape layout, usually with `float:*` and `shape-outside:*`.
```html
<img class="float:left shape-margin:1rem shape-outside:circle(40px)" src="/images/avatar.jpg" alt="">
```

### Apply conditionally
Apply styles based on different states using [selectors](/guide/state-selectors) and [conditional queries](/guide/conditional-queries).
```html
<img class="shape-margin:1rem:hover shape-margin:0@print shape-margin:2rem@sm" src="/images/avatar.jpg" alt="">
```

---

# shape-outside

Source: https://rc.css.master.co/en/reference/shape-outside

Summary: Setting a shape around which adjacent inline content should wrap.

## Overview

## Examples
### Wrap text around a circle
Use `shape-outside:circle(*)` on a floated element to let inline content wrap around a circular shape.
```html
<!-- @MARK shape-outside:circle(40px) -->
<img class="float:left shape-margin:md shape-outside:circle(40px)" src="/images/avatar.jpg" alt="Avatar">
```
### Use an inset shape
Use `shape-outside:inset(*)` when text should wrap around a rectangular inset.
```html
<!-- @MARK shape-outside:inset(0|20px) -->
<img class="float:left shape-outside:inset(0|20px)" src="/images/photo.jpg" alt="Photo">
```

### Remove shape wrapping
Use `shape-none` when a responsive or print context should use the normal float box.
```html
<!-- @MARK shape-none -->
<img class="float:left shape-outside:circle(40px) shape-none@print" src="/images/avatar.jpg" alt="Avatar">
```

### Apply conditionally
Apply styles based on different states using [selectors](/guide/state-selectors) and [conditional queries](/guide/conditional-queries).
```html
<img class="shape-outside:circle(40px):hover shape-none@print shape-outside:inset(0|20px)@sm" src="/images/avatar.jpg" alt="">
```

---

# size

Source: https://rc.css.master.co/en/reference/size

Summary: Style shorthand for setting the width and height of an element.

## Overview

## Examples
### Set width and height together
Use `size:*` when the same value should apply to both `width` and `height`. This keeps square UI pieces readable in markup.
```html
<!-- @MARK size:10x -->
<button class="grid place-content:center size:10x">
  ...
</button>
```
### Build square media and controls
`size:*` is a good fit for icons, avatars, swatches, checkboxes, handles, and fixed loading indicators.
```html
<!-- @MARK size:12x --><!-- @MARK round -->
<img class="size:12x round object-cover" src="..." alt="" />
```

### Set one logical axis
Use `size-x:*` for inline size and `size-y:*` for block size.
```html
<!-- @MARK size-x:md --><!-- @MARK size-y:20x -->
<aside class="size-x:md size-y:20x">...</aside>
```

Use [aspect-ratio](/reference/aspect-ratio) when the element should keep a non-square ratio while one axis remains fluid.
```html
<!-- @MARK w:full --><!-- @MARK aspect-ratio:16/9 -->
<video class="w:full aspect-ratio:16/9" controls></video>
```

### Use the `full` static utility
The `full` utility sets both axes to `100%`. Use `w:full` or `h:full` when only one axis should fill.
```html
<!-- @MARK full -->
<div class="full">...</div>

<!-- @MARK w:full -->
<div class="w:full">...</div>
```

### Use intrinsic static utilities
Use `fit` when both axes should follow `fit-content`, or `full` when both axes should fill the available space.
```html
<!-- @MARK fit -->
<div class="fit">
  Compact content
</div>
```

### Apply conditionally
Apply styles based on different states using [selectors](/guide/state-selectors) and [conditional queries](/guide/conditional-queries).
```html
<div class="size:8x full@dark size:6x@print size:10x@sm">...</div>
```

For physical one-axis sizing, use [width](/reference/width) and [height](/reference/height).

---

# stroke

Source: https://rc.css.master.co/en/reference/stroke

Summary: Setting the outline color of an SVG shape.

## Overview

## Examples
### Set SVG stroke color
Use `stroke:*` to set the stroke paint for SVG shapes.
```html
<!-- @MARK stroke:current -->
<svg class="stroke:current" viewBox="0 0 16 16" aria-hidden="true">
  <path d="M2 8h12" />
</svg>
```
### Use theme colors
Use color tokens when icon strokes should follow the interface palette.
```html
<!-- @MARK stroke:blue-60 -->
<svg class="stroke:blue-60" aria-hidden="true"></svg>
```

Use [stroke-width](/reference/stroke-width) for line thickness.

### Apply conditionally
Apply styles based on different states using [selectors](/guide/state-selectors) and [conditional queries](/guide/conditional-queries).
```html
<svg class="stroke:current stroke:blue-60:hover stroke:current@print">...</svg>
```

---

# stroke-width

Source: https://rc.css.master.co/en/reference/stroke-width

Summary: Setting the width of the stroke to be applied to the SVG shape.

## Overview

## Examples
### Set SVG stroke width
Use `stroke:*` with a size value to set `stroke-width`.
```html
<!-- @MARK stroke:2 -->
<svg class="stroke:2" viewBox="0 0 16 16" aria-hidden="true">
  <path d="M2 8h12" />
</svg>
```
### Pair width with stroke color
Use [stroke](/reference/stroke) for paint and `stroke:*` size values for thickness.
```html
<!-- @MARK stroke:current --><!-- @MARK stroke:1.5 -->
<svg class="stroke:current stroke:1.5" aria-hidden="true"></svg>
```

Very thick strokes may need adjusted SVG viewBox or line caps to avoid clipping.

### Apply conditionally
Apply styles based on different states using [selectors](/guide/state-selectors) and [conditional queries](/guide/conditional-queries).
```html
<svg class="stroke:1 stroke:1@print stroke:2@sm">...</svg>
```

---

# text-align

Source: https://rc.css.master.co/en/reference/text-align

Summary: Setting the text alignment of an element.

## Overview

## Examples
### Align contents to the left
Use `text-left` to align contents to the left.

### Align contents to the right
Use `text-right` to align contents to the right.

### Center contents
Use `text-center` to center contents.

```html
<!-- @MARK text-center -->
<p class="text-center">Centered text</p>
```
### Align contents to the left and right
Use `text-justify` to align contents to the left and right.

### Use logical alignment
Use `text-start` and `text-end` when alignment should follow the writing direction instead of always mapping to physical left or right.
```html
<!-- @MARK text-start --><!-- @MARK text-end -->
<p class="text-start">Start-aligned content</p>
<p class="text-end">End-aligned content</p>
```

Use physical `text-left` and `text-right` when the design explicitly requires those sides regardless of direction.

### Apply conditionally
Apply styles based on different states using [selectors](/guide/state-selectors) and [conditional queries](/guide/conditional-queries).
```html
<div class="text-start text-start@print text-center@sm text-end@lg">...</div>
```

---

# text-decoration

Source: https://rc.css.master.co/en/reference/text-decoration

Summary: Setting the appearance of decorative lines on text.

## Overview

## Examples
### Set a complete decoration
Use `text-decoration:*|*|*|*` when line, color, style, and thickness should be declared together.
```html
<!-- @MARK text-decoration:underline|blue-60|wavy|2px -->
<a class="text-decoration:underline|blue-60|wavy|2px">
  Decorated link
</a>
```
### Use line aliases
Use `underline`, `line-through`, or `overline` for common line-only decoration.
```html
<!-- @MARK underline -->
<a class="underline">Underlined link</a>
```

### Remove decoration
Use `text-decoration:none` when inherited link decoration should be removed deliberately.
```html
<!-- @MARK text-decoration:none -->
<a class="text-decoration:none">Plain link</a>
```

### Apply conditionally
Apply styles based on different states using [selectors](/guide/state-selectors) and [conditional queries](/guide/conditional-queries).
```html
<a class="underline:hover text-decoration:none@print text-decoration:none@sm">...</a>
```

---

# text-decoration-color

Source: https://rc.css.master.co/en/reference/text-decoration-color

Summary: Setting the color of decorative lines on text.

## Overview

## Examples
### Set decoration color
Use `text-decoration-color:*` when only the decoration color should change.
```html
<!-- @MARK text-decoration-color:blue-60 -->
<a class="underline text-decoration-color:blue-60">
  Colored underline
</a>
```
### Follow the current text color
Use `text-decoration:currentColor` when the decoration should track the foreground color.
```html
<!-- @MARK text-decoration:currentColor -->
<a class="underline text-decoration:currentColor fg:blue-60">
  Current color underline
</a>
```

### Hide decoration color
Use `text-decoration:transparent` when spacing or thickness should remain but the decoration should not be visible.
```html
<!-- @MARK text-decoration:transparent -->
<a class="underline text-decoration:transparent">
  Invisible underline
</a>
```

### Apply conditionally
Apply styles based on different states using [selectors](/guide/state-selectors) and [conditional queries](/guide/conditional-queries).
```html
<a class="text-decoration-color:blue-60:hover text-decoration:transparent@print text-decoration:currentColor@sm">...</a>
```

---

# text-decoration-line

Source: https://rc.css.master.co/en/reference/text-decoration-line

Summary: Setting the kind of decoration that is used on text.

## Overview

## Examples
### Underline text
Use `text-decoration-line:underline` when the line property should be controlled explicitly.
```html
<!-- @MARK text-decoration-line:underline -->
<a class="text-decoration-line:underline">
  Underlined
</a>
```
### Combine line values
Separate multiple line values with `|` so they become space-separated CSS values.
```html
<!-- @MARK text-decoration-line:underline|overline -->
<span class="text-decoration-line:underline|overline">
  Marked
</span>
```

### Use shorthand aliases for common cases
The shorter `underline`, `line-through`, and `overline` aliases are useful when only the line matters.
```html
<span class="line-through">Removed</span>
```

### Apply conditionally
Apply styles based on different states using [selectors](/guide/state-selectors) and [conditional queries](/guide/conditional-queries).
```html
<span class="text-decoration-line:underline:hover text-decoration:none@print text-decoration-line:underline|overline@sm">...</span>
```

---

# text-decoration-style

Source: https://rc.css.master.co/en/reference/text-decoration-style

Summary: Setting the style of the decoration line that is used on text.

## Overview

## Examples
### Use a wavy decoration
Use `text-decoration-style:wavy` for spelling, grammar, or annotation styles where a straight underline would be ambiguous.
```html
<!-- @MARK text-decoration-style:wavy -->
<span class="underline text-decoration-style:wavy">
  Needs review
</span>
```
### Use dashed or dotted lines
Use dashed and dotted decoration styles for secondary links or subtle annotations.
```html
<!-- @MARK text-decoration-style:dashed -->
<a class="underline text-decoration-style:dashed">
  Optional details
</a>
```

### Return to solid lines
Use `text-decoration-style:solid` when a state should remove a more decorative style.
```html
<!-- @MARK text-decoration-style:solid -->
<a class="text-decoration-style:wavy text-decoration-style:solid:hover">
  Hover
</a>
```

### Apply conditionally
Apply styles based on different states using [selectors](/guide/state-selectors) and [conditional queries](/guide/conditional-queries).
```html
<a class="text-decoration-style:wavy:hover text-decoration-style:solid@print text-decoration-style:dashed@sm">...</a>
```

---

# text-decoration-thickness

Source: https://rc.css.master.co/en/reference/text-decoration-thickness

Summary: Setting thickness of the decoration line.

## Overview

## Examples
### Set decoration thickness
Use `text-decoration-thickness:*` to control underline, overline, or line-through weight.
```html
<!-- @MARK text-decoration-thickness:2px -->
<a class="underline text-decoration-thickness:2px">
  Strong underline
</a>
```
### Use font-provided thickness
Use `text-decoration:from-font` when the typeface provides an underline thickness that should be respected.
```html
<!-- @MARK text-decoration:from-font -->
<a class="underline text-decoration:from-font">
  Typeface underline
</a>
```

### Pair with underline offset
Thicker decorations usually need a slightly larger [`text-underline-offset`](/reference/text-underline-offset).
```html
<a class="underline text-decoration-thickness:2px text-underline:3xs">
  Balanced underline
</a>
```

### Apply conditionally
Apply styles based on different states using [selectors](/guide/state-selectors) and [conditional queries](/guide/conditional-queries).
```html
<a class="text-decoration-thickness:2px:hover text-decoration-thickness:1px@print text-decoration:from-font@sm">...</a>
```

---

# text-fill-color

Source: https://rc.css.master.co/en/reference/text-fill-color

Summary: Setting the color of text.

## Overview

## Examples
### Fill text with a color
Use `text-fill-color:*` to set the WebKit text fill color directly.
```html
<!-- @MARK text-fill-color:blue-60 -->
<span class="text-fill-color:blue-60">
  Filled text
</span>
```
### Make text fill transparent
Use `text-fill-color:transparent` when the visible text should come from a background clip, stroke, or layered effect.
```html
<!-- @MARK text-fill-color:transparent -->
<h2 class="background-clip:text text-fill-color:transparent">
  Gradient title
</h2>
```

### Use the current color
Use `text-fill-color:currentColor` when the fill should follow `color`.
```html
<!-- @MARK text-fill-color:currentColor -->
<span class="fg:blue-60 text-fill-color:currentColor">Current color</span>
```

### Apply conditionally
Apply styles based on different states using [selectors](/guide/state-selectors) and [conditional queries](/guide/conditional-queries).
```html
<span class="text-fill-color:blue-60:hover text-fill-color:currentColor@print text-fill-color:currentColor@sm">...</span>
```

---

# text-indent

Source: https://rc.css.master.co/en/reference/text-indent

Summary: Setting indentation of the first line.

## Overview

## Examples
### Indent the first line
Use `text-indent:*` to offset the first formatted line of a block of text.
```html
<!-- @MARK text-indent:2em -->
<p class="text-indent:2em">
  The first line is indented while the rest of the paragraph follows the normal inline flow.
</p>
```
### Use spacing values
Use a spacing or sizing value when the indent should align with the rest of the interface rhythm.
```html
<!-- @MARK text-indent:6x -->
<p class="text-indent:6x">
  This paragraph uses an indent tied to the shared scale.
</p>
```

### Reset at a breakpoint
Set the indent back to `0` when a layout changes or when print output should be more compact.
```html
<!-- @MARK text-indent:6x --><!-- @MARK text-indent:0@print -->
<p class="text-indent:6x text-indent:0@print">
  ...
</p>
```

### Apply conditionally
Apply styles based on different states using [selectors](/guide/state-selectors) and [conditional queries](/guide/conditional-queries).
```html
<div class="text-indent:0 text-indent:0@print text-indent:4x@sm">...</div>
```

Use margin or padding when the whole block should move; `text-indent` only affects the first formatted line.

---

# text-orientation

Source: https://rc.css.master.co/en/reference/text-orientation

Summary: Setting orientation of the text characters in a line.

## Overview

## Examples
### Keep characters upright
Use `text-orientation:upright` with vertical writing when each character should remain upright instead of rotating sideways.
```html
<!-- @MARK text-orientation:upright -->
<p class="text-orientation:upright writing-mode:vertical-rl">2026</p>
```
### Use mixed orientation
Use `text-orientation:mixed` to let the browser rotate horizontal scripts while keeping vertical scripts upright.
```html
<!-- @MARK text-orientation:mixed -->
<p class="text-orientation:mixed writing-mode:vertical-rl">Label 2026</p>
```

### Use sideways orientation
Use `text-orientation:sideways` when text should rotate as a run inside a vertical flow.
```html
<!-- @MARK text-orientation:sideways -->
<p class="text-orientation:sideways writing-mode:vertical-rl">Side label</p>
```

### Apply conditionally
Apply styles based on different states using [selectors](/guide/state-selectors) and [conditional queries](/guide/conditional-queries).
```html
<p class="text-orientation:upright:hover text-orientation:mixed@print text-orientation:mixed@sm">...</p>
```

---

# text-overflow

Source: https://rc.css.master.co/en/reference/text-overflow

Summary: Handling how hidden overflow content.

## Overview

## Examples
### Clip overflowing inline text
Use `text-clip` when overflowing inline content should be cut off without an ellipsis.
```html
<!-- @MARK text-clip -->
<span class="text-clip">Long label</span>
```

### Show an ellipsis
Use `text-ellipsis` with `overflow:hidden`, `white-space:nowrap`, and a constrained width.
```html
<!-- @MARK w:40x --><!-- @MARK overflow:hidden --><!-- @MARK white-space:nowrap --><!-- @MARK text-ellipsis -->
<span class="overflow:hidden w:40x text-ellipsis white-space:nowrap">
  quarterly-roadmap-final-version.pdf
</span>
```
`text-overflow` only changes the marker at the clipped edge. It does not create clipping by itself.

### Use in flex rows
In flex or grid children, add `min-w:0` to the shrinking text region so the ellipsis can actually engage.
```html
<!-- @MARK flex --><!-- @MARK min-w:0 --><!-- @MARK text-ellipsis -->
<div class="flex gap:sm">
  <span class="flex:0">File</span>
  <span class="overflow:hidden min-w:0 text-ellipsis white-space:nowrap">
    quarterly-roadmap-final-version.pdf
  </span>
</div>
```

### Apply conditionally
Apply styles based on different states using [selectors](/guide/state-selectors) and [conditional queries](/guide/conditional-queries).
```html
<div class="text-clip text-clip@print text-ellipsis@sm">...</div>
```

Use [line-clamp](/reference/line-clamp) for multi-line truncation.

---

# text-rendering

Source: https://rc.css.master.co/en/reference/text-rendering

Summary: Setting what to optimize when rendering text.

## Overview

## Examples
### Optimize legibility
Use `text-rendering:optimizeLegibility` for headings or short text where ligatures and kerning quality matter more than rendering speed.
```html
<!-- @MARK text-rendering:optimizeLegibility -->
<h2 class="text-rendering:optimizeLegibility">
  Product analytics
</h2>
```
### Prefer speed for dense updates
Use `text-rendering:optimizeSpeed` in fast-updating or very dense surfaces when rendering performance matters.
```html
<!-- @MARK text-rendering:optimizeSpeed -->
<div class="text-rendering:optimizeSpeed">
  Streaming log output
</div>
```

### Return to browser behavior
Use `text-rendering:auto` when the browser should choose the rendering strategy.
```html
<!-- @MARK text-rendering:auto -->
<p class="text-rendering:auto">Default rendering</p>
```

### Apply conditionally
Apply styles based on different states using [selectors](/guide/state-selectors) and [conditional queries](/guide/conditional-queries).
```html
<p class="text-rendering:optimizeLegibility:hover text-rendering:auto@print text-rendering:auto@sm">...</p>
```

---

# text-shadow

Source: https://rc.css.master.co/en/reference/text-shadow

Summary: Adding shadows to text.

## Overview

## Examples
### Add a text shadow
Use `text-shadow:*` to apply a shadow to glyphs.
```html
<!-- @MARK text-shadow:0|1px|2px|black/.2 -->
<h1 class="text-shadow:0|1px|2px|black/.2">
  Readable heading
</h1>
```
### Use text shadows sparingly
Text shadows can help over images, but they can also blur small text. Prefer solid contrast for body copy and reserve text shadows for display text or media overlays.
```html
<!-- @MARK fg:white --><!-- @MARK text-shadow:0|1px|3px|black/.45 -->
<h2 class="text-shadow:0|1px|3px|black/.45 fg:white">
  Mountain retreat
</h2>
```

### Apply conditionally
Apply styles based on different states using [selectors](/guide/state-selectors) and [conditional queries](/guide/conditional-queries).
```html
<div class="text-shadow:none text-shadow:none@print text-shadow:0|1px|2px|black/.2@sm">...</div>
```

Use [box-shadow](/reference/box-shadow) for element shadows.

---

# text-size

Source: https://rc.css.master.co/en/reference/text-size

Summary: Style utility for setting optimally proportioned font size, line height and letter spacing all at once.

## Overview

## Examples
### Body text

If you don't want to include line height, use the [`font:<size>`](/reference/font-size).

### Headings

### Page titles, hero sections

### Use a precise size
Use `text:*` when the type scale utility should set font size, line height, and letter spacing together.
```html
<!-- @MARK text:16px -->
<p class="text:md">
  Body copy
</p>
```
### Apply conditionally
Apply styles based on different states using [selectors](/guide/state-selectors) and [conditional queries](/guide/conditional-queries).
```html
<div class="text:xl:hover text:md@print text:5xl@sm">...</div>
```

---

# text-stroke

Source: https://rc.css.master.co/en/reference/text-stroke

Summary: Setting the width and color of strokes for text characters.

## Overview

## Examples
### Set stroke width and color together
Use `text-stroke:*|*` when the width and color should be declared as one text stroke value.
```html
<!-- @MARK text-stroke:1px|blue-60 -->
<h2 class="text-stroke:1px|blue-60">
  Outlined title
</h2>
```
### Combine stroke with transparent fill
Use transparent fill when the outline should be the primary visible shape.
```html
<!-- @MARK text-fill-color:transparent -->
<h2 class="text-fill-color:transparent text-stroke:1px|currentColor">
  Outline
</h2>
```

### Split width and color when states differ
Use the dedicated width or color utilities when only one part changes across a state.
```html
<h2 class="text-stroke:1px text-stroke:blue-60 text-stroke:transparent:hover">
  Interactive outline
</h2>
```

### Apply conditionally
Apply styles based on different states using [selectors](/guide/state-selectors) and [conditional queries](/guide/conditional-queries).
```html
<h2 class="text-stroke:1px|blue-60:hover text-stroke:0@print text-stroke:2px|blue-60@sm">...</h2>
```

---

# text-stroke-color

Source: https://rc.css.master.co/en/reference/text-stroke-color

Summary: Setting the color of the stroke for text characters.

## Overview

## Examples
### Set text stroke color
Use `text-stroke:*` with a color value to control only the stroke color.
```html
<!-- @MARK text-stroke:blue-60 -->
<h2 class="text-stroke:1px text-stroke:blue-60">
  Stroke color
</h2>
```
### Use the current color
Use `text-stroke:current` when the stroke should follow the foreground color.
```html
<!-- @MARK text-stroke:current -->
<h2 class="fg:blue-60 text-stroke:1px text-stroke:current">
  Current stroke
</h2>
```

### Make the stroke transparent
Use `text-stroke:transparent` to hide the stroke without changing width.
```html
<!-- @MARK text-stroke:transparent -->
<h2 class="text-stroke:1px text-stroke:transparent">
  No visible stroke
</h2>
```

### Apply conditionally
Apply styles based on different states using [selectors](/guide/state-selectors) and [conditional queries](/guide/conditional-queries).
```html
<h2 class="text-stroke:blue-60:hover text-stroke:transparent@print text-stroke:current@sm">...</h2>
```

---

# text-stroke-width

Source: https://rc.css.master.co/en/reference/text-stroke-width

Summary: Setting the width of the stroke for text characters.

## Overview

## Examples
### Set text stroke width
Use `text-stroke:*` with a length to control only the stroke width.
```html
<!-- @MARK text-stroke:2px -->
<h2 class="text-stroke:2px text-stroke:blue-60">
  Thick outline
</h2>
```
### Use the explicit property name
`text-stroke-width:*` is also supported when the property name makes the intent clearer.
```html
<!-- @MARK text-stroke-width:1px -->
<h2 class="text-stroke-width:1px text-stroke:blue-60">
  Thin outline
</h2>
```

### Remove the stroke width
Use `text-stroke:0` to remove the visible stroke in a condition.
```html
<!-- @MARK text-stroke:0@print -->
<h2 class="text-stroke:1px text-stroke:0@print">
  Printed without stroke
</h2>
```

### Apply conditionally
Apply styles based on different states using [selectors](/guide/state-selectors) and [conditional queries](/guide/conditional-queries).
```html
<h2 class="text-stroke:2px:hover text-stroke:0@print text-stroke:1px@sm">...</h2>
```

---

# text-transform

Source: https://rc.css.master.co/en/reference/text-transform

Summary: Controlling capitalization of text.

## Overview

      capitalize

      lowercase

      uppercase

      uppercase::first-letter

      text-transform:none
      heavy boxes perform quick waltzes and jigs.

---

## Basic usage
### Capitalized text
Convert the first letter of each word to uppercase.

```html
<!-- @MARK capitalize -->
<p class="capitalize">heavy boxes perform quick waltzes and jigs.</p>
```

### Lowercase text
Convert all characters to lowercase.

```html
<!-- @MARK lowercase -->
<p class="lowercase">HEAVY BOXES PERFORM QUICK WALTZES AND JIGS.</p>
```

### Uppercase text
Convert all characters to uppercase.

```html
<!-- @MARK uppercase -->
<p class="uppercase">heavy boxes perform quick waltzes and jigs.</p>
```

### Sentence
Capitalize the first letter of a sentence.

```html
<!-- @MARK uppercase::first-letter -->
<p class="uppercase::first-letter">heavy boxes perform quick waltzes and jigs.</p>
```

### Apply conditionally
Apply styles based on different states using [selectors](/guide/state-selectors) and [conditional queries](/guide/conditional-queries).
```html
<div class="uppercase:hover uppercase@dark uppercase@print uppercase@sm">…</div>
```

---

# text-underline-offset

Source: https://rc.css.master.co/en/reference/text-underline-offset

Summary: Setting the distance of a text decoration line from its original position.

## Overview

## Examples
### Move underline away from text
Use `text-underline-offset:*` to control the distance between text and its underline.
```html
<!-- @MARK text-underline-offset:4px -->
<a class="underline text-underline-offset:4px">
  Read more
</a>
```
### Pair with decoration thickness
Larger underline offsets often need a matching decoration thickness so the underline still feels intentional.
```html
<!-- @MARK text-underline-offset:2px -->
<a class="underline text-decoration-thickness:2px text-underline-offset:2px">
  Active section
</a>
```

### Reset in compact contexts
Use `text-underline-offset:0` for dense table or navigation labels when extra offset takes too much space.
```html
<a class="text-underline-offset:4px text-underline-offset:0@sm">Compact link</a>
```

### Apply conditionally
Apply styles based on different states using [selectors](/guide/state-selectors) and [conditional queries](/guide/conditional-queries).
```html
<a class="text-underline-offset:4px:hover text-underline-offset:0@print text-underline-offset:2px@sm">...</a>
```

---

# text-wrap

Source: https://rc.css.master.co/en/reference/text-wrap

Summary: Controlling how text inside an element is wrapped.

## Overview

## Examples
### Balance short headings
Use `text-balance` for headings, cards, and callouts where balanced line lengths are more important than fitting as much text as possible on each line.
```html
<!-- @MARK text-balance -->
<h1 class="text-balance">
  Build interfaces that stay readable across narrow and wide containers
</h1>
```
### Prefer pretty wrapping for prose
Use `text-pretty` for paragraphs where the browser should avoid awkward last lines when it can.
```html
<!-- @MARK text-pretty -->
<p class="text-pretty">
  Master CSS keeps text wrapping decisions in markup while still using native CSS behavior.
</p>
```

### Prevent wrapping
Use `text-nowrap` when a label, tab, or inline control must stay on one line.
```html
<!-- @MARK text-nowrap --><!-- @MARK overflow:hidden --><!-- @MARK text-ellipsis -->
<span class="overflow:hidden text-ellipsis text-nowrap">
  Very long file name
</span>
```

Only use no-wrap when the container has an overflow strategy. Otherwise the text can force the layout wider than intended.

### Apply conditionally
Apply styles based on different states using [selectors](/guide/state-selectors) and [conditional queries](/guide/conditional-queries).
```html
<div class="text-wrap text-wrap@print text-balance@sm text-pretty@lg">...</div>
```

Use [white-space](/reference/white-space) when the requirement is preserving spaces or line breaks.

---

# touch-action

Source: https://rc.css.master.co/en/reference/touch-action

Summary: Setting how an element's region can be manipulated by a touchscreen user.

## Overview

## Examples
### Disable browser gestures on a custom surface
Use `touch-action:none` for canvases or drag surfaces that handle their own touch gestures.
```html
<!-- @MARK touch-action:none -->
<canvas class="touch-action:none">
  Drawing surface
</canvas>
```
### Allow vertical scrolling
Use `touch-action:pan-y` for horizontal carousels so the page can still scroll vertically.
```html
<!-- @MARK touch-action:pan-y -->
<div class="overflow-x:auto touch-action:pan-y">
  Carousel
</div>
```

### Optimize tap controls
Use `touch-action:manipulation` on buttons and links when the element only needs tap and click behavior.
```html
<!-- @MARK touch-action:manipulation -->
<button class="touch-action:manipulation">
  Submit
</button>
```

### Apply conditionally
Apply styles based on different states using [selectors](/guide/state-selectors) and [conditional queries](/guide/conditional-queries).
```html
<div class="touch-action:none:hover touch-action:auto@print touch-action:pan-y@sm">...</div>
```

---

# transform

Source: https://rc.css.master.co/en/reference/transform

Summary: Controlling rotate, scale, skew, or translate an element.

## Overview

## Examples
### Move an element
Use `transform:*` to write a native transform function directly in the class name.
```html
<!-- @MARK transform:translateY(-2px) -->
<button class="transition:transform|150ms|ease-out transform:translateY(-2px):hover">
  Lift
</button>
```
### Scale pressed controls
Transforms are useful for small interaction feedback because they do not require layout recalculation.
```html
<!-- @MARK transform:scale(.98):active -->
<button class="transition:transform|120ms|ease-out transform:scale(.98):active">
  Press
</button>
```

### Rotate or skew decorative elements
Use the same property for rotate, skew, matrix, perspective, or any valid transform function list.
```html
<!-- @MARK transform:rotate(2deg) -->
<div class="transform:rotate(2deg)">
  Slightly rotated
</div>
```

### Set the pivot separately
Use [`transform-origin`](/reference/transform-origin) when the transform should rotate or scale around a specific point.
```html
<div class="transform-origin:top|right transform:scale(.95):hover">
  Scales from the top right
</div>
```

### Apply conditionally
Apply styles based on different states using [selectors](/guide/state-selectors) and [conditional queries](/guide/conditional-queries).
```html
<div class="transform:translateY(-2px):hover transform:none@print transform:scale(.98)@sm">...</div>
```

---

# transform-box

Source: https://rc.css.master.co/en/reference/transform-box

Summary: Defining the layout box to which transform and transform-origin properties relate.

## Overview

## Examples
### Choose the transform reference box
Use `transform-box:*` to choose which box is used for transform calculations. This is most useful for SVG elements whose fill box, stroke box, and view box can differ.
```html
<!-- @MARK transform-box:fill-box -->
<svg viewBox="0 0 24 24">
  <path class="transform:scale(.92) transform-box:fill-box transform-origin:center" d="M4 4h16v16H4z" />
</svg>
```
### Use the border box for HTML elements
For regular HTML elements, `border-box` makes the element border box the transform reference.
```html
<!-- @MARK transform-box:border-box -->
<div class="transform:rotate(1deg) transform-box:border-box transform-origin:center">
  Card
</div>
```

### Pair with transform origin
`transform-box:*` changes the box; `transform-origin:*` chooses the point inside that box.
```html
<svg viewBox="0 0 24 24">
  <circle class="transform:scale(1.1) transform-box:fill-box transform-origin:center" cx="12" cy="12" r="8" />
</svg>
```

### Apply conditionally
Apply styles based on different states using [selectors](/guide/state-selectors) and [conditional queries](/guide/conditional-queries).
```html
<div class="transform-box:fill-box:hover transform-box:border-box@print transform-box:border-box@sm">...</div>
```

---

# transform-origin

Source: https://rc.css.master.co/en/reference/transform-origin

Summary: Setting the origin for an element’s transformations.

## Overview

## Examples
### Set the pivot point
Use `transform-origin:*` to define the point an element rotates, scales, or skews around.
```html
<!-- @MARK transform-origin:center -->
<div class="transform-origin:center transform:scale(.96):hover">
  Scales from center
</div>
```
### Use two-axis origins
Separate multi-word origins with `|` so they become space-separated CSS values.
```html
<!-- @MARK transform-origin:top|right -->
<div class="transform:rotate(2deg) transform-origin:top|right">
  Rotates from the corner
</div>
```

### Match the origin to the interaction
Menus, tooltips, and popovers usually feel more natural when their origin is close to the anchor that opened them.
```html
<div class="transform:scale(.98) transform-origin:top|left">
  Anchored menu
</div>
```

### Apply conditionally
Apply styles based on different states using [selectors](/guide/state-selectors) and [conditional queries](/guide/conditional-queries).
```html
<div class="transform-origin:center:hover transform-origin:center@print transform-origin:top|right@sm">...</div>
```

---

# transform-style

Source: https://rc.css.master.co/en/reference/transform-style

Summary: Setting how children of an element are rendered in the 3D space.

## Overview

## Examples
### Preserve 3D children
Use `transform-style:preserve-3d` on the parent when transformed children should keep their 3D position instead of being flattened into the parent plane.
```html
<!-- @MARK transform-style:preserve-3d -->
<div class="transform-style:preserve-3d">
  <div class="transform:translateZ(24px)">Front layer</div>
</div>
```
### Flatten nested transforms
Use `transform-style:flat` when children should render in the same plane as the parent.
```html
<!-- @MARK transform-style:flat -->
<div class="transform-style:flat">
  <div class="transform:rotateY(20deg)">Flattened child</div>
</div>
```

### Combine with perspective
`transform-style:*` does not add perspective by itself. Add perspective through `transform:*` or a component style when depth should be visible.
```html
<div class="transform:perspective(800px) transform-style:preserve-3d">
  3D scene
</div>
```

### Apply conditionally
Apply styles based on different states using [selectors](/guide/state-selectors) and [conditional queries](/guide/conditional-queries).
```html
<div class="transform-style:preserve-3d:hover transform-style:flat@print transform-style:flat@sm">...</div>
```

---

# transition

Source: https://rc.css.master.co/en/reference/transition

Summary: Controlling animation speed when changing CSS properties.

## Overview

## Examples
### Declare a complete transition
Use `transition:*` when the property, duration, and easing belong together. Separate the parts with `|` so the class maps to the native `transition` shorthand.
```html
<!-- @MARK transition:opacity|150ms|ease-out -->
<button class="opacity:.72 transition:opacity|150ms|ease-out opacity:1:hover">
  Save changes
</button>
```
### Animate transforms explicitly
Keep the transitioned property narrow. A transform transition is cheaper to reason about than `transition:all` because layout, color, and shadow changes will not animate by accident.
```html
<!-- @MARK transition:transform|200ms|ease-in-out --><!-- @MARK transform:translateY(-2px):hover -->
<a class="inline-block transition:transform|200ms|ease-in-out transform:translateY(-2px):hover">
  View report
</a>
```

### Split longhands when states differ
Use the longhand utilities when one part changes independently, such as disabling the duration for print while keeping the same property and easing.
```html
<button class="transition-duration:150ms transition-property:opacity transition-timing-function:ease-out transition-duration:0ms@print">
  Continue
</button>
```

### Apply conditionally
Apply styles based on different states using [selectors](/guide/state-selectors) and [conditional queries](/guide/conditional-queries).
```html
<div class="transition:opacity|150ms|ease-out:hover transition:opacity|150ms|ease-out@dark transition:none@print transition:opacity|150ms|ease-out@sm">...</div>
```

---

# transition-delay

Source: https://rc.css.master.co/en/reference/transition-delay

Summary: Setting a time to delay before starting transition.

## Overview

## Examples
### Delay a transition
Use `transition-delay:*` to wait before a transition starts. This is useful for staggered affordances and hover details that should not flash immediately.
```html
<!-- @MARK transition-delay:75ms -->
<span class="opacity:0 transition:opacity|150ms|ease-out transition-delay:75ms opacity:1:hover">
  More details
</span>
```
### Stagger sibling elements
Apply different delays to related elements while keeping the same duration and easing.
```html
<!-- @MARK transition-delay:150ms -->
<div class="transition-duration:200ms transition-property:opacity">
  <span class="opacity:1 transition-delay:0ms">Step one</span>
  <span class="opacity:1 transition-delay:150ms">Step two</span>
</div>
```

### Use duration tokens
Define `duration-*` tokens when the same delay appears across several interactions.

```css name=index.css
@theme {
  --duration-short: 80ms;
}
```

```html
<button class="transition:opacity|fast|smooth transition-delay:short">...</button>
```

### Reset delay at breakpoints
Remove a delay when the same UI becomes dense or task-focused at a larger viewport.
```html
<!-- @MARK transition-delay:0ms@sm -->
<div class="transition-delay:100ms transition-delay:0ms@sm">
  Immediate on desktop
</div>
```

### Apply conditionally
Apply styles based on different states using [selectors](/guide/state-selectors) and [conditional queries](/guide/conditional-queries).
```html
<div class="transition-delay:75ms:hover transition-delay:0ms@print transition-delay:0ms@sm">...</div>
```

---

# transition-duration

Source: https://rc.css.master.co/en/reference/transition-duration

Summary: Setting the length of time a transition should takes to complete.

## Overview

## Examples
### Set transition speed
Use `transition-duration:*` to control how long a property takes to move from one value to another.
```html
<!-- @MARK transition-duration:150ms -->
<button class="bg:blue-60 transition-duration:150ms transition-property:background-color bg:blue-70:hover">
  Quick change
</button>
```
### Match duration to distance
Short hover feedback usually feels best under a few hundred milliseconds. Larger position or panel changes can use a longer duration.
```html
<!-- @MARK transition-duration:300ms -->
<aside class="transform:translateX(0) transition-duration:300ms transition-property:transform">
  Panel
</aside>
```

### Remove motion for static contexts
Use `transition-duration:0ms` when a state should update immediately, such as print output or a compact fallback.
```html
<!-- @MARK transition-duration:0ms@print -->
<button class="transition-duration:150ms transition-duration:0ms@print">
  Print without motion
</button>
```

### Apply conditionally
Apply styles based on different states using [selectors](/guide/state-selectors) and [conditional queries](/guide/conditional-queries).
```html
<div class="transition-duration:150ms:hover transition-duration:0ms@print transition-duration:300ms@sm">...</div>
```

---

# transition-property

Source: https://rc.css.master.co/en/reference/transition-property

Summary: Setting the CSS properties to which a transition effect should be applied.

## Overview

## Examples
### Limit what can animate
Use `transition-property:*` to choose the properties that are allowed to animate. Prefer a small property list for predictable state changes.
```html
<!-- @MARK transition-property:opacity -->
<div class="opacity:.6 transition-duration:150ms transition-property:opacity opacity:1:hover">
  Online
</div>
```
### Pair with duration and easing
`transition-property:*` only chooses the property. Add `transition-duration:*` and `transition-timing-function:*` when the transition needs a specific feel.
```html
<!-- @MARK transition-property:transform -->
<button class="transition-duration:200ms transition-property:transform transition-timing-function:ease-out transform:translateY(-1px):hover">
  Lift
</button>
```

### Disable accidental transitions
Use `transition-property:none` to stop inherited component styles or variant styles from animating a state.
```html
<!-- @MARK transition-property:none -->
<div class="transition-property:none@print">
  Static in print
</div>
```

### Apply conditionally
Apply styles based on different states using [selectors](/guide/state-selectors) and [conditional queries](/guide/conditional-queries).
```html
<div class="transition-property:opacity:hover transition-property:none@print transition-property:transform@sm">...</div>
```

---

# transition-timing-function

Source: https://rc.css.master.co/en/reference/transition-timing-function

Summary: Setting speed curve of the transition effect.

## Overview

## Examples
### Choose an easing curve
Use `transition-timing-function:*` to control acceleration during a transition. Pair it with a duration so the curve is visible.
```html
<!-- @MARK transition-timing-function:ease-out -->
<button class="transition-duration:180ms transition-property:transform transition-timing-function:ease-out transform:translateY(-2px):hover">
  Hover
</button>
```
### Use linear timing for continuous motion
Use `linear` when the transition represents steady progress instead of physical easing.
```html
<!-- @MARK transition-timing-function:linear -->
<div class="transition-duration:1s transition-property:opacity transition-timing-function:linear">
  Syncing
</div>
```

### Keep entrance and exit curves intentional
`ease-out` works well for elements entering or becoming more prominent. `ease-in` can work for elements leaving the interface.
```html
<!-- @MARK transition-timing-function:ease-in -->
<div class="transition-timing-function:ease-out transition-timing-function:ease-in:hover">
  Dismiss
</div>
```

### Apply conditionally
Apply styles based on different states using [selectors](/guide/state-selectors) and [conditional queries](/guide/conditional-queries).
```html
<div class="transition-timing-function:ease-out:hover transition-timing-function:ease-in@print transition-timing-function:linear@sm">...</div>
```

---

# user-drag

Source: https://rc.css.master.co/en/reference/user-drag

Summary: Controlling whether the user can drag element.

## Overview

## Examples
### Prevent dragging media
Use `user-drag:none` to prevent images, icons, and decorative media from being dragged out of the interface.
```html
<!-- @MARK user-drag:none -->
<img class="user-drag:none" src="/images/product.png" alt="Product preview">
```
### Keep draggable elements explicit
Use `user-drag:element` only when the element is intended to participate in native drag behavior.
```html
<!-- @MARK user-drag:element -->
<div class="user-drag:element">
  Draggable asset
</div>
```
### Reset to browser behavior
Use `user-drag:auto` when a component variant should restore the default drag behavior.
```html
<!-- @MARK user-drag:auto -->
<img class="user-drag:none user-drag:auto@sm" src="/images/file.png" alt="File">
```
### Apply conditionally
Apply styles based on different states using [selectors](/guide/state-selectors) and [conditional queries](/guide/conditional-queries).
```html
<div class="user-drag:none:hover user-drag:none@print user-drag:auto@sm">...</div>
```

---

# user-select

Source: https://rc.css.master.co/en/reference/user-select

Summary: Controlling whether the user can select text.

## Overview

## Examples
### Disable selection on controls
Use `user-select:none` for controls where accidental text selection makes the interaction feel broken.
```html
<!-- @MARK user-select:none -->
<button class="user-select:none">
  Drag handle
</button>
```
### Select all text in one click
Use `user-select:all` for short values that users commonly copy whole, such as tokens or command snippets.
```html
<!-- @MARK user-select:all -->
<code class="user-select:all">pnpm install @master/css</code>
```

### Preserve normal reading selection
Use `user-select:text` for article content, code examples, and any text users may need to copy partially.
```html
<!-- @MARK user-select:text -->
<p class="user-select:text">Select part of this sentence.</p>
```

### Apply conditionally
Apply styles based on different states using [selectors](/guide/state-selectors) and [conditional queries](/guide/conditional-queries).
```html
<div class="user-select:none:hover user-select:auto@print user-select:text@sm">...</div>
```

---

# vertical-align

Source: https://rc.css.master.co/en/reference/vertical-align

Summary: Setting vertical alignment.

## Overview

## Examples
### Align inline content
Use `vertical-align:*` to align inline-level or table-cell content along the inline formatting context.
```html
<!-- @MARK vertical-align:middle -->
<span class="vertical-align:middle">Aligned text</span>
```
### Align icons with text
Use `vertical-align:middle`, `vertical-align:text-bottom`, or `vertical-align:text-top` to tune inline icons next to text.
```html
<!-- @MARK inline-block --><!-- @MARK vertical-align:text-bottom -->
<svg class="inline-block size:1em vertical-align:text-bottom" aria-hidden="true"></svg>
<span>Download</span>
```

### Align table cells
Use vertical alignment on table cells when content should sit at the top, middle, or bottom of the row.
```html
<!-- @MARK table-cell --><!-- @MARK vertical-align:top -->
<td class="table-cell vertical-align:top">Long cell content</td>
```

(i) `vertical-align` does not align flex or grid items. Use [align-items](/reference/align-items), [align-self](/reference/align-self), or [place-items](/reference/place-items) for those layouts.

### Apply conditionally
Apply styles based on different states using [selectors](/guide/state-selectors) and [conditional queries](/guide/conditional-queries).
```html
<div class="vertical-align:baseline vertical-align:top@print vertical-align:middle@sm">...</div>
```

---

# visibility

Source: https://rc.css.master.co/en/reference/visibility

Summary: Controlling whether an element is visible.

## Overview

## Examples
### Hide but preserve layout
Use `invisible` when an element should not be painted but should still reserve its layout space.
```html
<!-- @MARK invisible -->
<div class="invisible">
  Hidden placeholder
</div>
```
### Make an element visible again
Use `visible` to override an inherited or conditional hidden state.
```html
<!-- @MARK visible -->
<div class="invisible visible@sm">
  Visible on larger screens
</div>
```

### Collapse table rows
Use `visibility:collapse` for table rows or columns that should be hidden using table collapse behavior.
```html
<!-- @MARK visibility:collapse -->
<tr class="visibility:collapse">
  <td>Collapsed row</td>
</tr>
```

### Apply conditionally
Apply styles based on different states using [selectors](/guide/state-selectors) and [conditional queries](/guide/conditional-queries).
```html
<div class="invisible:hover visible@print visible@sm">...</div>
```

---

# white-space

Source: https://rc.css.master.co/en/reference/white-space

Summary: Controlling how whitespace and line breaks within an element are handled.

## Overview

## Examples
### Keep text on one line
Use `white-space:nowrap` when inline text should not wrap. Pair it with overflow handling when the container can become narrow.
```html
<!-- @MARK white-space:nowrap --><!-- @MARK overflow:hidden --><!-- @MARK text-ellipsis -->
<span class="overflow:hidden text-ellipsis white-space:nowrap">
  A long single-line label
</span>
```
### Preserve authored line breaks
Use `white-space:pre-line` to preserve line breaks while still collapsing runs of spaces.
```html
<!-- @MARK white-space:pre-line -->
<p class="white-space:pre-line">
  First line
  Second line
</p>
```

### Preserve spaces and wrapping
Use `white-space:pre-wrap` or `break-spaces` when user-authored spacing should remain visible.
```html
<!-- @MARK break-spaces -->
<code class="break-spaces">token    value</code>
```

### Apply conditionally
Apply styles based on different states using [selectors](/guide/state-selectors) and [conditional queries](/guide/conditional-queries).
```html
<div class="white-space:normal break-spaces@print white-space:nowrap@sm">...</div>
```

Use [text-wrap](/reference/text-wrap) when the problem is line balancing rather than preserving whitespace.

---

# width

Source: https://rc.css.master.co/en/reference/width

Summary: Setting an element’s width.

## Overview

## Examples
### Set a fixed or fluid width
Use `w:*` to set the CSS `width` property. Values can come from the sizing scale, percentages, keywords, container variables, native units, or CSS functions.
```html
<!-- @MARK w:64x -->
<aside class="w:3xs">...</aside>

<!-- @MARK w:full --><!-- @MARK max-w:5xl -->
<main class="w:full max-w:5xl">...</main>
```
### Use percentages for proportional layout
Percentages are useful for split panels and simple responsive columns.
```html
<!-- @MARK w:full --><!-- @MARK w:50%@sm -->
<div class="w:full w:50%@sm">
  ...
</div>
```

Percentages follow native CSS behavior: the percentage is based on the containing block.

### Use intrinsic width keywords
Use `w:fit`, `w:min`, and `w:max` when the element should size itself from its content.
```html
<!-- @MARK w:fit --><!-- @MARK px:sm -->
<button class="w:fit px:sm">
  Compact action
</button>
```

### Use container widths for wrappers
`w:*` uses container size theme tokens. In page layout, it is usually paired with `max-w:*` or `w:full` so the wrapper can shrink on smaller containers.
```html
<!-- @MARK w:full --><!-- @MARK max-w:7xl --><!-- @MARK mx:auto -->
<main class="w:full max-w:7xl mx:auto">
  ...
</main>
```

### Apply conditionally
Apply styles based on different states using [selectors](/guide/state-selectors) and [conditional queries](/guide/conditional-queries).
```html
<div class="w:full w:fit:hover w:full@print w:50%@sm">...</div>
```

For both axes at once, use [size](/reference/size). For upper and lower bounds, use [max-width](/reference/max-width) and [min-width](/reference/min-width).

---

# will-change

Source: https://rc.css.master.co/en/reference/will-change

Summary: Setting how an element is expected to change in the browser.

## Overview

## Examples
### Hint an upcoming transform
Use `will-change:*` sparingly to tell the browser that a property is likely to change soon.
```html
<!-- @MARK will-change:transform -->
<button class="transition:transform|150ms|ease-out will-change:transform transform:translateY(-2px):hover">
  Hover
</button>
```
### Hint opacity changes
Use `will-change:opacity` for elements that fade frequently, such as popovers or temporary overlays.
```html
<!-- @MARK will-change:opacity -->
<div class="opacity:0 transition:opacity|150ms|ease-out will-change:opacity opacity:1:hover">
  Preview
</div>
```

### Reset when the hint is no longer useful
Do not leave `will-change` on large parts of the page by default. Reset it with `will-change:auto` when the element returns to a static state.
```html
<!-- @MARK will-change:auto -->
<div class="will-change:transform will-change:auto:active">
  Active only when needed
</div>
```

### Apply conditionally
Apply styles based on different states using [selectors](/guide/state-selectors) and [conditional queries](/guide/conditional-queries).
```html
<div class="will-change:transform:hover will-change:auto@print will-change:opacity@sm">...</div>
```

---

# word-break

Source: https://rc.css.master.co/en/reference/word-break

Summary: Setting whether words should break.

## Overview

## Examples
### Keep normal word boundaries
Use `word-break:normal` for standard language-aware wrapping.
```html
<!-- @MARK word-break:normal -->
<p class="word-break:normal">
  Long words wrap at normal opportunities when the browser can find them.
</p>
```
### Break anywhere inside words
Use `word-break:break-all` for narrow columns where unbroken strings would otherwise overflow.
```html
<!-- @MARK word-break:break-all -->
<p class="word-break:break-all">
  pneumonoultramicroscopicsilicovolcanoconiosis
</p>
```

This can make prose harder to read. Prefer [overflow-wrap](/reference/overflow-wrap) for user-generated URLs, hashes, or identifiers where emergency breaks are enough.

### Keep CJK words together
Use `word-break:keep-all` when CJK text should avoid breaking between characters.
```html
<!-- @MARK word-break:keep-all -->
<p lang="ja" class="word-break:keep-all">CJK text without forced character breaks</p>
```

### Use the break-word shortcut
Use `break-word` when you need the static shortcut for `word-break: break-word`.
```html
<!-- @MARK break-word -->
<p class="break-word">very-long-unbroken-identifier</p>
```

### Apply conditionally
Apply styles based on different states using [selectors](/guide/state-selectors) and [conditional queries](/guide/conditional-queries).
```html
<div class="word-break:normal word-break:normal@print word-break:break-all@sm">...</div>
```

Choose the least aggressive breaking rule that prevents overflow.

---

# word-spacing

Source: https://rc.css.master.co/en/reference/word-spacing

Summary: Setting the spacing between words.

## Overview

## Examples
### Add space between words
Use `word-spacing:*` for short labels, all-caps headings, or dense text where words need more separation.
```html
<!-- @MARK word-spacing:.04em -->
<p class="word-spacing:.04em">
  Quarterly revenue report
</p>
```
### Use fixed spacing when needed
Any valid CSS length can be used when the spacing needs to match a fixed visual rhythm.
```html
<!-- @MARK word-spacing:2px -->
<span class="word-spacing:2px">Invoice total</span>
```

### Avoid overusing wide spacing
Large word spacing can hurt readability in paragraphs. Prefer it for short runs of text.
```html
<p class="word-spacing:0">Long body copy keeps normal word spacing.</p>
```

### Apply conditionally
Apply styles based on different states using [selectors](/guide/state-selectors) and [conditional queries](/guide/conditional-queries).
```html
<p class="word-spacing:.04em:hover word-spacing:0@print word-spacing:0@sm">...</p>
```

---

# writing-mode

Source: https://rc.css.master.co/en/reference/writing-mode

Summary: Setting different writing mode.

## Overview

## Examples
### Use vertical right-to-left flow
Use `writing-mode:vertical-rl` when text should flow vertically with columns progressing from right to left.
```html
<!-- @MARK writing-mode:vertical-rl -->
<p class="writing-mode:vertical-rl">
  Vertical label
</p>
```
### Restore horizontal text
Use `writing-mode:horizontal-tb` to return nested content to normal horizontal flow.
```html
<!-- @MARK writing-mode:horizontal-tb -->
<div class="writing-mode:vertical-rl">
  <span class="writing-mode:horizontal-tb">ABC</span>
</div>
```

### Pair with text orientation
Use [`text-orientation:upright`](/reference/text-orientation) when characters should remain upright inside vertical writing.
```html
<p class="text-orientation:upright writing-mode:vertical-rl">2026</p>
```

### Apply conditionally
Apply styles based on different states using [selectors](/guide/state-selectors) and [conditional queries](/guide/conditional-queries).
```html
<p class="writing-mode:vertical-rl:hover writing-mode:horizontal-tb@print writing-mode:horizontal-tb@sm">...</p>
```

---

# z-index

Source: https://rc.css.master.co/en/reference/z-index

Summary: Set the z-order of a positioned element.

## Overview

## Examples
### Order positioned elements
Use `z:*` to control the stacking order of overlapping positioned elements. Values can be positive, negative, or zero.

```html
<div class="z:9">1</div>
<div class="z:3">2</div>
<!-- @MARK z:1 -->
<div class="z:1">3</div>
<div class="z:-1">4</div>
<div class="z:-9">5</div>
```
### Use negative stacking when intentional
Negative z-index is useful for decorative layers inside an isolated component.
```html
<!-- @MARK z:-1 -->
<div class="rel isolate">
  <div class="abs inset:0 z:-1"></div>
</div>
```

### Prefer local stacking contexts
Use `isolate` or another stacking-context boundary when z-index values should not compete with the whole page.
```html
<article class="rel isolate">
  <div class="z:10">Menu</div>
</article>
```

### Apply conditionally
Apply styles based on different states using [selectors](/guide/state-selectors) and [conditional queries](/guide/conditional-queries).
```html
<div class="z:1:hover z:0@print z:10@sm">...</div>
```

---

# Sponsor

Source: https://rc.css.master.co/en/sponsor

Summary: Donate a small portion of your income benefiting from us to help grow.