Integrations
Set up Master CSS in TanStack Start
Guide to setting up Master CSS in your TanStack Start project.
TanStack Start can use Master CSS through its Vite or Rsbuild build path. Use the setup that matches the build config in your project.
Create a project
If you don't have a TanStack Start project, create one first.
npx @tanstack/cli@latest createcd my-appInstall Master CSS
Install the package pair for the build tool used by the project.
npm install @master/css@rc @master/css.vite@rcVite setup
Use @master/css.vite in the TanStack Start Vite config.
import { defineConfig } from 'vite'import { tanstackStart } from '@tanstack/react-start/plugin/vite'import react from '@vitejs/plugin-react'import masterCSS from '@master/css.vite'export default defineConfig({ plugins: [ tanstackStart(), masterCSS({ mode: 'static' }), react() ]})Rsbuild setup
For the Rsbuild variant, install @master/css.webpack instead of @master/css.vite.
npm install @master/css@rc @master/css.webpack@rcRegister the plugin through Rsbuild's tools.rspack hook.
import { defineConfig } from '@rsbuild/core'import { tanstackStart } from '@tanstack/react-start/plugin/rsbuild'import MasterCSSPlugin from '@master/css.webpack'export default defineConfig({ plugins: [ tanstackStart() ], tools: { rspack(config) { config.plugins ||= [] config.plugins.push(new MasterCSSPlugin({ mode: 'static' })) return config } }})CSS entry
Create a shared stylesheet entry and import it from the root route.
@import '@master/css';import '../styles/app.css'import { createFileRoute } from '@tanstack/react-router'export const Route = createFileRoute('/')({ component: Home})function Home() { return ( <h1 className="italic m:2xl text:neutral font:5xl font:heavy"> Hello World </h1> )}