Tailscan for Tailwind CSS

The core idea is that you never leave the page. Hover any element to see its Tailwind classes, press Space to pin it, and then add, edit or hide classes while the design updates in real time. Changes are kept per element, so you can experiment freely and copy every edit at once when you're done. For anyone who resents the save-and-reload cycle, this is the feature that pays for the tool.

Version 3 adds an AI panel that turns a plain-English request into Tailwind changes. You type something like "make this button larger with rounded corners" and the classes apply automatically, with the option to keep them as visible utilities. It also exports your changes as clean code or reusable prompts so the same style can be repeated across a project. The catch is the meter: the plan allows 1000 AI requests a month, after which it switches you to a cheaper model for the rest of that month.

You can convert element to Tailwind component in a click. Tailscan turns any element on any website into a reusable Tailwind CSS component. That means you can grab a card, a nav bar or a button you like, convert it, and drop the markup into your own project instead of rewriting it class by class. It's the part that turns inspection into actual output, and it's why people use it on sites that aren't their own.

You can add any Tailwind class and variant, including ones your build purges, and classes that use arbitrary values. Bring your own Tailwind config and your theme extensions show up right away, so the suggestions match your project rather than stock Tailwind. That last point matters for teams that lean on custom scales, because a stock-only inspector quickly becomes useless to them.

Tailscan plugs into the browser devtools. You can edit classes inside the devtools panel and use native element selection, and every class is compiled as you type. Autocompletion suggests the right class and previews its color, while a breakpoint readout tells you which Tailwind breakpoint you're currently viewing. It's the difference between guessing a class name and being told it.

Computed regions and guidelines show the actual margin and padding around an element, so alignment problems stop being guesswork. A built-in screenshot tool captures part of the screen for a quick handoff, and you can copy either the class list or the entire element with your edits baked in. Small conveniences, but they add up over a working day.