Overview
Get started with Master CSS
This section walks you through learning and starting to use Master CSS.
Getting Started
Introduction to Master CSS
Learn the Master CSS mental model, class syntax, rendering modes, and design-system workflow.
Installing Master CSS
Install Master CSS with Vite, generate CSS from class names, and start styling in a few steps.
Compatibility
Learn browser support, vendor prefixes, modern CSS feature strategy, and how Master CSS coexists with third-party styles.
Language Service for Master CSS
Enhance the developer experience in code editors or IDEs with syntax highlighting, code completion, and more.
Code Linting for Master CSS
An ESLint integration for enforcing team coding styles, making your template markup more organized, and catching syntax errors early.
Migrating to Master CSS
Migrate your CSS technology to Master CSS and learn the differences and benefits.
Syntax Tutorial
Style Declarations
Learn how Master CSS turns class names into CSS declarations, values, units, functions, variables, and shorthands.
State Selectors
Learn how to append selectors for hover, focus, attributes, descendants, pseudo-elements, and custom states.
Conditional Queries
Learn how to append at-rule conditions for breakpoints, modes, media types, container queries, supports checks, and ranges.
Fundamentals
Cascade Layers
Understand how theme, base, defaults, components, and utilities layers control style priority.
Monorepo
A guide to setting up Master CSS in a modern repository.
Rendering Modes
Understand how the rendering modes of Master CSS work and enhance your website's performance.
Responsive Design
Adapt your user interface to different devices with flexible responsive syntax.
Reusing Styles
Decide when to keep utilities in markup, move values into theme tokens, or create reusable component classes.
Customizing your theme
Customize a Master CSS theme with @theme tokens, modes, breakpoints, container sizes, motion, and project-level CSS vocabulary.
View Transitions
Create state and page transitions with the browser View Transition API and Master CSS syntax.
Build & Delivery
Optimizing critical resources
The runtime engine plays a crucial role in the initial display of a page.
Native CSS pruning
Understand how Master CSS prunes unused native CSS class rules from managed stylesheets.
Scanning latent classes
Understand how Master CSS finds possible class names in source files and turns visible usage into generated CSS.
Preventing flash of unstyled content
Improve the page loading experience and ensure seamless rendering of content.
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:
- 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.
- On the right side, you'll see a table of contents that makes navigating between page sections easier.
- Click the search box on the left side or use the shortcut Ctrl + K or ⌘ Command + K to search the entire site.
- Every class name in the document can preview the generated CSS rules by hovering.
<div class="hidden@<sm&>md">Try hovering over the class</div>
Try Master CSS online
You can use the official Master CSS 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: Ask questions and share insights.
- Discord: Join real-time conversations with humans.
- Twitter: Stay updated on Master CSS
We're here to support your Master CSS journey!