TailwindSight — Inspect & Edit Tailwind CSS in Real-Time

About

TailwindSight lets you inspect and modify Tailwind CSS classes directly on any webpage — in real time. Debug, experiment, and learn faster by editing Tailwind classes visually without switching between your browser and code editor.

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.
Includes autocomplete, validation, and conflict detection to make Tailwind debugging effortless.

Why You Should Install It-
→ 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
→ Avoid Mistakes: Real-time validation prevents invalid class names and shows conflicts
→ Advanced Features: Get conflict detection, undo/redo, and active/inactive indicators that help you understand what's actually working

Core Features-
→ 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. Autocomplete shows valid Tailwind classes, making it faster to find what you need.

→ Class Validation
The extension validates every class in real-time. Invalid classes are highlighted with clear error messages, preventing typos and mistakes.

→ Conflict Detection
See which classes are active (green dot ●) versus inactive/overridden (gray dot ○). When you have conflicting classes like md:text-3xl and md:text-4xl, TailwindSight shows which one actually applies.

→ Undo/Redo
Full history tracking lets you undo and redo changes. Experiment without worry - you can always revert back.

→ Copy to Clipboard
One-click copy of all classes makes it easy to transfer your changes to your source code.

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)

Perfect For-
• Frontend developers debugging Tailwind CSS layouts
• Designers prototyping interfaces with Tailwind
• Developers learning Tailwind CSS by example
• 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, or remove existing ones
5. Changes apply instantly on the page

Privacy & Permissions-
TailwindSight does not collect any data. All operations happen locally in your browser. No browsing history, personal information, or usage data is collected, stored, or transmitted. Your privacy is completely protected.

The extension only requires permissions to interact with webpages you're actively working on. No background tracking or data collection occurs.

Technical Details-
• Works with all versions of Tailwind CSS
• Manifest V3 compliant (secure and lightweight)t
• Compatible with Chrome 88+
• No external dependencies or libraries

Support & Feedback-
Have questions or suggestions?
GitHub: https://github.com/SidAsif/TailwindSight
Email: [email protected]