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
- Open VS Code
- Go to Extensions (Ctrl+Shift+X)
- Search for "Live Tailwind Previewer"
- Click Install
Usage
Basic Usage
Open the Preview Panel:
- Open Command Palette (
Ctrl+Shift+P ) and run Tailwind Previewer: Start Preview
Start Designing:
- Select an element type (div, button, input, etc.)
- Type your Tailwind classes in the textarea
- Watch the preview update in real-time!
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 😊
| |