Tailwind CSS

Tailwind CSS is a utility-first framework that inverts traditional CSS architecture: rather than writing custom stylesheets, developers compose pre-built utility classes (flex, pt-4, text-center, rotate-90) directly in HTML markup. This approach accelerates development by eliminating context switching between HTML and CSS files, reduces naming decisions, and simplifies refactoring since styles are co-located with markup. The framework provides utilities for flexbox layouts, responsive typography, animations, gradients, shadows, filters (blur, brightness, grayscale), and advanced CSS features (grid, container queries, logical properties for LTR/RTL support). Responsive design is built-in: prefixes (sm, md, lg, xl, 2xl) target breakpoints; developers write mobile-first CSS by default. Dark mode support uses dark: prefixes to enable theme switching without separate stylesheets. CSS Grid utilities enable complex layouts without manual grid definitions. Transitions and animations are pre-built; developers compose animations without touching @keyframes. The framework generates only CSS for utilities actually used in markup, shipping production builds under 10 kB (compared to megabyte-scale CSS frameworks). Customisation occurs via configuration files (tailwind.config.js) defining custom colours, spacing, breakpoints, and theme extensions without CSS editing. Tailwind Labs also offers Tailwind Plus, a paid product (£49/month) providing pre-built UI components, templates, and design system starter kits accelerating design system adoption. The core Tailwind CSS framework is free and open-source under MIT licence. It has become the industry default for modern web development, adopted by Vercel (Next.js), Remix, SvelteKit, and countless projects. Competitors (Bootstrap, Foundation) use class-based approaches; Windi CSS offers similar utility-first philosophy with runtime compilation.