Free beta · Chrome & Edge

Inspect and live-edit Tailwind CSS classes in DevTools

Select an element, see its classes, toggle or add them, and watch the page update. Classes the page doesn't ship are compiled on the fly, so you can try an idea before touching your code.

Store links will appear here at launch.

Grinbal is a free beta for Chrome and Microsoft Edge.

How it works

Open DevTools, go to the Elements panel and select the Tailwind tab in the sidebar.
Select any element. Its classes show up as chips: click one to switch it off or on, use × to remove it, or type new classes and press Add.
Press Copy to get the final class list, or Reset to go back to the original.

Good to know

Live preview for new classes. Added classes are compiled with the Tailwind CSS v4 compiler and injected into the page. A dashed chip means the class generates no CSS.
Uses your site's theme. On Tailwind v4 sites, your colors, fonts and spacing are read from the page, so custom classes like bg-brand-500 render correctly.
Built for v4 first. On a site that isn't using Tailwind v4, the panel says so, and a few utilities (shadows, rounded corners, rings) can look different in the preview.
Nothing is saved or sent. Changes live only in the open tab and disappear when you reload. Grinbal has no account, no analytics and no server. See the privacy policy.