CSS Frameworks
Comparing CSS frameworks for modern web apps. Bundle size, customization approach, framework compatibility, dark mode, and how well LLMs generate code with each.
← Back to Reference HubUtility-first CSS framework. The dominant choice for modern React/Next.js projects.
- No opinionated component designs
- Tailwind v4: CSS-native, no tailwind.config.ts, 5x faster builds
- Arbitrary values with bracket syntax
- PurgeCSS built-in - only ship CSS you use
First-class support in Next.js. Each component gets a locally-scoped .module.css file.
- Zero runtime - compiles to hashed class names
- Full CSS syntax: selectors, media queries, animations
- Co-locate styles with components
- Works with any CSS preprocessor (Sass, PostCSS)
A collection of copy-paste components built with Tailwind and Radix UI primitives that you own.
- Components are copied into your codebase, not imported
- Full customization control
- Accessible: built on Radix UI headless primitives
- CLI: npx shadcn@latest add button installs a component (CLI v4, March 2026, adds --dry-run, --diff, --view)
Write CSS inside JavaScript. Dynamic styles based on props, strong TypeScript support.
- Dynamic styles based on props without className logic
- Full CSS syntax inside JavaScript
- Theme provider for design token propagation
Limitations: Runtime CSS generation adds hydration overhead. Not compatible with React Server Components. Out of favor in the App Router era.
Complete responsive CSS framework (latest stable v5.3.8, Aug 2025; v6 in active dev, no release date). Still widely used for enterprise and rapid prototyping.
- Complete component set: buttons, modals, tables, forms, navbar
- CSS variables-based theming in v5
- Pre-built responsive grid system
Limitations: Heavy bundle. Bootstrap sites have a recognizable look without significant customization.
| Capability | Tailwind | CSS Modules | Shadcn/ui | styled-components |
|---|---|---|---|---|
| React Server Components | Yes | Yes | Yes | No |
| Bundle size | Used classes only | Proportional | Used only | Runtime overhead |
| LLM code generation | Best | Good | Good | Good |
| Dark mode | dark: prefix | CSS variables | CSS variables | Theme provider |
Our Recommendation
Tailwind CSS v4 is the default for new Next.js projects - RSC-compatible and LLM training data advantage. Pair with Shadcn/ui for complex interactive components. CSS Modules for teams preferring conventional CSS. Avoid styled-components in new App Router projects.