See, edit, and ship Tailwind — visually, on any site
Winspect turns every webpage into a live Tailwind editor. Hover to reveal the utilities behind any element, rewrite classes with instant feedback, and copy production-ready code — no dev server, no rebuild, no guesswork.
One-time purchase from $79 · 7-day money-back guarantee
In action
Ninety seconds from install to first edit
Watch the full loop: inspect an element, rewrite its classes, and copy the diff back into your project.
What it does
One extension, four superpowers
Everything you reach for DevTools to do with Tailwind — minus the friction.
Design
Restyle any element in place. Edit utilities with autocomplete, nudge spacing and color from the keyboard, and watch the page respond as you type.
Debug
Find out why a layout breaks. Box-model overlays, flex and grid outlines, and computed values point straight at the class responsible.
Lookup
Decode any interface on the web. Hover to reveal the full class list, active variants, and breakpoints — and learn how the sites you admire are put together.
AI
Describe the change, get the classes. Winspect AI proposes a utility diff for your selection and you apply it with a single click.
Winspect AI
Say the change. Ship the classes.
On the Core + AI plan, describe what you want in plain English and review a precise utility diff before anything touches the page.
make the button bigger and rounded
Here's the change — 3 utilities in, 3 out:
1,000 requests a month under fair use. Only the selected element's markup and your prompt are ever sent.
Inspect
Hover anywhere. Understand everything.
Move your cursor across a page and Winspect lights up the structure beneath it: margins, padding, dimensions, and the exact utilities producing them. No digging through DevTools trees to answer a simple question.
- Box-model overlay with live margin, padding, and size readouts
- Full class list grouped by category, variant, and breakpoint
- Pin an element to compare it against another
Edit
Edit classes like you never left your editor.
The class field autocompletes every utility your page can express — including your own theme values. Arrow keys step through spacing scales and color shades while the element updates in real time.
- Tailwind-aware autocomplete with your theme's tokens
- Keyboard nudging: step values up and down without retyping
- Full undo history for every experiment
Anywhere
Purged stylesheets can't stop it.
Production builds strip every unused class — which is exactly where most tools give up. Winspect compiles missing utilities on the fly inside the page, so a class you type always renders, even if the site never shipped it.
- Generates absent utilities at runtime, right in the browser
- Import your tailwind config for accurate colors, fonts, and spacing
- Works with Tailwind v3 and v4 projects alike
Ship
From experiment to commit in one copy.
When a variation looks right, take it with you. Copy the changed classes as a clean diff, grab the element as a JSX or HTML snippet, or capture a pixel-accurate screenshot for review.
- Class diffs that paste cleanly into your codebase
- JSX and HTML export for any selected element
- One-click element screenshots for design reviews
Integrate
At home in your DevTools.
Winspect adds its own panel beside Elements and Console, keeps a live breakpoint indicator in view while you resize, and stays entirely keyboard-driven — so it fits the way you already debug.
- Dedicated DevTools pane synced with your selection
- Active breakpoint indicator while resizing the viewport
- Keyboard shortcuts for every core action
Pricing
Own it, or supercharge it
Core is a one-time purchase you keep forever. Add AI when you want the classes written for you.
Winspect Core
The complete visual inspector and editor for Tailwind CSS.
Pay once, keep it forever.
- Every inspector feature — nothing gated
- Lifetime Core updates included
- Activate on up to 3 devices
- Tailwind v3 and v4 support
- Works on production sites with purged CSS
- Custom config and theme import
Winspect Core + AI
Everything in Core, plus an AI assistant that writes the classes for you.
Billed annually at $180/yr. Core license included.
- Everything in Winspect Core
- AI styling — describe changes in plain English
- Class-diff previews before anything is applied
- 1,000 AI requests per month (fair use)
- Priority support
| Compare plans | Core | Core + AI |
|---|---|---|
| Visual inspector with box-model overlay | ||
| Live class editing with autocomplete | ||
| Runtime class generation on purged CSS | ||
| Tailwind v3 & v4, custom config import | ||
| Copy & export — classes, snippets, screenshots | ||
| DevTools panel & breakpoint indicator | ||
| Devices per license | 3 | 3 |
| Updates | Lifetime Core updates | Everything, always current |
| AI styling assistant | ||
| AI requests included | — | 1,000/mo fair use |
7-day money-back guarantee. No questions asked.
FAQ
Questions, answered
Everything people usually ask before installing. Anything else — support is one email away.
Your next redesign starts in the browser
Install Winspect, open any page, and make your first live edit in under a minute. Backed by a 7-day money-back guarantee.