How to Detect Tailwind CSS on Any Website: 5 Methods

Tailwind CSS has become one of the most popular CSS frameworks on the web. Unlike component-based frameworks like Bootstrap, Tailwind takes a utility-first approach—every style is applied through small, single-purpose classes directly in the HTML. This makes Tailwind sites look different under the hood, even when the visual design gives no clue about the underlying technology.

Whether you’re researching a competitor’s front-end stack, qualifying leads by the frameworks they use, auditing a client’s codebase, or just curious about how a particular site was built, you need reliable ways to identify Tailwind CSS. This guide covers five methods, from quick manual checks in the browser to fully automated API-based detection across thousands of sites.

Why Detect Tailwind CSS?

Knowing whether a website uses Tailwind CSS is more than trivia. There are concrete professional reasons to look for this information:

• Competitive intelligence: A company using Tailwind CSS has likely adopted a modern, utility-first approach to front-end development. This signals engineering maturity and a willingness to invest in developer experience. If they also use React or Next.js (which you can detect separately), you have a detailed picture of their front-end architecture.
• Sales prospecting: If you sell front-end tooling, design systems, or developer services, companies running Tailwind are a warm audience. They care about CSS architecture and are actively choosing tools—which makes them receptive to related products. See technographic prospecting for more on this approach.
• Hiring and interviews: Researching a company’s CSS framework before an interview tells you what to expect on the job. Tailwind CSS experience is increasingly listed as a requirement in front-end job postings.
• Migration planning: Before migrating from Bootstrap to Tailwind (or vice versa), you need to confirm exactly what is running in production. Internal documentation is often outdated; the live site is the source of truth.
• Design system audits: Agencies and consultants evaluating a client’s front end need to know the CSS framework in use before they can assess maintainability, recommend improvements, or estimate migration effort.

Method 1 — Inspect Class Names in the DOM

The fastest way to check for Tailwind CSS is to inspect the HTML elements in the browser. Tailwind’s utility classes have a distinctive naming pattern that is immediately recognizable once you know what to look for.

Open Chrome DevTools (F12 or Cmd+Option+I on macOS), switch to the Elements panel, and click on any element in the page. Look at the class attribute.

Common Tailwind Utility Classes to Look For

Tailwind utility classes follow a consistent pattern: a short property abbreviation, sometimes a variant prefix (like hover: or md:), and a value. Here are the patterns that identify Tailwind:

The key identifier is the combination of these patterns. A single flex class could be from any framework, but when you see flex items-center justify-between px-4 py-2 bg-white text-gray-900 hover:bg-gray-50 on a single element, that is unmistakably Tailwind CSS.

// Check for Tailwind-style utility classes in the DOM
document.querySelectorAll('[class*="bg-"], [class*="text-"], [class*="px-"], [class*="py-"], [class*="flex "], [class*="items-center"]').length > 10

If this returns true, the page likely uses Tailwind. The threshold of 10 helps filter out false positives from sites that coincidentally use a few similar class names.

Method 2 — Search the Stylesheet for Tailwind Markers

Tailwind CSS generates a stylesheet with recognizable patterns. Even after purging unused classes, the remaining CSS contains distinctive selectors and comments that reveal Tailwind’s presence.

Open DevTools, go to the Sources or Network panel, and look at the CSS files loaded by the page. Search within the stylesheet for these markers:

• tailwindcss — Tailwind’s generated CSS often includes this string in comments or source maps, especially in development builds.
• --tw- — Tailwind v3+ uses CSS custom properties (variables) prefixed with --tw- for its internal mechanics. Searching for this prefix in the stylesheet is one of the most reliable markers. Examples include --tw-ring-offset-shadow, --tw-shadow, and --tw-translate-x.
• @layer base, @layer components, @layer utilities — Tailwind’s directive system uses CSS @layer rules in its output.

// In DevTools Console: search all stylesheets for Tailwind markers
Array.from(document.styleSheets).some(sheet => {
  try {
    return Array.from(sheet.cssRules).some(rule =>
      rule.cssText && rule.cssText.includes('--tw-')
    );
  } catch(e) { return false; } // cross-origin sheets throw
})

The --tw- CSS variable prefix is the most reliable stylesheet marker because it persists even in production builds with full purging enabled. Tailwind needs these variables for features like shadows, rings, and transforms regardless of which utility classes are in use.

Method 3 — Check the HTML Source for CDN Links

Some sites load Tailwind CSS from a CDN rather than bundling it. View the page source (Ctrl+U or Cmd+Option+U) and search for these patterns:

<!-- Tailwind CSS CDN (v3+) -->
<script src="https://cdn.tailwindcss.com"></script>

<!-- Tailwind CSS CDN (older v2 pattern) -->
<link href="https://unpkg.com/tailwindcss@^2/dist/tailwind.min.css" rel="stylesheet">

<!-- jsDelivr CDN -->
<link href="https://cdn.jsdelivr.net/npm/tailwindcss@...">

Sites using the Tailwind CDN are easy to identify because the URL contains “tailwindcss” explicitly. This method catches prototypes, documentation sites, and smaller projects that skip a build step.

Production sites built with frameworks like Next.js, Vite, or Webpack typically bundle Tailwind into their CSS output and do not reference a CDN. For those sites, use Method 1 (class inspection) or Method 2 (stylesheet analysis) instead.

