Tailwind CSS is a utility-first CSS framework that provides low-level utility classes for building custom designs directly in HTML. Instead of writing custom CSS or using pre-built components, you compose designs by applying utility classes like flex, pt-4, text-center, and rotate-90 directly to HTML elements.
The approach is deliberately different from component frameworks like Bootstrap. Rather than providing pre-styled components that you customize, Tailwind provides building blocks that you compose. This gives more design flexibility but requires more upfront decisions. The PurgeCSS integration ensures that only the classes you actually use are included in the production build, keeping file sizes small.
For teams building custom designs, Tailwind eliminates the context switching between HTML and CSS files. Styles are applied directly in the markup, which makes it faster to iterate on designs and easier to understand what styles are applied to a given element without hunting through CSS files.
For design systems work, Tailwind's configuration file serves as a single source of truth for design tokens colors, spacing, typography, and breakpoints. Changes to the config propagate consistently across the entire codebase, which is harder to achieve with custom CSS.
Tailwind CSS is free and open source. Tailwind UI, the official component library, is a one-time purchase starting at 149 dollars for personal use.