React SPA (Vite)

This guide walks through setting up NemCSS in a React SPA project using Vite.

Step 1: Create a React + Vite project

npm

npm create vite@latest my-app -- --template react
cd my-app

pnpm

pnpm create vite@latest my-app -- --template react
cd my-app

yarn

yarn create vite my-app --template react
cd my-app

Step 2: Install @nemcss/vite

npm

npm install -D @nemcss/vite

pnpm

pnpm add -D @nemcss/vite

yarn

yarn add -D @nemcss/vite

bun

bun add -D @nemcss/vite

Step 3: Add the plugin to your Vite config

// vite.config.js
import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'
import { nemcss } from '@nemcss/vite'

export default defineConfig({
  plugins: [react(), nemcss()],
})

Step 4: Initialize nemcss

npx

npx nemcss init

pnpm dlx

pnpm dlx nemcss init

yarn dlx

yarn dlx nemcss init

This creates nemcss.config.json and a design-tokens/ folder with example token files.

Step 5: Configure content paths

Edit nemcss.config.json to point at your React source files:

{
  "content": ["src/**/*.tsx", "src/**/*.jsx", "src/**/*.ts"],
  "tokensDir": "design-tokens"
}

Step 6: Add @nemcss base; to your CSS

Open src/index.css and add the directive at the top:

@nemcss base;

Make sure src/index.css is imported in src/main.jsx (it is by default in the Vite React template):

// src/main.jsx
import './index.css'

Step 7: Use the generated classes

// src/App.jsx
export default function App() {
  return (
    <main className="p-lg">
      <h1 className="text-default">Hello NemCSS</h1>
      <p className="text-muted">Styled with design tokens.</p>
    </main>
  )
}

Step 8: Start the dev server

npm

npm run dev

pnpm

pnpm dev

yarn

yarn dev

HMR is enabled by default. Your CSS updates without a full page reload when you change a token file, your config, or any content file.