What CSS Framework Is This Site Using?

Published August 26, 2026 · 11 min read · by the CSS DNA team

Quick answer: Open DevTools and read one element’s class attribute. Many short single-purpose classes like flex items-center px-4 means Tailwind. btn btn-primary and col-md-6 means Bootstrap. MuiButton-root means MUI. Random hashes like sc-bdVaJa or css-1x2y3z mean CSS-in-JS, and no framework at all.

Class names are a fingerprint. Every framework has a naming convention it cannot hide, because those names ship to the browser in the HTML — minification renames JavaScript, not class attributes that CSS has to match. Ninety percent of the time you can name the framework from a single element.

The other ten percent is where this gets interesting: hashed class names, sites that use two frameworks at once, and the question people actually mean when they ask — is this Tailwind v3 or v4? Below is the fingerprint table, a paste-in detector, a console snippet that scores a whole page, and the four cases where every detection method lies to you.

The 30-second fingerprint table

Copy any element’s class attribute and match it against this. The signature column is the thing that appears in no other framework.

Paste an element and find out

Right-click any element on the site you are curious about, choose Inspect, copy its class attribute — or copy a chunk of the stylesheet — and drop it in. Everything below runs in your browser; nothing is uploaded.

Is it Tailwind v3 or Tailwind v4?

This is the question that trips people up, because both versions emit the same utility classes — flex, px-4 and text-sm are identical in each. The difference is in the CSS the site ships, not the HTML.

So the fastest check is: open the stylesheet and search for oklch. A page full of --color-* variables in OKLCH is v4. A page with utility classes and no theme variables at all is v3. If you want to know why the switch to OKLCH happened, that is a story about wider gamuts and perceptual lightness.

The console snippet that scores a whole page

One element can mislead — plenty of sites carry a Bootstrap grid inherited from 2019 under a Tailwind rebuild. This walks every element, counts class-name matches per framework, and ranks them. Paste it into the Console on any site:

const SIGS = {
  Tailwind:    /^(sm|md|lg|xl|2xl|hover|focus|dark|group-hover)?:?-?(flex|grid|hidden|block|p|px|py|pt|pb|m|mx|my|w|h|gap|text|bg|border|rounded|shadow|font|items|justify|space|z|top|left|opacity|transition)(-|$|\[)/,
  Bootstrap:   /^(btn|col|row|container|navbar|card|form-control|d-|justify-content-|align-items-|m[tblrxy]?-\d|p[tblrxy]?-\d)/,
  Bulma:       /^(is|has)-|^(column|columns|hero|navbar-item|title|subtitle)$/,
  MUI:         /^Mui[A-Z]/,
  AntDesign:   /^ant-/,
  Chakra:      /^chakra-/,
  StyledComp:  /^sc-[A-Za-z0-9]{5,}$/,
  Emotion:     /^css-[a-z0-9]{6,}$/,
  CSSModules:  /^[A-Za-z][\w]*_[\w]+__[\w-]{4,}$/,
  Foundation:  /^(grid-x|grid-y|cell|small-\d|medium-\d|large-\d)$/,
  SemanticUI:  /^ui$/,
  BEM:         /^[a-z][\w-]*__[\w-]+(--[\w-]+)?$/
};

const tally = {};
document.querySelectorAll('[class]').forEach(el => {
  el.classList.forEach(cls => {
    for (const [name, re] of Object.entries(SIGS)) {
      if (re.test(cls)) tally[name] = (tally[name] || 0) + 1;
    }
  });
});

console.table(
  Object.entries(tally)
    .sort((a, b) => b[1] - a[1])
    .map(([framework, matches]) => ({ framework, matches }))
);

Read the result as a ratio, not a verdict. A page returning Tailwind: 812 and Bootstrap: 6 is a Tailwind site where six classes happen to look like Bootstrap. A page returning Tailwind: 400 and Bootstrap: 380 is genuinely running both, which is worth knowing before you quote a redesign.

And the version-detection half

Add this to check the Tailwind major version and pick up the site builders that generate their own CSS:

// Tailwind v4 leaves its theme in :root as OKLCH custom properties
const root = getComputedStyle(document.documentElement);
const v4 = [...root].filter(p => p.startsWith('--color-')).length > 10;
console.log('Tailwind v4 theme variables:', v4 ? 'yes' : 'no');

// Site builders announce themselves
console.log('generator:',
  document.querySelector('meta[name="generator"]')?.content ?? 'none');

That generator tag is the one people forget. Webflow, Framer, WordPress, Astro, Hugo and Squarespace all stamp it, and it answers a different and often more useful question: not which CSS framework but which tool built this. A Framer site has no CSS framework to identify — the class names are generated per project and mean nothing outside it.

When class names tell you nothing

Four cases defeat every method above. Recognising them saves you from a confident wrong answer.

1. CSS-in-JS erases the evidence

styled-components and Emotion generate class names from a content hash. css-1x2y3z tells you the styling library and nothing about the design system, because there is no shared vocabulary to detect — every component carries its own rules. The answer to “what framework is this” is genuinely “none, it is component-scoped CSS.”

2. Tailwind compiled through a prefix

Tailwind supports a class prefix, so a site can ship tw-flex tw-px-4. The shape is unmistakable once you look — many short classes, consistent numeric scale — but a naive regex misses all of it. If class names look utility-shaped but match nothing, strip the leading two or three characters and try again.

3. The framework is there but unused

Plenty of sites load all of Bootstrap and then override it with hand-written CSS. Detection says Bootstrap; the visual design owes it nothing. If you are trying to recreate the look, the framework name is a distraction — what you want is the token system.

4. Utility classes without Tailwind

Tachyons, Open Props, UnoCSS and a dozen in-house systems all produce short utility classes. UnoCSS in particular is designed to be Tailwind-compatible, so it emits classes that are indistinguishable by name. The tell is in the stylesheet: UnoCSS output has no @layer theme and no --tw- runtime variables.

What to do once you know

Naming the framework is rarely the goal. Usually it is a proxy for one of three real questions, and each has a better path than the framework name:

• “Can I rebuild this look in my stack?” Then you want the values, not the framework — colors, type scale, spacing, radii, shadows. Those export as design tokens and drop into any framework, including one the original site never used.
• “Is Tailwind worth it — do serious sites use it?” Run the console snippet across ten sites you admire. That is a better data set than any survey.
• “How do I match this component?” Copy the element’s computed styles and convert them to Tailwind classes directly. Whether the source was Bootstrap or bespoke stops mattering.