TailwindCSS Visualizer

TailwindCSS Visualizer helps you understand and debug your Tailwind classes by visualizing them in real-time.

✨ Features

Real-time Preview: Instantly see what your Tailwind classes look like on a sample element.
Sequential Animation: Watch classes apply one-by-one to understand how they layer together.
Speed Control: Adjust the animation speed with a slider (Slow to Fast).
Dynamic Styling: Supports any Tailwind class, including arbitrary values (e.g., bg-[#123]) and gradients.
Zero Config: Works automatically with your existing Tailwind setup.

Install the extension.
Open any HTML or JSX/TSX file.
Press the shortcut to open the panel:
- Mac: Cmd + Option + V
- Windows/Linux: Ctrl + Alt + V
Click on any class="..." string in your code.
The panel will instantly update with a live preview!

OS	Command	Keybinding
Mac	Toggle Visualizer	`Cmd + Option + V`
Win/Linux	Toggle Visualizer	`Ctrl + Alt + V`

Styles not showing?
- Make sure you have an active internet connection (the extension uses the Tailwind CDN for dynamic generation).
- Try reloading the window (Cmd+R / Ctrl+R).

Enjoy building with Tailwind! 🎨