Tailwind CSS

Tailwind CSS is a utility-first CSS framework created by Adam Wathan and released in 2017. Rather than providing pre-built components (like Bootstrap or Material UI), Tailwind gives you a comprehensive set of low-level utility classes — flex, pt-4, text-gray-900, rounded-lg, hover:bg-blue-500 — that you compose directly in HTML to build any design without leaving your markup.

The utility-first philosophy means each class does one thing: p-4 adds 4 units of padding, text-xl sets the font size, bg-white sets the background. Building a UI is a matter of combining these classes rather than writing CSS. Proponents argue this eliminates the need for naming conventions (BEM, OOCSS), reduces style conflicts, and dramatically speeds up iteration.

The JIT (Just-In-Time) engine — the default since Tailwind v3 and rebuilt from scratch in v4 — scans your source files and generates only the CSS classes you actually use. A large project with thousands of utility classes in source still ships a production stylesheet of a few kilobytes. Arbitrary values (text-[#1a1a1a], w-[137px]) extend the system without adding CSS bloat.

Tailwind v4 (released January 2025) rewrote the engine in Rust, delivering dramatically faster build and rebuild times. It also moved configuration from tailwind.config.js to a CSS-first @theme directive, eliminating the JavaScript config file for most use cases.

Design system scales are built in: an opinionated, harmonious set of spacing values, a curated color palette with shades from 50–950, type scale, shadow levels, border radii, and z-index values. Teams adopt a consistent visual language automatically — arbitrary one-off values are possible but the defaults discourage them.

Responsive design is handled with responsive prefixes (sm:, md:, lg:, xl:, 2xl:) that scope classes to breakpoints. Dark mode support is built in via dark: prefix. State variants (hover:, focus:, active:, group-hover:, peer-focus:) handle interactive states without custom CSS.