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
• Multiple Content Sources: Work with dev servers, static builds, or external URLs
• Authentication Support: Edit apps behind authentication (Bearer tokens, cookies, etc.)

Getting Started

With Dev Server (Default)

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

With External URL

1. Run your dev server separately (npm run dev on port 3000, etc.)
2. Run command: VS Design: Connect to External URL
3. Enter your URL (e.g., http://localhost:3000)
4. The extension will proxy the connection and enable visual editing

With Static Build

1. Build your project (npm run build)
2. Run command: VS Design: Open Build Folder
3. Select your build output folder (dist, build, out, etc.)
4. Edit your static build visually

Authentication

For apps behind authentication:

1. Run command: VS Design: Set Authentication
2. Choose auth type:
   • Bearer Token: For JWT/API token auth
   • API Key: For API key header auth
   • Basic Auth: For username:password auth
   • Cookie: For session cookie auth
3. Enter your credentials
4. All requests will include authentication

To clear auth: VS Design: Clear Authentication

Requirements

• A project using Tailwind CSS
• Node.js and npm installed
• For dev server mode: 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

Commands

Supported Frameworks

• Astro
• React (JSX/TSX)
• Vue
• Svelte
• Next.js
• Any framework with Vite

How It Works

The extension uses a proxy server to:

1. Serve content from dev servers, static builds, or external URLs
2. Inject source mapping so clicks on elements trace back to your code
3. Strip security headers that prevent iframe embedding
4. Inject authentication credentials when configured

When you edit styles, it parses your source file and updates the class attribute directly.

Free and open source