Framework
One design language across every App Router route.
A Next.js app spreads UI across server and client components, layouts, and dozens of routes. Windcraft generates the Tailwind config and CSS variables they all share, so the design holds no matter who — or what — wrote the page.
Why App Router projects drift
Routes in Next.js are built in isolation, often by different people or AI tools on different days. Each layout and page reaches for its own spacing and color unless a single source defines them. With server and client components freely mixed, hard-coded styles slip in unnoticed, and by launch your routes no longer agree on what "primary" or "card padding" means.
How Windcraft works with Next.js
Windcraft owns your tokens and generates the outputs Next.js consumes: a tailwind.config.ts that extends the theme with your values, and a tokens.css of CSS variables you import once in the root layout. Every route reads those; the static analyzer flags anything hard-coded.
- Run npx windcraft init, then npx windcraft sync to generate tailwind.config.ts and tokens.css.
- Import tokens.css once in your root layout (app/layout.tsx).
- Build routes with the generated Tailwind theme — no ad-hoc hex or px.
- Run npx windcraft check to flag off-token styles before you commit.
Wire the generated tokens into the App Router root layout
// app/layout.tsx
import './tokens.css' // generated by `npx windcraft sync`
export default function RootLayout({ children }: { children: React.ReactNode }) {
return (
<html lang="en">
<body>{children}</body>
</html>
)
}FAQ
- Does this work with the App Router and Server Components?
- Yes. Windcraft generates plain CSS variables and a Tailwind config — both are framework-agnostic. Import tokens.css once in the root layout and every server and client component inherits the same values.
- Do I have to restructure my project?
- No. Windcraft writes to the files you point it at in .windcraft/config.json — typically your existing tailwind.config.ts and a tokens.css. You keep your routing and structure exactly as they are.
- How does dark mode work?
- The generated tokens.css emits variables under :root and a dark selector, so your existing Tailwind dark mode setup reads the right values without extra wiring.