Tailwind CSS Inspector & Class Debugger

Edit Tailwind classes live on any page. Diagnose why a class is not working, see the CSS it generates, copy context for AI.

TailwindSight lets you inspect, edit, and debug Tailwind CSS classes directly on any webpage — in real time. Stop guessing why a class isn't working. Click it and find out. What It Does - TailwindSight shows all Tailwind CSS classes applied to any element on a webpage. Click an element to view, add, or remove classes — and see the result instantly. And when a class isn't doing what you expect, it tells you why, in plain English. New in v1.2.0 - → Class Debugger — click any class for a plain-English diagnosis of why it isn't applying → Inline CSS Explainer — hover a class to see the exact CSS it generates → Live Breakpoint Ruler — see your viewport width and active breakpoint as you resize → Copy for AI — one click copies full page context for Claude, ChatGPT, or Cursor Why You Should Install It - → Stop Guessing: Find out exactly why a class isn't working instead of trial-and-error → Debug Faster: Instantly see which Tailwind classes are applied to any element without inspecting code → Experiment Freely: Try different classes and see results immediately before updating your source code → Learn Tailwind: Explore how real websites use Tailwind classes and understand class combinations → Save Time: No more switching between browser DevTools and your code editor → Work With AI: Give your assistant the live browser context it can't get from your source files Core Features - → "Why Isn't This Class Working?" Debugger Click any class and get a plain-English answer. The viewport is too narrow for the responsive prefix. Another class is setting the same property. An inline style is winning the cascade. A page stylesheet rule has higher specificity. Classes with a real problem flag themselves before you even click. → Inline CSS Explainer Hover any class to see the exact CSS it generates, including the media query wrapper for responsive prefixes. No more switching tabs to check the docs. → Live Breakpoint Ruler A bar showing your live viewport width and which Tailwind breakpoint is active as you resize. It reads your project's real breakpoints from the page, so custom screens configs show their actual values. → Copy for AI One click copies the context an AI assistant can't get from your source code: element HTML, computed styles, detected issues, your Tailwind version, your real breakpoints, and which colour scheme is currently rendering. Paste it into Claude, ChatGPT, or Cursor and skip the back-and-forth. → Visual Inspection Click any element to view all its Tailwind CSS classes in a clean inspector panel. See exactly which classes are applied without digging through HTML or DevTools. → Live Editing Add or remove Tailwind classes with instant visual feedback. Changes apply immediately so you can experiment and iterate quickly. → Smart Autocomplete Type any partial class name and get intelligent suggestions from Tailwind's full class list. → Class Validation Classes are validated against Tailwind's class list as you type, catching typos before they reach your code. → Conflict Detection See which classes are active (green dot ●) versus inactive or overridden (gray dot ○). When two classes set the same property — like gap-2 and gap-4 — TailwindSight names the property they're competing over so you know which one to remove. → Undo/Redo Full history tracking lets you undo and redo changes. Experiment without worry — you can always revert back. → Copy to Clipboard Copy all classes, the element's full HTML, or a complete AI context block, each with one click. Supports All Tailwind Patterns - • Responsive variants (md:, lg:, etc.) • State variants (hover:, focus:, dark:) • Arbitrary values (text-[#1da1f2], w-[137px]) • Important modifiers (!text-center, !hidden) • Combined modifiers (md:hover:text-4xl) • Opacity and color modifiers (bg-black/50, text-gray-600/90) • Custom breakpoints defined in your own config Perfect For - • Frontend developers debugging Tailwind CSS layouts • Designers prototyping interfaces with Tailwind • Developers learning Tailwind CSS by example • Anyone using AI assistants to write Tailwind code • Teams collaborating on Tailwind projects How It Works - 1. Click the TailwindSight icon in your browser toolbar 2. Click "Start Inspecting" 3. Click any element on the webpage 4. View classes, add new ones, remove existing ones, or click the debug icon to diagnose one 5. Changes apply instantly on the page Privacy & Permissions - TailwindSight does not collect, store, or transmit any data. Everything happens locally in your browser — no browsing history, no personal information, no analytics, and no external network requests of any kind. The extension requests access to webpages so it can read and edit the classes on the page you're inspecting. It stays inactive until you click "Start Inspecting". Technical Details - • Detects and supports Tailwind CSS v3 and v4 automatically • Reads your project's real breakpoints, including custom screens configs • Manifest V3 compliant (secure and lightweight) • Compatible with Chrome 88+ • No external dependencies, libraries, or network requests Support & Feedback - Have questions or suggestions? GitHub: https://github.com/SidAsif/TailwindSight Email: asifsidcontact@gmail.com Not affiliated with, endorsed by, or sponsored by Tailwind Labs Inc. Tailwind CSS is a trademark of Tailwind Labs Inc.