How to detect Tailwind CSS on a website
Tailwind CSS generates utility classes with recognisable patterns: `flex`, `items-center`, `px-4`, `text-muted-foreground`, `md:grid-cols-2`, `hover:bg-black/10`. You can usually tell within a single element.
Background
Tailwind's whole design philosophy is utility-first: instead of writing a `.card` class, you compose `flex flex-col gap-3 rounded-xl border border-border bg-card/60 p-5` inline on the element. That verbosity is deliberate; it removes the naming step that traditional CSS requires. It also makes Tailwind-using sites visually obvious in the DOM: a typical element has 6-20 utility classes stacked up, with recognisable prefixes (`md:`, `lg:`, `dark:`, `hover:`, `focus:`). Competing utility frameworks (UnoCSS, Windi CSS) share the same class vocabulary, but the generated CSS bundle differs — UnoCSS ships `@unocss` comments, Windi's development has slowed significantly. For distinguishing Tailwind from a hand-written utility stack, the reliable signal is the specific CSS bundle shape: Tailwind's output starts with a large preflight reset block, has `@layer base/components/utilities` structure, and (in v4) uses `@theme` blocks with `--color-*` CSS variables.
Why this matters
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. Tailwind v3 vs v4 is a meaningful distinction — v4 has a different compiler, CSS-variable-driven theming, and shifts how you author and debug styles.
Prerequisites
- Chrome DevTools.
Step-by-step
- 1
Inspect any element
Right-click any visible component → Inspect. Look at the `class` attribute. Tailwind classes follow `(state:)?<utility>-<variant>` patterns: `flex`, `gap-3`, `text-sm`, `font-medium`, `md:grid-cols-3`, `dark:bg-slate-900`. A few of those in one attribute is effectively a positive.
- 2
Check the CSS bundle
In the Network tab, look at the generated CSS file. Tailwind output starts with a large block of `@layer base` / `@layer components` / `@layer utilities`, reset styles (`*, ::before, ::after { ... }`), and a long tail of compiled utility classes.
- 3
Look for Tailwind v4 signals
Tailwind v4 introduces `h-dvh`, CSS-variable-based themes, `@theme` blocks in compiled output, `--color-*` CSS vars, and class names using `h-dvh` / `min-h-dvh`. Older v3 output uses `h-screen` more heavily.
- 4
Use Sourcemap Explorer
If sourcemaps are exposed, the extension reads `node_modules/tailwindcss/package.json` for the exact version. If not, its overlay rules detect Tailwind via the recognisable class patterns and utility names.
Real-world example
Troubleshooting
I see Tailwind-looking classes but no Tailwind CSS bundle.
Possible candidates: UnoCSS with the Tailwind-compatible preset, a hand-rolled utility CSS, or a site using Tailwind from CDN (check for `cdn.tailwindcss.com`).
CSS bundle has `@layer` but not the Tailwind preflight.
Could be a custom setup that uses `@tailwind` directives but disables preflight. Still Tailwind.
Caveats
What to do next
Once you've confirmed Tailwind, shadcn/ui becomes the next likely companion (check for `class-variance-authority`, `clsx`, and component-file patterns in the sourcemap). Radix UI or Base UI are common primitives underneath.
FAQ
Is shadcn/ui Tailwind?
shadcn/ui is a component library built on top of Tailwind and Radix UI (or Base UI in newer versions). A site using shadcn/ui will always show Tailwind signals.
Can I tell Tailwind v3 from v4 just from class names?
Partially. v4-specific utilities like `h-dvh`, `color-scheme` classes and `@theme` variables are tells. But a v4 project can still use mostly v3-era class names.
Related
Skip the manual steps.
Sourcemap Explorer automates every workflow in this guide — free, local, no sign-up.