Does Tailwind CSS work with the GOV.UK Design System?

Yes — Tailwind CSS works alongside the GOV.UK Design System. The GOV.UK Design System has its own CSS (govuk-frontend npm package) which applies styles to GOV.UK class names. Tailwind CSS adds utility classes for custom components that are not in the GOV.UK Design System. ClickMasters approach: install govuk-frontend, configure Tailwind to not purge govuk-* classes, and use Tailwind utility classes only for custom components. The NHS Design System works identically.

Does Styled Components work with Next.js App Router?

Styled Components (and other CSS-in-JS libraries with a JavaScript runtime) are incompatible with React Server Components in Next.js App Router. Server Components cannot include any JavaScript at runtime — CSS-in-JS libraries that inject styles at runtime will cause errors in Server Components. ClickMasters migrates Styled Components projects to Tailwind CSS or CSS Modules when adopting Next.js App Router. For projects that cannot migrate: Next.js Pages Router is still supported and works with Styled Components.

Tailwind Css Vs Css Modules Vs Styled Compone

Tailwind CSS vs CSS Modules vs Styled Components — UK (2025)

Updated: September 20259 min read

🇬🇧 UK💷 GBP📊 Comparison🔒 UK GDPR⚖️ UK Law

Direct Answer

Tailwind CSS is the right default for all new UK React projects in 2025: fastest development velocity, best WCAG compliance tooling (built-in contrast utilities, focus-visible utilities), excellent Next.js App Router support (zero CSS runtime overhead for Server Components), and the largest growing UK developer community. CSS Modules are right for teams migrating away from CSS-in-JS who want component scoping without a new paradigm. Styled Components are legacy for new projects. CSS framework choice affects WCAG accessibility compliance, NHS Design System integration, and developer productivity.

Factor	Tailwind CSS	CSS Modules	Styled Components
WCAG accessibility utilities	✅ focus-visible, sr-only, contrast-* built-in	Manual — implement yourself	Manual — CSS-in-JS approach
GOV.UK / NHS Design System	✅ Works alongside — utility-first compatible	✅ Compatible	Compatible but more complex
Next.js App Router (RSC)	✅ Zero runtime — CSS built at compile time	✅ Zero runtime	❌ CSS-in-JS runtime breaks RSC
UK GDPR data minimisation (no JS payload)	✅ Zero CSS runtime — no JS in production CSS	✅ Zero CSS runtime	Additional JS bundle for CSS runtime
Developer velocity	✅ Fastest — co-located styles	Moderate — separate files	Fast but verbose
Design token consistency	✅ tailwind.config design tokens	Custom properties — manual	Theme provider — good
Bundle size	✅ PurgeCSS removes unused — smallest	Per-component CSS files	Additional CSS-in-JS runtime
UK developer familiarity	✅ Most common — rapidly growing	Common	Declining for new projects
ClickMasters default	✅ All new UK React/Next.js projects	Migration from Styled Components	Not recommended for new projects