How to detect Tailwind CSS on any website
Utility-first CSS framework — the dominant CSS layer for React/Vue/Svelte apps.
By Mapree ·
Official siteWhat is Tailwind CSS?
Tailwind CSS generates a lot of short utility classes (`flex`, `gap-3`, `text-sm`, `md:grid-cols-2`) that make production HTML class attributes distinctive. Version 4 introduced CSS-variable-driven themes and a new compilation pipeline.
Tailwind's utility-first approach dismantled the 'name every style' orthodoxy of classic CSS. Instead of `.card { ... }` in a stylesheet, you compose `flex flex-col gap-3 rounded-xl border p-5` inline on the element. That's verbose in the HTML but eliminates most of the naming, ordering and specificity problems of traditional CSS. The cost is that production HTML becomes visually noisy — which is also what makes Tailwind unmistakable to detect. A typical Tailwind element has 10-20 utility classes stacked up with recognisable prefixes (`md:`, `lg:`, `dark:`, `hover:`, `focus:`). Tailwind v4 (2024-2025) was a major rewrite: CSS-variable-driven themes, a faster compiler, `@theme` blocks in compiled output. That makes v4 visually distinguishable from v3 in the generated CSS.
Why it matters to identify
Tailwind has become the default CSS layer for modern React/Vue/Svelte apps. Detecting it narrows the UI kit shortlist (shadcn/ui, Radix + Tailwind, DaisyUI, Flowbite) and helps you correlate the frontend choices.
A brief history of Tailwind CSS
Tailwind CSS was released by Adam Wathan in 2017. v1 (2019), v2 (2020), v3 (2021, JIT compiler by default), v4 (2024, complete rewrite with CSS-variable themes). Tailwind Labs, the company, offers Tailwind UI (paid component library), Headless UI (unstyled React components) and Tailwind CSS IntelliSense (VS Code extension).
Ecosystem and common pairings
Tailwind companions: shadcn/ui (copy-paste component library built on Radix UI and Tailwind), Headless UI (accessible unstyled React primitives from Tailwind Labs), Radix UI / Base UI (primitive unstyled components), Lucide (icon library, default in shadcn), class-variance-authority (CVA) and clsx (for conditional class composition).
Detection signals we look at
Each signal alone is rarely conclusive; the detector cross-references all of them and weights by confidence. You can reproduce any of these checks yourself in Chrome DevTools.
class="[^"]*(?:\bflex\b|\bitems-center\b|\bpx-\d|\bmd:grid-cols-)
Distinctive utility class combinations that are effectively unique to Tailwind (and UnoCSS, when explicitly configured to match).
node_modules/tailwindcss/
Tailwind bundled, exact version in the package.json.
cdn.tailwindcss.com
CDN-loaded Tailwind (common on prototypes and docs sites).
Versioning
What you typically see in production
Tailwind in 2026 is the dominant CSS layer in the React/Vue/Svelte landscape, with adoption that has overtaken every other CSS-in-JS or component-styled approach for new builds. The signature is unmistakable: long class attributes with utility patterns (`flex items-center gap-3 rounded-xl border border-border bg-card/60 p-5`), a CSS bundle that opens with the Tailwind preflight reset and continues into a long tail of compiled utility classes, and (for v4 sites) an `@theme` block at the top with `--color-*`, `--spacing-*` and `--radius-*` design tokens. The current state of the v3-vs-v4 split in the wild is roughly 70-30 in favour of v3 as of mid-2026, with v4 adoption growing steadily as Next.js, Astro and Remix templates default to it. Sites already on v4 are usually on shadcn/ui as well — the two have rolled forward together, and the shadcn-cli tooling defaults to the latest Tailwind. v3 sites are the long tail of production deployments that have not yet found a reason to migrate; the migration is mechanical for most apps but adds a calendar week of work, so it gets deferred until something else forces it. The most common UI ecosystem on top of Tailwind is shadcn/ui — to the point where the combination 'Tailwind + class-variance-authority + tailwind-merge + Radix UI primitives + Lucide icons' is essentially a single design pattern that you can spot in the popup in five seconds. Other ecosystems in regular use: Tailwind UI Catalyst (the paid component kit from Tailwind Labs), Headless UI (Tailwind Labs's open-source primitives), DaisyUI (a pure-CSS component layer with a `data-theme` attribute), Flowbite (similar to DaisyUI but more mature on enterprise components), and bespoke design systems built on Tailwind without an off-the-shelf library. A distinctive in-the-wild pattern is the production-bundle weight. A purged Tailwind v3 production build for a moderately complex site is typically 20-60 KB of CSS; a misconfigured purge ships hundreds of KB; a v4 build with the new compiler usually lands tighter than the equivalent v3 because the dead-class elimination is more aggressive. When you see an unusually heavy CSS bundle on a Tailwind site, it is almost always a purge configuration issue — and one of the easiest performance wins to flag in any audit.
Sites commonly running Tailwind CSS
- github.com (parts of)
- openai.com
- vercel.com
- linear.app
- shadcn.com
Often confused with
Tailwind CSS vs UnoCSS
UnoCSS supports a Tailwind-compatible preset and outputs similar utility classes. The difference is in the generated CSS: UnoCSS ships `@unocss` comments in the bundle and uses a different layer-and-preflight structure. The bundle preamble distinguishes them in seconds.
Tailwind CSS vs Hand-rolled utility CSS
Some sites adopt utility-first naming without the Tailwind compiler, writing classes like `.flex { display: flex }` by hand. The result looks Tailwind-shaped at the class-attribute level but the CSS bundle has none of the Tailwind preflight, layer structure or arbitrary-value handling. Inspecting the bundle disambiguates them immediately.
Tailwind CSS vs Windi CSS / Master CSS
Both are utility-first frameworks with overlapping vocabularies. Windi has stopped active development as of 2023; Master CSS uses a different prefix system. The bundle preamble tells them apart from Tailwind.
FAQ
How do I tell Tailwind v3 from v4?
v4 ships `@theme` blocks at the top of the CSS bundle, leans heavily on `--color-*` / `--spacing-*` / `--radius-*` CSS variables, and uses viewport-aware sizing utilities like `h-dvh`. v3 has more `@layer` directives, fewer CSS variables in the cascade, and uses `--tw-` prefixed vars internally for the JIT compiler. The exact version comes from `node_modules/tailwindcss/package.json` in the CSS sourcemap.
Is shadcn/ui Tailwind?
shadcn/ui is a component library built on top of Tailwind and Radix UI (or Base UI in newer versions). Every shadcn/ui site shows Tailwind signals because shadcn ships as Tailwind-classed JSX. The canonical shadcn fingerprint is `class-variance-authority` + `clsx` + `tailwind-merge` + Radix primitives in the bundle.
Does Tailwind require JavaScript at runtime?
No, Tailwind is a CSS-only framework — the build step generates static CSS that the browser loads like any stylesheet. The 'Tailwind CDN' (`cdn.tailwindcss.com`) is a separate JIT-via-JavaScript thing for prototypes that does run in the browser, but production Tailwind is plain CSS.
Why is my Tailwind production bundle so big?
Almost always a purge configuration issue — Tailwind's content paths in `tailwind.config.js` (v3) or the `@source` directives (v4) are incorrect, so the compiler does not know which classes are used and ships everything. The fix is to tighten the content paths to match the actual templates. v4's compiler is more aggressive about dead-class elimination and is less prone to this misconfiguration.
What's the easiest way to confirm the Tailwind version?
Install Sourcemap Explorer, browse to the site, click the toolbar icon, and read the version from the Stack tab. The exact semver comes from `node_modules/tailwindcss/package.json` inside the CSS sourcemap. No other public detector reads CSS sourcemaps the same way.
Can a site use Tailwind without utility classes in the markup?
Theoretically yes — you can use Tailwind purely as a design-system primitive and write your own `.btn-primary` class via `@apply`. In practice most Tailwind sites lean into utility classes in the markup, so seeing them is a strong indicator. Sites that abstract everything via `@apply` look more like traditional CSS in the DOM but still ship the Tailwind preflight + layer structure in the bundle.
Does Tailwind work with frameworks other than React?
Yes. Tailwind is framework-agnostic — it ships static CSS at build time and is used in Vue, Svelte, Angular, Astro, Remix, plain HTML, and server-rendered PHP / Rails / Django templates. The detection signature is identical regardless of the surrounding framework.
Related
See Tailwind CSS — with the exact version — on every site you visit.
Sourcemap Explorer runs these checks passively in the background. When the target library is bundled, you get the precise package.json-level version.