Set up Master CSS in React Router

Guide to setting up Master CSS in your React Router project.

If you don't have a React Router framework project, create one first.

Terminal

npx create-react-router@latest my-appcd my-app

Run the installer from the React Router project root. Static is the default: it scans complete class strings and emits ordinary CSS.

Terminal

npm create @master/css@rc -- --framework react-router --yes

Run the command to start the React Router dev server.

npm run dev

pnpm run dev

bun run dev

yarn run dev

Now style your first route module using Master CSS syntax.

localhost:5173

Hello World

app/routes/home.tsx

export default function Home() {  return (    <h1 className="m-2xl italic font-5xl font-heavy text-neutral">      Hello World    </h1>  )}