Design - Visual Tailwind Editor for VS Code

Edit Tailwind CSS visually. Click any element in the live preview, adjust styles in the design bar, and watch changes sync to your source code instantly.

Features

• Click-to-Select: Click any element in the preview to select it
• Visual Design Bar: Edit spacing, colors, typography, and layout without writing CSS
• Live Preview: See changes instantly with hot module reload
• Source Sync: All edits update your actual source files - no generated code

Getting Started

1. Open any .astro, .tsx, .jsx, .vue, or .svelte file
2. Click Open Design View in the editor title bar (or run the command)
3. Click elements in the preview to select them
4. Use the design bar on the right to edit styles

Requirements

• A project using Tailwind CSS
• Node.js and npm installed
• A dev server that supports HMR (Astro, Vite, etc.)

Extension Settings

• vs-design.devServerCommand: Command to start the dev server (default: npm run dev)
• vs-design.devServerPort: Port for the dev server (default: 4321)
• vs-design.componentFolders: Folders to scan for components

Supported Frameworks

• Astro
• React (JSX/TSX)
• Vue
• Svelte

How It Works

The extension runs your dev server, displays it in a live preview panel, and injects source mapping so clicks on elements can be traced back to your code. When you edit styles, it parses your source file and updates the class attribute directly.

Free and open source