Tailwind CSS
Last reviewed
Sources
25 citations
Review status
Source-backed
Revision
v2 ยท 4,047 words
Improve this article
Add missing citations, update stale details, or suggest a clearer explanation.
Suggest edit
CtrlK
Last reviewed
Sources
25 citations
Review status
Source-backed
Revision
v2 ยท 4,047 words
Add missing citations, update stale details, or suggest a clearer explanation.
Tailwind CSS is an open-source, utility-first CSS framework that styles web interfaces by composing low-level utility classes such as flex, pt-4, text-center, and bg-blue-500 directly in markup, instead of writing custom CSS rules in separate stylesheets. It was created by Adam Wathan and first released as version 0.1.0 on November 1, 2017, and it is maintained by Tailwind Labs, the company Wathan founded with collaborators Steve Schoger, Jonathan Reinink, and David Hemphill. [1][2]
Tailwind has become the most widely used styling layer in the modern JavaScript ecosystem. It topped the State of CSS 2024 survey as the most-used CSS framework, with about 75% of respondents who answered the framework question reporting that they use it, ahead of Bootstrap. [12][13] The tailwindcss npm package drew more than 121 million downloads in the week of June 17 to 23, 2026, roughly 19 times Bootstrap's volume over the same period, and the GitHub repository has passed 95,000 stars. [14][16] 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. [17] 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 | ~122 million (week of June 17-23, 2026) |
| GitHub stars | 95,000+ (2026) |
| Website | tailwindcss.com |
Tailwind is used to style websites and web applications without leaving the markup file. Rather than defining named component classes (for example .btn or .card) in a stylesheet, a developer applies pre-existing utility classes that each map to a single CSS declaration, building up the design inline. The framework supplies a complete design system out of the box: a spacing scale, a color palette, typographic defaults, breakpoints for responsive design, and state variants like hover: and focus:. It is framework-agnostic and works with plain HTML as well as with React, Vue.js, Svelte, Angular, Next.js, Laravel Blade, and most other view layers. Because it produces only the CSS for the utilities a project actually uses, the shipped stylesheet stays small even on large applications.
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, and the article "CSS Utility Classes and 'Separation of Concerns'" laid out the philosophy that would underpin the framework. [21]
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. [3][22]
The first public version, 0.1.0, shipped on November 1, 2017, the night after Halloween. 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. [1][5]
Tailwind CSS v1.0 was released on May 13, 2019, after roughly eighteen months of 0.x releases. [6] 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. [4]
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. [7] 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. [8] 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. [9] 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 first previewed at Tailwind Connect in summer 2023 and described in the public v4.0 alpha post on March 6, 2024 as "a new high-performance engine for Tailwind CSS." [25] Oxide rewrote the most expensive parts of Tailwind in Rust; the alpha post explained the team had "migrated some of the most expensive and parallelizable parts of the framework to Rust" and that "the only thing the new engine depends on is Lightning CSS," itself written in Rust and used as the parser and transformer. [25]
Tailwind CSS v4.0 shipped on January 22, 2025. [10] According to the official release post, full builds dropped from 378ms to 100ms on the Catalyst project (full builds "up to 5x faster"), incremental rebuilds that compile new CSS dropped from 44ms to 5ms, and incremental rebuilds with no new CSS dropped from 35ms to 192 microseconds, a 182x speedup that the team summarized as "over 100x faster." [10] Wathan opened the post with "Holy shit it's actually done, we just tagged Tailwind CSS v4.0" and called the no-new-CSS case "the most impressive improvement," with builds that "complete in microseconds." [10]
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. [10][11]
Tailwind Labs is the company Adam Wathan founded around the framework. In a public write-up, Wathan said the business had "done over $4m in revenue in under 2 years," crediting the decision to build in public: "Steve and I would have never built this Tailwind Labs business... if I hadn't been live-streaming my work on yet-another-abandoned-side-project." [3] The revenue came primarily from the commercial Tailwind UI product, which crossed $2 million in sales about five months after its launch. [3] 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. [21] 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. [10] 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. [10] 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.
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. [7] 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. [3] 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. [19]
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. [20] 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. [18] 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 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: about 75% of respondents who answered the question (3,657 of 4,890) said they used Tailwind, against roughly 54% for Bootstrap. [13] CSS-Tricks' write-up of the same survey put Tailwind's developer satisfaction at 81%, against 55% for Bootstrap. [12] The 2023 survey had Tailwind at roughly 37.4% of all respondents, so the lead grew sharply year over year.
Npm download data shows the tailwindcss package drawing more than 121.8 million downloads in the week of June 17 to 23, 2026. [14][15] Bootstrap, which had been the dominant CSS framework for a decade, recorded about 6.5 million downloads over the same week, so Tailwind ran roughly 19 times Bootstrap's volume. [14] The crossover, when Tailwind passed Bootstrap in weekly downloads, happened in 2024.
The tailwindlabs/tailwindcss repository had more than 95,000 stars (about 95,700) by mid-2026. [16] 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 as a public beta. [17] 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.
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 (millions of 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." [23]
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. [23]
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. [21] 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, made even by some critics, 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. [24]
The core Tailwind CSS framework, Headless UI, and Heroicons are MIT-licensed. [1][2] 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. [18] 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. [3]
The Tailwind Play online playground (play.tailwindcss.com) is free.