🌀 Style Fader – VS Code Extension
A lightweight VS Code extension to dim or collapse Tailwind className, class, and style attributes in JSX, TSX, HTML, and more.
✨ Features
- 🎯 Dim or collapse long Tailwind class strings
- 🎨 Supports both
class, className, and style attributes
- 🧠 Handles:
- Quoted strings:
"...", '...'
- Template literals:
`...`
- JSX expressions:
{ "..." }, { \...` }, { condition ? '...' : '...' }`
- 💻 Works in
.tsx, .jsx, .html, and more
🛠️ Modes
| Mode |
Description |
off |
No styling, disables decoration |
dim |
Fades class/style values using low opacity |
collapse |
Replaces class/style value with "...", shows on hover |
🚀 Usage
- Open Command Palette:
Ctrl+Shift+L → Tailwind Styler: Toggle Mode
- Cycles through:
off → dim → collapse
⚙️ Configuration
You can set the default mode in your settings (settings.json):
"tailwindStyler.mode": "collapse"
| |
