Tailwind CSS 4 Theme Workbench

Inspect and tune live CSS variables instantly.

WindPanel automatically scans your website for Tailwind theme modes, presents a premium editor interface, and maps variables live so you can iterate on brand styles directly in the browser.

Local-first extension, no analytics or tracking code.

my-tailwind-project.dev

Live Surface Preview

Theme Colors

WindPanel Mock Workbench

--primary

--accent

Tailwind v4 Theme Inline Workflows Detects inline theme configurations, local variables, and full stylesheet overrides natively.

Mode Aware Flexible Selectors Supports light, dark, custom dim modes, data attributes, class-based toggling, and media queries.

Privacy First Zero Remote Code No tracking, no third-party APIs. Presets are stored directly in your browser's private extension storage.

Key Capabilities

Everything you need to customize your UI.

Detection Engine

Detect real modes

Find complete Tailwind 4 theme surfaces across :root, class selectors, body classes, and data-theme attributes.

Visual Editor

Edit with context

Change OKLCH colors, radius, shadows, typography, and raw CSS while previewing the result against the page.

Local Presets

Preserve presets

Save imported or hand-tuned themes locally so the same palette is ready the next time you open the browser.

Production Ready

Export clean CSS

Copy the whole theme or a single mode when you are ready to move changes back into your project.

Workflows

Built to integrate with how you work.

Instead of manual cycles modifying stylesheet values, reloading components, and checking responsiveness, WindPanel updates your site context in real time.

Mount on site

Open the embedded demo or any supported Tailwind site in your browser.

Read active state

WindPanel reads the active selectors and mode variables directly from page state.

Tune values live

Use the UI dials to tweak OKLCH colors, radius, shadows, or paste direct CSS overrides.

Export back to project

Copy the generated Tailwind CSS variables and place them back in your global stylesheet.

Try Without Installing

Explore the embedded demo.

The demo injects our actual Svelte theme-panel directly in the webpage. You can test active selectors, tweak OKLCH colors, switch custom dark-contrast presets, and export clean Tailwind CSS.

FAQ

Frequently Asked Questions

How does theme detection work under the hood?

WindPanel content scripts scan your page for standard Tailwind / shadcn CSS custom properties like --background, --primary, and --radius. It reads their computed values and temporary probe stylesheets to detect complete mode differences.

Do I need to change my build configuration to use it?

No! WindPanel inspects standard, unminified CSS custom properties in your dev environment. It works out of the box with standard Tailwind CSS v4 and shadcn components without any build plugins.

Are my theme edits sent to any external servers?

Absolutely not. WindPanel is completely local-first and privacy-respecting. All theme definitions, presets, and customized values are saved purely inside the browser's local storage.

Does it support custom selectors or attributes?

Yes! It automatically detects common theme conventions (e.g., class='dark', data-theme='dim', data-color-scheme='dark') and lets you sync controls with whichever selector your website uses.

Permissions

Uses standard storage permissions for saving user presets and page access to inspect CSS theme variables on dev-mode websites.

Data model

Directly reads custom properties, mode selectors, active HTML classes, and computes variables using inline probes. No databases required.

Best fit

Projects built on Tailwind CSS v4, shadcn-compatible CSS custom properties, OKLCH palettes, and teams working with clean atomic layouts.