Live Tailwind Previewer

🎨 A VS Code extension that allows you to preview Tailwind CSS utility classes in real-time within a custom side panel.

Installation

From VS Code Marketplace

1. Open VS Code
2. Go to Extensions (Ctrl+Shift+X)
3. Search for "Live Tailwind Previewer"
4. Click Install

Usage

Basic Usage

1. Open the Preview Panel:

   • Open Command Palette (Ctrl+Shift+P) and run Tailwind Previewer: Start Preview

2. Start Designing:

   • Select an element type (div, button, input, etc.)
   • Type your Tailwind classes in the textarea
   • Watch the preview update in real-time!

3. Customize Content:

   • Change the display mode (centered, full-width, inline)
   • Update the custom text/content
   • Copy classes to clipboard when ready

Enjoy previewing your Tailwind CSS classes! 🎨

If you find this extension helpful, please consider:

• ⭐ Starring the repository
• 🐛 Reporting issues
• 💡 Suggesting new features
• 🤝 Contributing to the project

Have fun 😊