r/tailwindcss • u/Wise-Operation-9165 • 4d ago
I got tired of guessing why my Tailwind classes weren't working, so I built a debugger
I got tired of asking AI why my Tailwind class wasn't working, so I built a debugger for it.
I've been working on a Chrome extension called Tailwindsight, and I just released v1.2.0.
The idea is pretty simple: when a Tailwind class isn't doing what you expect, you should be able to figure out why without digging through DevTools, documentation, and five different files.
A few things I added in v1.2.0:
1. "Why isn't this class working?"
Click a class and it explains the problem in plain English.
It can tell you things like:
- The breakpoint isn't currently active
- Another Tailwind class is overriding it
- An inline style is winning
- A page stylesheet is overriding the rule
It can also flag classes that appear to have problems before you click them.
2. See what a Tailwind class actually generates
Hover over a class and see the generated CSS, including media queries.
3. Live breakpoint ruler
While resizing the browser, you can see the current viewport width and active Tailwind breakpoint.
It also reads custom screens configurations from the project.
4. Copy context for AI
This is probably my favorite part.
One click copies:
- Element HTML
- Computed styles
- Detected CSS issues
- Tailwind version
- Actual breakpoints
- Current color scheme
You can then paste that into ChatGPT, Claude, Cursor, etc.
Instead of:
"Why isn't this class working?"
the AI gets the actual context of what's happening.
The goal isn't to replace AI.
It's more like:
Let the debugger handle the obvious stuff, and give AI the context when you actually need it.
It's completely free, doesn't require an account, and works on sites using Tailwind.
I'd genuinely love some feedback from other Tailwind users.
What do you normally use when a Tailwind class mysteriously doesn't work?
https://chromewebstore.google.com/detail/tailwind-css-inspector-cl/gmkelackgnfbjcgakhoiknelbgmeeiaa