Tailwind CSS

About Tailwind CSS

Tailwind CSS is a utility-first CSS framework that provides low-level classes such as flex, pt-4, text-center, and rotate-90 for building custom designs directly within HTML markup, without writing separate CSS files. It supports responsive design through breakpoint prefixes, dark mode via a dark: prefix, container queries, CSS grid and 3D transform utilities, gradients, transitions and animations, and logical properties for handling multiple text directions. Theming is configured through CSS variables (an @theme block), and the framework uses CSS cascade layers to avoid specificity conflicts. Its color palette uses wide-gamut P3 colors.

The framework removes unused CSS at build time, with most projects producing under 10kB of CSS shipped to the client. It is used in production by companies including OpenAI, Shopify, Reddit, Rivian, Gumroad, Clerk, The Verge, TED, and NASA JPL.

Tailwind Plus is a separate paid offering of ready-made UI resources built by the Tailwind CSS team, including site templates built with React and Next.js, a library of over 500 responsive UI blocks, and a UI kit for building component systems with React and Tailwind CSS. Related open-source projects from the same creators include Headless UI and Heroicons.

Key features

• Utility-first CSS classes composed directly in HTML markup
• Responsive design utilities applied at specific breakpoints
• Dark mode support via a dark: variant prefix
• Automatic removal of unused CSS in production builds for minimal bundle size
• Customizable theming via CSS variables
• Container queries to adapt child elements to a container's size

Frequently asked questions