Tailwind CSS v4 scaling: from a single page to a million
Horizontal scaling strategy for Tailwind CSS v4 across huge page counts and high concurrency.
On this page
Quick answer
What is the biggest config difference between Tailwind v4 and v3?
v4 drops tailwind.config.js and declares themes entirely in CSS via @theme. Upgrading requires deleting the old config and installing @tailwindcss/vite — otherwise the build fails with a missing module.
Machine-readable page data: /data/tailwindcss-scaling.json
In-depth analysis
Tailwind CSS v4 replaces the bulky JavaScript config file with a CSS-first @theme directive, improving both build speed and control. Scaling is data-driven templates plus edge delivery — full SSG pre-render hands peak traffic to cache.
/* src/styles/global.css — Tailwind v4 CSS-first config, no tailwind.config.js needed */
@import 'tailwindcss';
@theme {
--color-brand: oklch(0.62 0.19 265);
--font-sans: 'Inter', system-ui, sans-serif;
}Tailwind CSS v4 Scaling · Key takeaways
- Pages driven by a single data source
- Build output fully static
- Structured data covers every page
- Edge cache load-tested
FAQ & pitfalls
How do I long-cache Tailwind v4 build output at the edge?
The compiled CSS uses content-hashed filenames with immutable long cache. HTML references the new hash automatically, so no manual cache busting is required.
Explore the hub
See all 5 guides in Traffic & SEOSame category as this article, sorted across the codebase.
AI Search scaling: from a single page to a million
Horizontal scaling strategy for AI Search across huge page counts and high concurrency.
Astro scaling: from a single page to a million
Horizontal scaling strategy for Astro across huge page counts and high concurrency.
Cloudflare Pages scaling: from a single page to a million
Horizontal scaling strategy for Cloudflare Pages across huge page counts and high concurrency.
GEO in practice: optimizing for AI search engines and LLMs
How to embed canonical Schema.org structured data so large language models and AI search engines can pick up your pages precisely.
Share & save
What readers are asking
Questions that keep coming back in reader feedback, already answered.
- 01
Why is my custom Tailwind v4 brand colour not applied?
Colours must be declared in @theme (for example --color-brand). A missing @tailwindcss/vite plugin, or a leftover v3 config, makes bg-brand silently render nothing.
See the full guide → - 02
Why is my Astro component's interactivity not working?
Components ship as zero-JS HTML by default, so an interactive one needs a client:* directive (client:load, client:visible, …). Without it the script is never bundled into the page.
See the full guide → - 03
Why are _headers / _redirects not taking effect?
Both files must sit at the root of the output directory (dist/); anything under src/ is never uploaded. A purely static project should not add _worker.js either — that gives up the zero-cold-start advantage.
See the full guide →