Tailwind CSS
Last reviewed
May 2, 2026
Sources
24 citations
Review status
Source-backed
Revision
v1 ยท 3,649 words
Improve this article
Add missing citations, update stale details, or suggest a clearer explanation.
Suggest edit
CtrlK
Last reviewed
May 2, 2026
Sources
24 citations
Review status
Source-backed
Revision
v1 ยท 3,649 words
Add missing citations, update stale details, or suggest a clearer explanation.
Tailwind CSS is an open-source utility-first CSS framework for building user interfaces. It was created by Adam Wathan and first released as version 0.1.0 on November 1, 2017. Tailwind provides low-level utility classes (such as flex, pt-4, text-center, bg-blue-500) that map directly to single CSS declarations, and developers compose these classes inline in HTML to build custom designs without writing traditional CSS rules. The framework is maintained by Tailwind Labs, a company Wathan founded with collaborators Steve Schoger, Jonathan Reinink, and David Hemphill.
Tailwind has become a standard styling layer in the modern JavaScript ecosystem. By 2025 it had passed Bootstrap as the most popular CSS framework in the State of CSS survey, with 75% usage among respondents who answered the framework question. The library hits roughly 47.7 million weekly downloads on npm and the GitHub repository has more than 93,000 stars. Tailwind is also the de facto styling system for AI-generated frontend code: Vercel's v0 defaults to Tailwind plus shadcn/ui, and tools like Lovable, bolt.new, Cursor, and Windsurf generate Tailwind output by default. Models such as Claude and GPT-4 reach for Tailwind in unconstrained UI prompts because Tailwind class names appear in nearly every modern React tutorial in the training data.
| Type | Utility-first CSS framework |
| Created by | Adam Wathan, Jonathan Reinink, David Hemphill, Steve Schoger |
| Maintained by | Tailwind Labs |
| Initial release | November 1, 2017 (v0.1.0) |
| Stable release | v4.x series (first released January 22, 2025) |
| Written in | TypeScript and Rust (Oxide engine, since v4) |
| License | MIT |
| Repository | github.com/tailwindlabs/tailwindcss |
| npm package | tailwindcss |
| Weekly npm downloads | ~47.7 million (2026) |
| GitHub stars | 93,000+ (2026) |
| Website | tailwindcss.com |
Tailwind grew out of work Adam Wathan was doing on a side project called KiteTail, an app for sharing articles within teams. Around 2015 Wathan started writing a small set of utility classes for KiteTail rather than naming components in the conventional CSS way. He had been writing about the utility-first approach on his blog since at least 2017, and the article "CSS Utility Classes and "Separation of Concerns"" laid out the philosophy that would underpin the framework.
The shift from a private utility set to a public framework came when Jonathan Reinink wanted to use the same approach on a SaaS redesign. Building utilities that worked across two unrelated designs (KiteTail and Reinink's project) forced the abstractions to be more general. Wathan and Reinink worked through mid-2017 to make the codebase usable as a public package. David Hemphill joined the early development and Steve Schoger contributed design guidance.
The first public version, 0.1.0, shipped on November 1, 2017 (Halloween night). Wathan announced it on Twitter with the message "Holy smokes @tailwindcss 0.1.0 has arrived!" The name came from running "tail*" through onelook.com.
After eighteen months of 0.x releases, Tailwind CSS v1.0 was released on May 13, 2019. The 1.0 release stabilized the configuration API in tailwind.config.js, polished the default color palette, and fixed many of the rough edges from the 0.x line. By this point Wathan and Schoger had also published the design book Refactoring UI, which sold strongly enough that Wathan went full-time on Tailwind work.
Tailwind CSS v2.0 was released on November 18, 2020. The release expanded the default color palette from 10 colors with 9 shades each (90 values) to 22 colors with 10 shades each (220 values), adding an extra light "50" shade for every color. It introduced first-class dark mode support through the dark: variant, which lets developers write classes like dark:bg-black that apply only when the user prefers a dark color scheme. v2.0 also raised the minimum supported browser baseline to evergreen browsers and required PostCSS 8.
In March 2021 Tailwind shipped a separate package called @tailwindcss/jit, which compiled CSS on demand rather than generating every possible utility upfront and tree-shaking the unused ones. The JIT engine cut full-build times from several seconds to under a second on typical projects, and it unlocked features that were impossible under the old model: stackable variants (md:dark:hover:bg-red-500), arbitrary values (bg-[#1da1f2], top-[117px]), and arbitrary properties.
The JIT engine was offered as opt-in throughout the v2.1 to v2.x line. With Tailwind CSS v3.0 in December 2021, JIT became the default and only mode. v3.0 also expanded the gray palette to five named scales (slate, gray, zinc, neutral, stone), added a colors API exposing the full default palette, and shipped per-side border colors and an extended set of variants.
Work on a successor engine, codenamed Oxide, was announced in 2024. Oxide rewrote the most expensive parts of Tailwind in Rust and integrated Lightning CSS (also written in Rust) as the parser and transformer. Tailwind CSS v4.0 shipped on January 22, 2025. According to the official release post, full builds dropped from 378ms to 100ms on the Tailwind website project, and incremental rebuilds with new CSS dropped from 44ms to about 5ms, putting incremental builds roughly 100 times faster than v3.
v4 also moved configuration from tailwind.config.js into the CSS file itself, using the @theme at-rule. A minimal v4 setup no longer needs a JavaScript config file or PostCSS plugins for things like autoprefixer and postcss-import; Lightning CSS handles those tasks. v4 ships first-class plugins for Vite and PostCSS plus a standalone CLI.
Tailwind Labs is the company Adam Wathan founded around the framework. Wathan has written publicly about the business hitting more than $4 million in revenue within two years of going full-time on it, primarily from the commercial Tailwind UI product. The team is small and distributed, with members including Steve Schoger (design), Jonathan Reinink, and several engineers brought on after 2020. The company maintains the open-source framework, the Tailwind UI component marketplace, the Headless UI accessibility primitive library, the Heroicons icon set, and the Catalyst application UI kit.
| Version | Release date | Notable changes |
|---|---|---|
| 0.1.0 | November 1, 2017 | First public release |
| 1.0 | May 13, 2019 | Stable API, polished defaults |
| 1.2 | February 2020 | New color palette options, transitions, transforms |
| 2.0 | November 18, 2020 | 220-color palette, native dark mode, IE drop |
| 2.1 | April 2021 | Opt-in JIT engine via the JIT package |
| 3.0 | December 9, 2021 | JIT default, arbitrary values, expanded grays |
| 3.3 | March 2023 | ESM/TS config, line-height shorthand, extra colors |
| 3.4 | December 2023 | Dynamic viewport units, subgrid, balance text |
| 4.0 | January 22, 2025 | Oxide engine, CSS-first config, Lightning CSS |
| 4.1 | April 2025 | Text shadows, masks, additional v4 utilities |
The core idea is that styling should be done with small, composable utility classes applied directly to HTML, not with named component classes that abstract over CSS. A button in the conventional approach might be <button class="btn btn-primary">, with btn and btn-primary defined in a separate stylesheet. In Tailwind that same button is something like <button class="bg-blue-500 hover:bg-blue-700 text-white py-2 px-4 rounded">. The styles travel with the markup.
This flips the traditional CSS guidance about "separation of concerns," and Wathan's blog post on the topic argues the conventional separation was always a fiction since CSS and HTML are deeply coupled at the level of class names. Two practical effects fall out of the utility-first approach. First, since utility classes are reusable and pre-existing, developers do not invent new class names per component, which removes a major source of CSS naming churn. Second, the bundle size grows with the vocabulary of utilities a project actually uses, not with the number of components, so larger projects often produce smaller CSS than they would with hand-written component CSS.
The trade-off, which Tailwind critics often point to, is that markup becomes long and visually noisy. A complex component can carry dozens of class tokens. The Tailwind team's answer is component extraction: once a markup pattern repeats, you extract it into a component in your framework of choice (a React component, a Vue.js single-file component, a Blade partial, etc.), and the utility soup is hidden inside that component.
Until v4, every Tailwind project had a tailwind.config.js file at the project root that controlled the design tokens (colors, spacing scale, font families, breakpoints, container queries) and the content paths to scan for class usage. The configuration is merged into a default theme, and the build step turns each utility into a CSS rule using values from that theme.
v4 moved the canonical configuration into CSS via @theme at-rules, so the tokens live next to the styles that consume them. A v4 stylesheet might begin with:
@import "tailwindcss";
@theme {
--color-brand: oklch(0.72 0.18 250);
--font-display: "Inter Variable", sans-serif;
}
v4 still supports a JavaScript config for projects that need it, but the recommended setup is CSS-first.
Utilities can be prefixed with variants such as hover:, focus:, disabled:, breakpoint prefixes (sm:, md:, lg:, xl:, 2xl:), dark: for dark mode, and group-hover: or peer-checked: for relational states. Variants stack. md:dark:hover:bg-red-500 is one rule that fires on screens at the md breakpoint or wider, when the user prefers a dark theme, while the cursor is hovering over the element. The Tailwind compiler understands the syntax directly, so any combination is valid as long as the utility itself exists.
The Just-in-Time compiler scans configured content files (HTML, JSX, TSX, Vue, Svelte, PHP, etc.), extracts every candidate class string it finds, and emits CSS rules only for the utilities actually used. The scan is regex-based by default, which is why Tailwind warns against constructing class names dynamically through string concatenation: a class that never appears as a complete literal in the source will not be emitted.
Oxide, in v4, replaces the JIT scan and rule generation with Rust-based code paths. Lightning CSS handles parsing, vendor prefixing, modern CSS down-leveling, and minification. The PostCSS pipeline that v3 relied on is no longer required; v4 ships a Vite plugin (@tailwindcss/vite), a PostCSS plugin for projects that still need it, and a standalone CLI binary distributed via Bun.
Dark mode shipped in v2 with two strategies: media, which reacts to the prefers-color-scheme: dark user agent preference, and class, which switches when a dark class is present anywhere up the ancestor tree. The class strategy is what most apps with a manual theme toggle use, since it lets the application persist the user's choice in storage and apply it deterministically.
Tailwind exposes a plugin API that can register new utilities, components, variants, and base styles. Official plugins include @tailwindcss/forms (resets and base styles for form controls), @tailwindcss/typography (the prose utility for long-form Markdown content), @tailwindcss/aspect-ratio (largely deprecated since native CSS aspect-ratio shipped), and @tailwindcss/container-queries. The plugin ecosystem outside the official set is significant; npm has thousands of packages tagged with tailwindcss-plugin.
Tailwind UI is a paid component marketplace from Tailwind Labs. It sells production-ready React, Vue, and HTML component snippets that the Tailwind team has designed and built. The product was the original revenue source for the company and remains the main commercial product. Pricing as of 2025 was a one-time purchase for lifetime updates, and the catalog includes application UI components, marketing components, ecommerce components, and full templates such as Spotlight (a personal site template) and Catalyst.
Headless UI is an unstyled component library released by Tailwind Labs in 2020 for React and Vue. It provides accessibility-correct primitives (Menu, Dialog, Listbox, Combobox, Switch, Tabs, RadioGroup, Disclosure) without any visual styling, on the assumption that the consumer will style them with Tailwind. v2.0 of the React library, released in September 2024, added new components and rewrote internals around React's useId and the modern controllable component pattern.
Heroicons is a free SVG icon set designed by Steve Schoger. v1 launched alongside Tailwind UI in 2020. v2, released in September 2022, was a complete redraw at three sizes (24x24 outline, 24x24 solid, 20x20 solid) plus a 16x16 "Micro" set added in December 2023. Heroicons is MIT-licensed and ships as React, Vue, and SVG packages.
Catalyst is an application UI kit from Tailwind Labs, released in 2024. Unlike the typical Tailwind UI offering, Catalyst is distributed as source code that consumers paste into their projects, rather than as components imported from a library. The pattern matches what shadcn/ui pioneered: components live in your repository, you own them, and you customize them by editing the files directly.
The Tailwind ecosystem includes a large set of third-party component libraries:
| Library | Approach | License |
|---|---|---|
| shadcn/ui | Copy-paste components on top of Radix UI primitives | MIT |
| daisyUI | Plugin that adds component classes (btn, card, modal, etc.) | MIT |
| Flowbite | Component library with React/Vue/Svelte adapters and 600+ components | MIT (free tier) and commercial |
| Preline UI | Component library with optional JavaScript helpers | MIT |
| HeroUI (formerly NextUI) | Component library tightly integrated with React Server Components | MIT |
| Material Tailwind | Material Design components reimplemented in Tailwind | MIT |
| Park UI | Components built on Ark UI primitives | MIT |
shadcn/ui has been particularly influential because the copy-paste model maps well onto AI code generation. When a model emits a Button component, the user owns the source and can ask the model to modify it directly, instead of relying on the library to expose enough props.
Tailwind shows up as a default or first-class option in most modern JavaScript frameworks. Next.js create-next-app offers Tailwind as one of two prompts during setup. Astro maintains a first-party @astrojs/tailwind integration. Remix and React Router 7 ship Tailwind in their default templates, and Laravel's official starter kit (Laravel Breeze and Laravel Jetstream) ship with Tailwind preconfigured. SvelteKit, Nuxt, and SolidStart all document Tailwind as a recommended setup.
The State of CSS 2024 survey, run by Sacha Greif, recorded Tailwind at the top of the CSS framework rankings: 75% of respondents who answered the question said they used Tailwind, against around 30% for Bootstrap. The same survey put Tailwind's developer satisfaction at 81%, against 55% for Bootstrap. The 2023 survey had Tailwind at roughly 37.4% of all respondents, so the lead grew sharply year over year.
Npm download stats from npmtrends.com show Tailwind crossing 47 million weekly downloads in 2026. Bootstrap, which had been the dominant CSS framework for a decade, sat around 4.8 to 8 million weekly downloads in the same period. The crossover happened in 2024.
The tailwindlabs/tailwindcss repository had more than 93,000 stars by early 2026. The tailwindlabs organization also hosts Headless UI, Heroicons, the Tailwind Play playground, and the marketing site repo.
Tailwind has a peculiar relationship with the current generation of AI coding tools, and that relationship is one of the main reasons it gets coverage in an AI encyclopedia.
Large language models trained on public web code see overwhelming volumes of Tailwind class names in tutorials, blog posts, GitHub repos, and documentation written from 2020 onward. When a user asks a model for a React landing page or a settings panel without specifying a framework, Tailwind class names are statistically the most likely tokens to follow a className= prefix in JSX. The combination of (1) inline styling, (2) deterministic class names that map to single declarations, and (3) high volume in training data means that models can produce visually plausible Tailwind output more reliably than they can produce semantic CSS.
Tailwind also benefits from a structural property: utility classes are tokens that compose, so a model that gets one class wrong does not break a whole stylesheet. This is in contrast to BEM-style CSS, where a missing class definition or typo in a class name leaves the whole component unstyled.
Vercel launched v0 in October 2023. The product takes a natural-language prompt or reference image and returns a React component. The default output is a React component styled with Tailwind, using shadcn/ui primitives where possible. v0 supports asking for other libraries (Material UI, Chakra, Bootstrap), but Tailwind plus shadcn/ui is the path of least resistance. As of 2025, v0 had been integrated more deeply into Vercel's deployment pipeline and rebranded as a full app-building agent, but the styling default remained Tailwind.
Anthropic-style and OpenAI-style generative app builders, including Lovable, bolt.new (StackBlitz), and a long tail of similar products, generate Tailwind output by default. The pattern is consistent: prompt to React plus Tailwind plus optional shadcn/ui, ship to Vercel or Netlify. The decision is partly user-driven (users get visually decent output) and partly model-driven (models do well on Tailwind). The two reinforce each other.
Cursor, Windsurf, GitHub Copilot, and Continue all generate Tailwind classes when working in a codebase that already uses Tailwind. Tailwind also publishes a first-party VS Code extension that does class-name autocomplete, hover previews, and class sorting. The extension is widely installed (over 5 million installs on the VS Code marketplace) and gets used in tandem with AI assistants.
AI Wiki, the site you are reading, is built with Next.js and styled with Tailwind CSS v4. The site uses the CSS-first config, the @tailwindcss/typography plugin for prose content like this article, and the standard dark: variant set for theme switching.
Tailwind has loud detractors, especially among developers who came up through the BEM and SMACSS schools of CSS architecture. The recurring criticisms are:
Verbose markup. A long string of class tokens on every element makes HTML harder to scan than markup with semantic class names. The class="flex items-center justify-between gap-4 px-6 py-3 bg-white dark:bg-zinc-900 border-b border-zinc-200 dark:border-zinc-800" pattern is common, and reading those classes back later requires familiarity with Tailwind's vocabulary. Critics call this "class soup."
Reinventing CSS. Tailwind's utility names are abbreviations for CSS properties (mt-4 is margin-top: 1rem, flex is display: flex). Some developers argue this adds an extra layer of vocabulary on top of CSS that exists for no real benefit, and that learning Tailwind essentially means learning CSS twice.
Separation of concerns. The classical "keep styling out of HTML" argument predates the framework by two decades and still has supporters. Tailwind's official position, in Wathan's "CSS Utility Classes and 'Separation of Concerns'" essay, is that the separation was illusory because CSS and HTML are coupled by class names anyway. The argument is unresolved and probably will stay that way.
Hostile to design system enforcement. Because every utility is available everywhere, Tailwind does not, on its own, prevent a developer from setting a one-off color or spacing value that breaks the design system. The theme configuration helps, and arbitrary values like bg-[#1da1f2] can be discouraged through linting, but the discipline is not built in.
The usual counter is that Tailwind solves real problems (dead CSS rules, unbounded class-name growth, inconsistent spacing scales) and that the visual cost of long class strings is acceptable in practice.
The core Tailwind CSS framework, Headless UI, and Heroicons are MIT-licensed. They are free to use in commercial and non-commercial projects, with no restrictions beyond preserving the license notice.
Tailwind UI is the commercial product. Tailwind UI Plus (the post-2024 rebrand of the original Tailwind UI) sells a one-time license for access to the full component catalog and templates, with the price set at around $299 for a personal license and higher tiers for teams. Catalyst is included in the same package. Tailwind UI is the main revenue source for Tailwind Labs and funds the open-source work on the framework.
The Tailwind Play online playground (play.tailwindcss.com) is free.