Tailwind vs CSS Modules: where the design scale lives

Tailwind and CSS Modules are not alternatives: one generates utilities, the other scopes stylesheets. The real choice is where the spacing and type scale lives, and who controls it as the project grows.

The adoption gap is wide: on 1 November 2026 the `tailwind-css` tag held 10,551 questions on Stack Overflow and `css-modules` 740, fourteen times fewer. The most voted CSS Modules question was read from the same API: 273 votes, about TypeScript failing to resolve the module.

Two problems, not two solutions

Where the value lives

Tailwind keeps the scale in one place: spacing, typography, colours and breakpoints become configuration variables. Whoever writes a component does not invent a `margin`, they pick a value from the scale. CSS Modules offers no such guarantee: the name is local and the value is free.

With CSS Modules, consistency depends on conventions and review. A file can define `padding: 13px` and nobody notices. With Tailwind `p-3` exists only if the scale defines it, and an off-scale value is visible in the markup.

The one-hour test

# quanti fogli CSS Modules ha il progetto
rg -n "\.module\.css" src | wc -l

# quanto CSS produce Tailwind dopo il tree-shaking
npx @tailwindcss/cli -i ./src/app.css -o ./dist/app.css --minify
wc -c ./dist/app.css

# la scala esiste una volta sola?
rg -n -- "--space-|--text-" src/app.css

Read the second number together with the first: if generated CSS grows while the CSS Modules files stay, you have two systems adding up. If the number stays low and the stylesheets shrink, the migration is working.

The combination that works

Tailwind for layout, spacing and states; CSS Modules for the parts that need real CSS: complex keyframes, multiple gradients, state selectors that utilities make unreadable. Pick that boundary once and write it down, or every developer decides for themselves.

The limit to write down

Named limitation of CSS Modules: it ships neither tokens nor a scale. Consistency stays a convention, and typing needs a declaration for `*.module.css` that TypeScript does not generate on its own. That is the reason behind the most voted question on the tag: 273 votes for a configuration error, not a styling one.

Licences and dependencies

Tailwind is MIT. CSS Modules is not a runtime: it is a specification implemented by the bundler or by `postcss-modules`, so it adds no licence to review. Either way the decision concerns the build process, not the legal contract.

Utilities live in /components/cat/tailwind, components with declared CSS in /components/cat/css and the copy-paste model in /components/lib/shadcn. For the utility model read what Tailwind CSS is, for tokens how to theme shadcn; the CSS framework comparison is in Tailwind vs Bootstrap.