Tailwind v4 starter for Next.js 16 with oklch theme tokens
Tailwind v4 changed enough about how Tailwind is configured that a 'v4 starter' is not just a v3 starter with a version bump. The config moved into CSS, the engine is faster, and color tokens can use modern color spaces like oklch without polyfills. A boilerplate that is actually built around v4 looks structurally different from one that survived an upgrade.
Why oklch instead of hex or HSL
oklch is a perceptually uniform color space: a 10% lightness shift in oklch looks like a 10% lightness shift to the human eye. Hex and HSL do not have that property, the same numeric step can look subtly different across hues, which is why hand-tuned palettes often feel inconsistent.
BoilerlyKit's Starter, AI, and Core templates define every color token in oklch in `globals.css`. Light and dark palettes each get their own block. Every component reads from semantic tokens (`--primary`, `--muted`, `--destructive`) rather than from raw color values, so theming the whole site is a token edit, not a component-by-component refactor.
:root {
--background: oklch(1 0 0);
--foreground: oklch(0.145 0 0);
--primary: oklch(0.65 0.18 250);
--primary-foreground: oklch(0.985 0 0);
--muted: oklch(0.97 0 0);
--muted-foreground: oklch(0.556 0 0);
}
.dark {
--background: oklch(0.145 0 0);
--foreground: oklch(0.985 0 0);
--primary: oklch(0.72 0.18 250);
}CSS-first config, what changed and what it means
In v3, the source of truth was `tailwind.config.ts`. In v4, the source of truth is your CSS, design tokens, breakpoints, and theme extensions live alongside the styles they describe. The boilerplates lean into this: `globals.css` is the file you edit to rebrand, not a TypeScript config plus a CSS file plus a theme provider.
The trade-off is that v3 plugins that expected the JS config API need a v4-shaped equivalent. BoilerlyKit's Starter, AI, and Core ship with the plugin set already updated; you do not have to debug v3-versus-v4 plugin compatibility yourself.
shadcn/ui on Tailwind v4
shadcn/ui is the component layer across all three v4 templates. The components are copied into the repo (not installed as a dependency), so they are yours to edit. The v4 versions of each component read from the oklch token set; if you change `--primary`, every shadcn button, badge, and focus ring updates.
Radix primitives underpin the interactive components (Dialog, Dropdown, Tooltip), that part is unchanged across v3 and v4. The Tailwind-specific work is in the class names and the theme bindings, not in the underlying primitives.
Why SaaSForge Agency is on v3 (and that is fine)
SaaSForge Agency is on Tailwind v3, not v4. The reason is operational: Directus's admin theming, plus the agency template's color-customizer flow for client white-labeling, integrates more cleanly against the v3 config layout. That is a deliberate decision documented in the repo, not an oversight.
If you want a Tailwind v4 marketing site for an agency, the cleanest path today is to start from Starter (v4) and add a CMS yourself, or use Agency on v3 and accept the version gap. Both options are honest; a v4 Agency upgrade is on the roadmap when the integration shape settles.