Skip to content
Devgo

Tailwind CSS

A utility-first CSS framework. Instead of writing custom CSS classes, you compose utility classes (text-sm, flex, p-4) directly in HTML. Fast to build, consistent, no naming CSS classes. The most popular CSS approach in modern frontend. Pairs with any framework.

Created by

Adam Wathan · Created Tailwind CSS in 2017

Website X
When to use
  • Any web project wanting fast, consistent styling.
  • Teams wanting to avoid CSS naming debates.
  • Component libraries.
When not to
  • Projects where designers write CSS (they may prefer custom CSS).
  • Tiny projects where plain CSS is simpler.

Definition

Tailwind provides low-level utility classes (px-4, text-lg, flex, rounded-lg) that you combine in to build designs. No custom files needed. The JIT compiler generates only the utilities you use. Configurable design tokens (colors, spacing, fonts).

Why it exists

Writing custom class names and files is slow and inconsistent. Tailwind gives a constrained set of utilities that compose into any design, with consistent spacing/colors and no naming debates.

How it works

Install Tailwind, configure content paths. Use utilities in /JSX (className='flex gap-4 p-4'). The JIT compiler scans your files and generates only used . Customize via tailwind.config. Dark mode via dark: variant. Responsive via sm:/md:/lg: prefixes.

Scaling limits

gets verbose with many utility classes. Learning the utility names takes time. Not everyone likes utility-first. Custom designs need config.

Cost shape

Free and open source.

Alternatives

  • CSS Modules — Scoped custom , more files, more naming.
  • Plain CSS — Full control, more work.

Failure modes

  • Verbose className strings.
  • Utility name memorization.
  • Hard to read markup with many classes.

, , ,