WindPanel

About

WindPanel is a developer tool for inspecting, editing, and experimenting with Tailwind CSS v4 theme variables directly on any website.

If you build with Tailwind v4, shadcn-style CSS variables, OKLCH colors, light/dark themes, or custom theme modes, WindPanel gives you a live visual control panel inside the page so you can understand and tune your theme without jumping between DevTools, CSS files, and browser refreshes.

What WindPanel does:

WindPanel detects Tailwind-style CSS theme variables from the current page and opens a right-side panel with three focused workspaces:

Presets:
Quickly preview and apply theme presets to the active website mode. WindPanel includes bundled presets and lets you import, duplicate, edit, and persist custom presets across browser sessions. Presets can include colors, radius, shadows, typography, and mode-specific values.

Variables:
Browse detected CSS variables in practical groups such as Basic, Border, Typography, Charts, Background, and Miscellaneous. Edit values live and see the website update immediately. Color variables include an OKLCH-friendly picker, swatches, and channel sliders, while typography, shadows, border, and radius values get more useful controls than a plain text field.

Theme:
View and edit the raw CSS theme across all detected modes. WindPanel can parse CSS custom property blocks, preserve selectors, report parse errors with snippets and line numbers, copy the entire theme, copy individual modes, paste theme CSS from the clipboard, and save the current theme as a preset.

Why install WindPanel:

Tailwind v4 themes are powerful, but real projects often spread theme behavior across :root variables, .dark classes, body classes, data-theme attributes, inline @theme mappings, and custom selectors. WindPanel helps you see what is actually active in the browser.

Use WindPanel when you want to:

- Inspect the theme variables currently available on a page
- Distinguish light, dark, and custom modes from real selectors
- Test website-side theme toggles while keeping the editor in sync
- Adjust OKLCH colors visually without manually typing every value
- Experiment with radius, shadow, typography, and color tokens live
- Try presets quickly before committing changes to code
- Import or export full CSS theme blocks
- Debug missing or malformed theme variables
- Build and compare Tailwind/shadcn themes faster

Built for Tailwind CSS v4 workflows:

WindPanel is especially useful for projects that use CSS-first Tailwind v4 configuration, @theme inline mappings, OKLCH color tokens, shadcn-style variable names, and selector-based dark mode. It does not assume that dark mode is always only .dark. It reads the active theme from the page and treats the website’s current html/body class or data attribute as the source of truth.

Live editing without leaving the page:

The panel is injected directly into the website, so you can make changes while seeing real components, layouts, contrast, borders, charts, cards, and backgrounds respond instantly. This makes theme work more visual and less guess-heavy.

Preset-driven experimentation:

WindPanel’s preset workflow helps you move faster when exploring design directions. Apply a preset to the active mode, duplicate it, import from clipboard, or save the current page theme as a reusable preset. Custom presets are stored locally so they remain available after closing the browser.

Raw CSS import and export:

When you are ready to move from experimentation to implementation, copy the full theme CSS or copy one mode at a time. If pasted CSS contains errors, WindPanel keeps your input and reports where parsing failed so you can correct it safely.

Who it is for:

WindPanel is designed for frontend developers, UI engineers, designers who work in code, design system maintainers, and anyone building themeable interfaces with Tailwind CSS v4 or CSS custom properties.

Install WindPanel if you want a faster way to inspect, edit, preview, and export real Tailwind theme variables directly in the browser.