Tailwind CSS Framework

Tailwind CSS is a free and open-source, utility-first CSS framework for rapidly building custom user interfaces without leaving HTML. Created by Adam Wathan (co-founder of Tailwind Labs, a Canadian company based in Hamilton, Ontario) in 2017, Tailwind CSS has become one of the most popular CSS frameworks, used by GitHub, Netflix, OpenAI, and many others. Key features: utility-first: instead of pre-built components (like Bootstrap's .btn or .card), Tailwind provides low-level utility classes (bg-blue-500, text-center, rounded-lg, p-4, flex, items-center) that can be composed directly in HTML to build any design. This eliminates context-switching between HTML and CSS files. Configuration: the tailwind.config.js file customizes the design system, including colors (custom color palettes via the theme.extend.colors key), spacing scale, typography (font sizes, line heights), breakpoints, and plugins. Purge/JIT: Tailwind's Just-In-Time compiler (since v3, default in v3.1+) scans source files and generates only the CSS classes actually used, resulting in CSS files as small as 5-10 KB in production. This eliminates the need to manually purge unused styles. Responsive design: built-in responsive modifiers (sm:, md:, lg:, xl:, 2xl:) apply styles at different breakpoints without media queries. Dark mode: dark: variant for dark mode styling, configurable via class strategy or media query strategy. State variants: hover:, focus:, active:, disabled:, group-hover:, and custom variants for styling interactive states. Arbitrary values: use arbitrary CSS values with square brackets (w-[300px], text-[#1da1f2], grid-cols-[1fr_2fr]). Plugin ecosystem: official plugins for forms, typography, aspect-ratio, line-clamp, and community plugins. Prettier plugin: automatic class sorting. Tailwind UI: commercial component templates. PostCSS-based. JavaScript/TypeScript. MIT.