# Master CSS

> A CSS language and framework for building web interfaces with rule-based CSS-in-class.

Reference discovery: [structured index](https://css.master.co/reference/index.json). Individual Reference links below return Markdown with source revision, prerequisites and generated CSS.

## Benchmarks
- [Benchmarks](https://css.master.co/benchmarks.md): See how much of the CSS a page delivers matches it, compare generated CSS for the same UI, and check build and runtime costs with their limits.

## Guide
- [Get started with Master CSS](https://css.master.co/guide.md): Learn class syntax, design tokens and CSS delivery, then apply them in your framework.
- [AI coding with Master CSS](https://css.master.co/guide/ai-coding.md): Connect an agent to your Master CSS project, request a scoped change, verify the rendered result, and review shared style changes.
- [Authoring packages](https://css.master.co/guide/authoring-packages.md): Publish shared CSS source, override public tokens in each app, and verify the packed package in a production consumer.
- [Cascade layers](https://css.master.co/guide/cascade-layers.md): Override a shared component with utilities and diagnose competing rules, unlayered CSS and importance.
- [Code linting for Master CSS](https://css.master.co/guide/code-linting.md): Use ESLint to validate Master CSS classes, detect conflicts, sort class lists and apply project policies.
- [Color](https://css.master.co/guide/colors.md): Build interface color from adaptive roles, raise surfaces with radius and shadow, and choose light or dark modes.
- [Compatibility](https://css.master.co/guide/compatibility.md): Use new CSS features with a usable fallback, verify browser behavior, and place third-party styles in the cascade.
- [Global styles](https://css.master.co/guide/global-styles.md): Load one app entry, split shared CSS by ownership, and keep document defaults, component rules and route styles in the right scope.
- [Installing Master CSS](https://css.master.co/guide/installation.md): Choose a framework integration, check CDN availability, or generate a stylesheet with the CLI.
- [Set up Master CSS in Angular](https://css.master.co/guide/installation/angular.md): Connect CLI-generated CSS to Angular, run both development watchers, and verify the production stylesheet or optional browser runtime.
- [Set up Master CSS in Astro](https://css.master.co/guide/installation/astro.md): Connect the Astro integration and shared CSS entry, then verify production styles in the rendering mode you choose.
- [Set up Master CSS in Lit](https://css.master.co/guide/installation/lit.md): Style Lit shadow roots with static CSS or a browser runtime that follows the component lifecycle.
- [Set up Master CSS in Next.js](https://css.master.co/guide/installation/nextjs.md): Connect Master CSS to the Next.js App Router and verify CSS delivery for pre-rendered and request-time pages.
- [Set up Master CSS in Nuxt](https://css.master.co/guide/installation/nuxtjs.md): Load the project CSS entry through Nuxt and verify static styles, browser generation or Nitro response rendering.
- [Set up Master CSS in server-rendered apps](https://css.master.co/guide/installation/server-rendered.md): Build Master CSS with Vite and load it from PHP, Laravel, Rails, WordPress, Shopify, ASP.NET Core, Blazor or Express templates.
- [Set up Master CSS in Storybook](https://css.master.co/guide/installation/storybook.md): Load application styles into the Storybook preview iframe and verify development and production stories with the Vite builder.
- [Set up Master CSS in SvelteKit](https://css.master.co/guide/installation/svelte.md): Install the SvelteKit add-on, connect the root stylesheet and choose static, prerender, runtime or progressive CSS delivery.
- [Set up Master CSS in Vite](https://css.master.co/guide/installation/vite.md): Connect Master CSS to Vite, React, Vue, React Router or TanStack Start, then verify static CSS and optional browser generation.
- [Set up Master CSS in Webpack, Rspack and Rsbuild](https://css.master.co/guide/installation/webpack.md): Connect the CSS entry and HTML plugin in Webpack, Rspack or Rsbuild, then verify the production stylesheet.
- [Introduction to Master CSS](https://css.master.co/guide/introduction.md): Build an interface with classes, follow them into CSS, and define the values your project shares.
- [Language service for Master CSS](https://css.master.co/guide/language-service.md): Set up VS Code, confirm project-aware token completion, inspect generated CSS, and configure class sources and workspaces.
- [Layout](https://css.master.co/guide/layout-system.md): Compose a page from a capped wrapper, spacing tokens, column grids and explicit tracks.
- [Migrating to Master CSS](https://css.master.co/guide/migration.md): Convert one component or route, verify the screens sharing its styles, and remove old dependencies when their consumers are gone.
- [Migrating from Bootstrap](https://css.master.co/guide/migration/bootstrap.md): Move Bootstrap-styled screens toward Master CSS while preserving vendor CSS, JavaScript-driven components, and cascade-dependent overrides.
- [Migrating from CSS and CSS Modules](https://css.master.co/guide/migration/css.md): Move global CSS and CSS Modules toward Master CSS where class strings, tokens, or composition make the result easier to maintain.
- [Migrating from CSS-in-JS](https://css.master.co/guide/migration/css-in-js.md): Move styled-components and Emotion styles to Master CSS by converting static styles, preserving dynamic values, and keeping reusable component contracts explicit.
- [Migrating from Material UI](https://css.master.co/guide/migration/material-ui.md): Move Material UI projects toward Master CSS by migrating app-owned layout, sx styles, theme tokens, and overrides without breaking component behavior.
- [Migrating from Sass](https://css.master.co/guide/migration/sass.md): Move Sass variables, maps, mixins, placeholders, and nested component styles toward Master CSS without losing useful CSS structure.
- [Migrating from shadcn/ui](https://css.master.co/guide/migration/shadcn-ui.md): Move shadcn/ui components to Master CSS while their primitives keep behavior, the theme variables stay shared, and caller overrides resolve through cascade layers.
- [Migrating from Tailwind CSS](https://css.master.co/guide/migration/tailwindcss.md): Migrate a Tailwind CSS v4 project to Master CSS by translating CSS-first theme values, utilities, variants, and composition in reviewable batches.
- [Monorepo](https://css.master.co/guide/monorepo.md): Give each application its own project context and share CSS vocabulary across workspace packages.
- [Optimizing CSS delivery](https://css.master.co/guide/optimizing-css-delivery.md): Reduce unrelated CSS with route ownership and selective pruning, then verify production output, runtime behavior and navigation costs.
- [Rendering modes](https://css.master.co/guide/rendering-modes.md): Choose where to generate CSS, compare static, prerender, runtime and progressive delivery, and verify the result.
- [Responsive design](https://css.master.co/guide/responsive-design.md): Choose the right responsive boundary, adapt page columns and reusable summaries, and verify the widths where their layout changes.
- [Reusing styles](https://css.master.co/guide/reusing-styles.md): Choose tokens, component classes, utilities and mixins by what should change together, while keeping local variations easy to express.
- [Route-level styles](https://css.master.co/guide/route-level-styles.md): Keep route CSS locally delivered while using shared definitions; distinguish reference context, native rules and selector scope.
- [Scanning class names](https://css.master.co/guide/scanning-and-pruning.md): Write complete class names, handle changing values, and include the sources a static build needs.
- [Syntax tutorial](https://css.master.co/guide/syntax-tutorial.md): Read and compose Master CSS classes, add interaction states and conditions, and build a guide card that responds to its available space.
- [Theme tokens](https://css.master.co/guide/theme.md): Define shared design values, see how token edits affect consumers, and choose local overrides, static delivery and inline substitution.
- [Typography](https://css.master.co/guide/typography.md): Choose complete text treatments or single font tokens, and set the site typeface once.
- [View transitions](https://css.master.co/guide/view-transitions.md): Connect article views with browser view transitions, stable snapshot names and Master CSS layout utilities.

## Reference
- [Reference](https://css.master.co/reference.md): The language and tool reference for writing, understanding and reviewing Master CSS.

## Reference / Directive
- [Utilities and mixins](https://css.master.co/reference/directives/definitions.md): Define on-demand utilities, reusable mixins and layered native styles.
- [Imports](https://css.master.co/reference/directives/imports.md): Load the preset and other stylesheets, or reference their tokens and definitions without their CSS.
- [Native CSS pruning](https://css.master.co/reference/directives/pruning.md): Control native class pruning and on-demand keyframes within each stylesheet.
- [Query definitions](https://css.master.co/reference/directives/queries.md): Define reusable media and container conditions, with shared expansion in stylesheets and class suffixes.
- [Scanning](https://css.master.co/reference/directives/scanning.md): Include or exclude source files and specific class names.
- [Theme](https://css.master.co/reference/directives/theme.md): Register theme tokens and control their retention and substitution with static and inline.

## Reference / Package
- [Packages](https://css.master.co/reference/packages.md): Choose a public package, find its import paths, and open its API source on GitHub.

## Reference / Rule
- [Conditions](https://css.master.co/reference/rules/conditions.md): Accepted query suffixes, named conditions, nested wrappers and queries that belong in CSS.
- [Declarations and values](https://css.master.co/reference/rules/declarations.md): Accepted class forms, native value parsing, units, importance and fixed utilities.
- [Extraction](https://css.master.co/reference/rules/extraction.md): Static candidate extraction, source boundaries, classification and shared source ownership.
- [Cascade layers](https://css.master.co/reference/rules/layers.md): Generated layer selection, native rule ownership, importance and rule ordering.
- [Variables and modes](https://css.master.co/reference/rules/modes.md): Token lookup, dependency delivery, inline substitution, inheritance and mode activation.
- [Named conditions](https://css.master.co/reference/rules/named-conditions.md): Every preset media and container condition, its expanded query and the scope it measures.
- [Selectors](https://css.master.co/reference/rules/selectors.md): Selector attachment, related elements, lists, literal encoding and specificity.

## Reference / Tokens
- [Color palette](https://css.master.co/reference/tokens/color.md): Every numbered palette step, fixed hue alias and other preset color token.
- [Color roles](https://css.master.co/reference/tokens/color-roles.md): Text, surface and line roles with one value for light and one for dark.
- [Container sizes](https://css.master.co/reference/tokens/container.md): Preset lengths for width, height, minimum and maximum sizes.
- [Token families](https://css.master.co/reference/tokens/families.md): Every preset token family: its class prefix, token namespace and native properties.
- [Font](https://css.master.co/reference/tokens/font.md): Font families, sizes and weights, all written as font-*.
- [Leading](https://css.master.co/reference/tokens/leading.md): Unitless line heights that scale with the font size.
- [Motion](https://css.master.co/reference/tokens/motion.md): Animation shorthands, duration values and easing curves.
- [Radius](https://css.master.co/reference/tokens/radius.md): The preset corner radius scale, for whole elements or single corners.
- [Shadow](https://css.master.co/reference/tokens/shadow.md): Layered elevation shadows, tuned for light and dark.
- [Spacing](https://css.master.co/reference/tokens/spacing.md): One spacing scale for padding, margin, gaps, insets and offsets.
- [Text](https://css.master.co/reference/tokens/text.md): Text treatments that set font size, line height and letter spacing together.
- [Tracking](https://css.master.co/reference/tokens/tracking.md): The preset letter-spacing scale.

## Reference / Tool
- [CLI commands](https://css.master.co/reference/tools/cli.md): Choose a command, check its file effects, and find complete options in CLI help and source.
- [MCP tools](https://css.master.co/reference/tools/mcp.md): Choose a tool, understand its file effects, and find the current protocol contract.

## Reference / Utility
- [Direct values](https://css.master.co/reference/direct-values.md): Pass one static number to a length or numeric property.
- [Grid tracks](https://css.master.co/reference/grid-tracks.md): Equal grid tracks and spans in one class.
- [Screen reader text](https://css.master.co/reference/sr-only.md): Hide text visually while keeping it in the accessibility tree.
- [Truncation](https://css.master.co/reference/truncation.md): Clip text to one line or a number of lines and end it with an ellipsis.