What Is Tailwind CSS?
Tailwind CSS is a utility-first CSS framework — instead of writing custom CSS classes, you compose styles directly in your HTML using small, single-purpose utility classes.
Traditional CSS frameworks (Bootstrap) give you pre-built components with fixed styles. Tailwind gives you utilities — small classes like flex, mt-4, text-white, bg-gray-900 — that you compose directly in markup.
Tailwind vs. writing custom CSS:
<!-- Custom CSS approach -->
<button class="primary-button">Submit</button>
<!-- Tailwind approach -->
<button class="bg-white text-black font-mono text-xs font-bold uppercase tracking-widest px-8 py-4 rounded hover:bg-gray-100 transition-colors">
Submit
</button>
The Tailwind version looks verbose, but you never leave the HTML file, there are no naming conflicts, unused styles are purged at build time, and the final CSS is typically 5–20KB.
Why Tailwind is popular for React/Next.js:
- Co-location: styles and markup are in the same file
- No CSS specificity conflicts — utils have no side effects
- Design tokens built-in: spacing scale, color palette, typography scale
- PurgeCSS integration: only the classes you use ship to production
Tailwind in production: Paired with shadcn/ui (component primitives built on Radix UI), Tailwind provides a full design system foundation — accessible components, dark mode, and consistent spacing — without a separate UI library dependency.
When Tailwind is not the right choice: Very large teams with dedicated designers who want strict component boundaries may prefer CSS Modules or styled-components. For most product teams, Tailwind is faster.