🎨 Tailwind Theme Viewer Tailwind Theme Viewer is a VS Code extension tailored specifically for developers. Built for Tailwind CSS v4's @theme syntax and complex nested CSS structures, it provides a "Visual Variables Table" and a "Smart Two-Way Sync Outline" , instantly turning your stylesheets into beautiful, interactive style guides!

✨ Features

1. 🎨 Visual Variables Table

Automatically parses custom CSS variables (e.g., --color-...) in your files.

• Color Previews : Accurately captures Hex, RGBA, HSL, and color keywords (like white, transparent), rendering high-contrast physical color swatches right next to the variables.
• Smart Table Layout : Automatically gathers scattered variables into a neat three-column table (Variable Name | Preview & Value | Description).

2. 📑 Smart Nested Outline

Never get lost in thousands of lines of CSS again. The extension features a compiler-grade AST state machine parser :

• Tailwind-Specific Layers : Prioritizes directives like @theme, @layer, and @components with prominent labels and auto-expansion.
• Accordion Folding : Standard .class selectors automatically form a tree structure, supporting native smooth folding animations and indented guide lines.

3. 💬 Smart Comment Association

Maximize the value of your comments. The extension automatically transforms your comment styles based on context:

• Promoted Headers : Block comments directly above a class (/* Primary Button */) are promoted to prominent headers, while the .class itself gracefully acts as a secondary tag.
• Hover Tooltips : Inline comments next to properties (/* Firefox only */) automatically become 💬 icons. Hover over them to see a native tooltip.
• Auto Dividers : Standalone comments (e.g., /* Footer */ or comments containing ====) are automatically converted into elegant dividers spanning the panel.

4. 🔄 Two-Way Precision Sync

Deep integration between the outline panel and the VS Code editor for a seamless development experience:

• Click to Go : Click any variable or class in the outline, and the editor cursor will instantly jump and center on that line of code.
• Scroll to Sync : As you move the cursor or type in the editor, the outline panel automatically scrolls to the corresponding position and highlights it.

5. ⚡ Live Reload & Search

• Debounced Updates : Parses in the background as you type. A 0.5-second delay locally replaces DOM nodes, ensuring zero flickering and extreme performance.
• Real-Time Search : A built-in search bar at the top allows you to quickly filter by class names, variables, or comment content.

🚀 Usage

1. Open any file containing CSS or Tailwind syntax (.css) in VS Code.
2. Click the convenient shortcut buttons located in the top right corner of your editor.
3. Alternatively, press Ctrl + Shift + P (or Cmd + Shift + P on Mac) to open the Command Palette and execute the following commands:

💡 Tips for the Best Experience

To get the absolute best visual presentation in the outline, we highly recommend the following commenting styles: Section Dividers Simply leave a blank line below the comment, or use repeated characters (e.g., ---):

/* ===================== */
/* Layout Section        */
/* ===================== */

``` **Class Descriptions** Place comments directly above the class. The outline will prioritize displaying your comment text:

/* Main checkout button (becomes a prominent header in the outline) */ .checkout-btn { ... }

``` Inline Tooltips (Variables & Properties) Place comments at the end of the same line. These will become handy 💬 hover tooltips in the outline:

--color-secondary: #64748b; /* Replaces the original Slate-500 */
scrollbar-width: none; /* Hide scrollbar in Firefox */

🛠️ Development & Performance

This extension does not rely on hefty dependencies like PostCSS. Instead, it utilizes a custom-built, lightweight State Machine Lexer for AST parsing, ensuring blazing-fast performance and minimal resource consumption even on massive CSS files.