Method 4 — Use Browser DevTools Network Tab

The Network tab in DevTools reveals every resource the page loads, including CSS files. This method is especially useful for identifying Tailwind in bundled production builds.

1. Open DevTools (F12) and switch to the Network tab.
2. Reload the page to capture all network requests.
3. Filter by “CSS” to show only stylesheet requests.
4. Click on each CSS file and examine the Response or Preview.

Look for these indicators in the CSS response body:

• CSS custom properties starting with --tw-.
• Selectors that match Tailwind utility patterns: .bg-blue-500, .text-sm, .flex, .hover\:bg-blue-700:hover.
• The escaped colon syntax in selectors like .md\:grid-cols-3 and .hover\:opacity-80:hover—this is how Tailwind encodes responsive and state variants in CSS class selectors.

The escaped colon pattern (\: in selectors) is a strong Tailwind signal. While other frameworks use responsive prefixes, the variant\:utility selector pattern is Tailwind’s signature.

Method 5 — Use the DetectZeStack API for Automated Detection

Manual methods work for one-off checks. When you need to detect Tailwind CSS across dozens, hundreds, or thousands of sites—for lead qualification, competitive research, or portfolio audits—you need an API.

Curl Example with the /demo Endpoint

The DetectZeStack API detects Tailwind CSS and 7,200+ other technologies in a single request. Here is a quick check using the free demo endpoint (no API key required):

$ curl -s "https://detectzestack.com/demo?url=tailwindcss.com" | jq '.technologies[] | select(.name == "Tailwind CSS")'

For production use with higher rate limits, use the RapidAPI endpoint:

$ curl -s "https://detectzestack.p.rapidapi.com/analyze?url=tailwindcss.com" \
  -H "X-RapidAPI-Key: YOUR_KEY" \
  -H "X-RapidAPI-Host: detectzestack.p.rapidapi.com" \
  | jq '.technologies[] | select(.categories[] | contains("UI frameworks"))'

Reading the API Response

The API returns a JSON object with all detected technologies. Here is what a Tailwind CSS detection looks like:

{
  "url": "https://tailwindcss.com",
  "domain": "tailwindcss.com",
  "status": 200,
  "scan_depth": "full",
  "technologies": [
    {
      "name": "Tailwind CSS",
      "categories": ["UI frameworks"],
      "confidence": 100,
      "website": "https://tailwindcss.com"
    },
    {
      "name": "Next.js",
      "categories": ["JavaScript frameworks"],
      "confidence": 100,
      "website": "https://nextjs.org"
    },
    {
      "name": "React",
      "categories": ["JavaScript frameworks"],
      "confidence": 100,
      "website": "https://reactjs.org"
    }
  ]
}

Key fields in the response:

• name — The technology name. Tailwind CSS is reported as a distinct entry, separate from the JavaScript framework (React, Next.js, Vue.js) the site uses alongside it.
• confidence — How certain the detection is (0-100). A confidence of 100 means the fingerprint matched unambiguously.
• categories — Tailwind CSS appears under “UI frameworks.” This lets you filter the response to only show CSS-related technologies.

Because the API returns the full technology stack in a single call, you see both the CSS framework and the JavaScript framework together. A site running Tailwind CSS with Next.js tells a different story than one running Tailwind CSS with plain HTML—the former signals a modern full-stack setup, the latter might be a static marketing page. For a deeper look at detecting the JavaScript layer, see How to Detect What JavaScript Framework a Website Uses.

Batch Detection with /analyze

To scan a list of domains for Tailwind CSS usage, loop through them with curl:

$ for domain in tailwindcss.com vercel.com linear.app; do
    echo -n "$domain: "
    curl -s "https://detectzestack.p.rapidapi.com/analyze?url=$domain" \
      -H "X-RapidAPI-Key: YOUR_KEY" \
      -H "X-RapidAPI-Host: detectzestack.p.rapidapi.com" \
      | jq -r '[.technologies[] | select(.name == "Tailwind CSS") | .name] | if length == 0 then "not detected" else join(", ") end'
  done

For larger-scale scanning with rate limiting and CSV export, see the Python tutorial.

How Tailwind CSS Differs from Other CSS Frameworks

Understanding how Tailwind differs from other frameworks helps you identify it more quickly and interpret the detection results in context.

Both frameworks are detected separately by the DetectZeStack API. You may also see them used together on the same site—some teams use Bootstrap for layout components and add Tailwind utilities for custom styling. For a broader overview of detecting any website’s full technology stack, see Detect Any Website’s Tech Stack with a Single API Call.

Get Started with Automated Tailwind Detection

Manual checks are fine for the occasional one-off inspection. For anything systematic—scanning a prospect list, auditing a portfolio of client sites, or monitoring competitors’ front-end choices—an API is the only practical approach.

The DetectZeStack API gives you Tailwind CSS detection alongside 7,200+ other technology fingerprints in a single call. Every request also includes DNS-based infrastructure detection, TLS certificate analysis, and HTTP header inspection—layers that no browser-based method can match.

The free tier includes 100 requests per month with no credit card required. That is enough to scan your competitor list, audit a client portfolio, or build a proof-of-concept integration.