Framework mode uses the React Router Vite plugin, so the styling story is mostly just Vite's styling story.
React Router does not have a separate CSS pipeline for Framework mode. In practice, there are three patterns that matter:
1. Import CSS as a side effect
2. Use the route module `links` export
3. Render a stylesheet `` directly
## Side-Effect CSS Imports
Because Framework mode uses Vite, you can import CSS files as side effects:
```tsx filename=app/root.tsx
import "./app.css";
```
```tsx filename=app/routes/dashboard.tsx
import "./dashboard.css";
```
This is often the simplest option. Global styles can be imported in `root.tsx`, and route or component styles can be imported next to the module that uses them.
## `links` Export
React Router also supports adding stylesheets through the route module `links` export.
This is useful when you want a stylesheet URL from Vite and need React Router to render a real `` tag for the route:
```tsx filename=app/routes/dashboard.tsx
import dashboardHref from "./dashboard.css?url";
export function links() {
return [{ rel: "stylesheet", href: dashboardHref }];
}
```
The `links` export feeds the [``][links-component] component in your root route. This is the React Router-specific styling API in Framework mode. For more on route module exports, see [Route Module][route-module].
## Direct `` Rendering
If you're using React 19, you can also render a stylesheet `` directly in your route component:
```tsx filename=app/routes/dashboard.tsx
import dashboardHref from "./dashboard.css?url";
export default function Dashboard() {
return (
<>
Dashboard
);
}
```
This uses React's built-in [``][react-link] support, which hoists the stylesheet into the document ``. That gives you another way to colocate stylesheet tags with the route that needs them.
## Everything Else
For CSS Modules, Tailwind, PostCSS, Sass, Vanilla Extract, and other styling tools, use the normal Vite setup for those tools.
See:
- [Vite CSS Features][vite-css]
- [Vite Static Asset Handling][vite-assets]
- [``][links-component]
[links-component]: ../api/components/Links
[react-link]: https://react.dev/reference/react-dom/components/link
[route-module]: ../start/framework/route-module
[vite-assets]: https://vite.dev/guide/assets.html
[vite-css]: https://vite.dev/guide/features.html#css