Set up Master CSS in React

Guide to setting up Master CSS in your React project.

Master CSS Progressive Rendering scans the rendered HTML ahead of time, server-side or at build time, generates the corresponding CSS rules for each page, and lazy loads the runtime engine to keep track of the dynamic class names.

Faster page loading

Non-rendering-blocking internal CSS and lazy loading

Fully automatic

Capture any program-generated class names

CSS encapsulation

Only ship the page-used CSS instead of the whole site

https://react.pr.beta.css.master.co

Quick start

This is a simple Vite example of React server-side rendering.

A full-stack framework, such as Next.js, Remix, etc., is recommended for better application performance and experience.

npx degit master-co/css/examples/react-with-progressive-rendering my-project
cd my-project
npm install @master/css.react@beta
npm install
npm run dev

Are you building a React single-page application (SPA)? Use the handy Master CSS Runtime Rendering in React.