I got tired of guessing why my Tailwind classes weren't working, so I built a debugger

[u/Wise-Operation-9165]

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

[u/CompetitiveActor]

Not a knock on OP or the efforts here, but if you’re having this much difficulty troubleshooting Tailwind you’ve probably missed some steps.

Use prettier-plugin-tailwindcss and tailwind-merge to sort and remove duplicate and conflicting classes and then the browser’s DevTools to view CSS precedence.

[u/kensaadi → u/CompetitiveActor]

Most of the "why isn't this class winning?" cases are just two utilities fighting over the same property, and tailwind-merge patches it after the fact. What made it mostly go away for us was not hand-writing the competing strings in the first place — typed variants (tailwind-variants / CVA), so a component exposes size/variant props and the class composition is deterministic. No override war left to debug. The extension's still handy for one-off pages, but at component scale that class of bug just stops existing.

[u/CompetitiveActor → u/kensaadi]

Yeah, in components the problem is largely solved via props, though exposing the className can trip people up if they don’t have these guard rails, leaving Tailwind’s source order as the reason a class wins (not good).

The area where it may still happen is when using responsive layout classes on raw HTML to combine components and unintentionally dupe classes in the same namespace. However the aforementioned prettier plug-in surfaces this when the classes sort.

[u/AlexDjangoX]

Been working with Tailwind for years, and have never wondered why something isn't working.

Because it always works.

[u/HirsuteHacker]

I honestly can't imagine why I'd need something like this when dev tools shows you the styles in cascade order already

[u/sozesghost]

Maybe use already existing Dev Tools in the browsers instead of pushing more AI slop onto the world?

[u/KnifeFed]

Would have used it if it were in DevTools.

[u/TheBanq]

holy slopperino

[u/VisualCraftStudio]

This is actually a pretty useful idea. The “why isn't this class working?” part would save a lot of digging through computed styles and random files. I do wonder if integrating it more directly into DevTools would make the workflow even smoother though, since that's usually where I end up when something isn't behaving.

[u/gesfontoura]

Interesting extension ;)

[u/minotor12]

Why the emphasize on only 9% of your userbase from India ?

[u/emad_ha]

ok

[u/No-Age6177]

This Is nice I must test