**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\]

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