npmBeginner-friendly

tailwindcss

Utility-first CSS framework — compose designs directly in markup with small, single-purpose class names.

cssstylingutilitydesignfrontend

The Problem

Writing CSS means constantly context-switching between HTML and CSS files, naming things (what do you call this div?), and fighting specificity wars. Component-scoped CSS still means maintaining a separate styling system. Designs drift as CSS grows.

Mental Model

Tailwind replaces CSS files with a vocabulary of utility classes directly in your HTML. Instead of `.card { padding: 1rem; border-radius: 0.5rem; }` you write `class='p-4 rounded-lg'`. The design system (spacing, colors, typography) is defined once in config — every class enforces it.

60-second start

Install Tailwind CSS v4 in a Next.js project

npm install tailwindcss @tailwindcss/postcss
export default { plugins: { '@tailwindcss/postcss': {} } }
@import 'tailwindcss';
<button className='bg-indigo-600 hover:bg-indigo-700 text-white font-semibold px-4 py-2 rounded-lg transition-colors'>
  Click me
</button>

Use it when

Any web project where you control the markup. Especially powerful with component frameworks (React, Vue, Svelte). Rapid prototyping, design systems, teams that want consistency without writing CSS.

Skip it when

When you don't control the HTML (CMS-generated content). Projects with existing CSS codebases where a migration isn't worth it. Developers who strongly prefer semantic CSS.

Alternatives

CSS ModulesScoped CSS files without the utility class approach. Less opinionated.

styled-componentsCSS-in-JS, keeps styles co-located with components.

UnoCSSTailwind-compatible utility engine but faster and more customizable.

BootstrapComponent-first, pre-styled. Faster for prototypes, less flexible for custom designs.

Ready to explore the full API?

See every class, function, and relationship in an interactive graph.