https://github.com/beumerr/tailwind-stash
A VS Code extension that collapses long Tailwind CSS class strings to keep your templates clean and readable. Includes a Tailwind CSS preview and management panel
https://github.com/beumerr/tailwind-stash
collapse open-vsx preview tailwind tailwindcss vscode-extension
Last synced: 4 months ago
JSON representation
A VS Code extension that collapses long Tailwind CSS class strings to keep your templates clean and readable. Includes a Tailwind CSS preview and management panel
- Host: GitHub
- URL: https://github.com/beumerr/tailwind-stash
- Owner: beumerr
- License: mit
- Created: 2026-03-05T23:30:42.000Z (4 months ago)
- Default Branch: master
- Last Pushed: 2026-03-09T23:14:37.000Z (4 months ago)
- Last Synced: 2026-03-10T04:32:08.316Z (4 months ago)
- Topics: collapse, open-vsx, preview, tailwind, tailwindcss, vscode-extension
- Language: TypeScript
- Homepage:
- Size: 1000 KB
- Stars: 3
- Watchers: 0
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- Contributing: CONTRIBUTING.md
- Funding: .github/FUNDING.yml
- License: LICENSE
- Codeowners: .github/CODEOWNERS
Awesome Lists containing this project
README
# Tailwind Stash
A VS Code extension that collapses long Tailwind CSS class strings to keep your templates clean and readable. Includes an editable side panel for managing classes across your file.
## Features
### Horizontal Collapse
Collapses class strings into a compact placeholder. Hover over the collapsed text to see all classes in a tooltip. The placeholder style is configurable:
- **count** (default): `class="6"`
- **count-long**: `class="6 classes"`
- **empty**: `class="…"`
- **placeholder labels**: `class="btn +2"` (when placeholders are configured)
```html
```
The line the cursor is on is always expanded, so you can read and edit classes normally.
### Placeholder Labels
Map short names to class strings for meaningful fold labels. When a class string contains all classes from a placeholder, the label is shown instead of the count. Multiple placeholders can match simultaneously.
```jsonc
// settings.json
"tailwindStash.placeholders": {
"btn": "px-4 py-2 bg-blue-500 text-white rounded hover:bg-blue-700",
"flex-center": "flex justify-center items-center"
}
```
```html
```
The format is configurable via `tailwindStash.placeholderFormat` (default: `{keys} +{rest}`). The `+{rest}` portion is hidden when there are no extra classes.
Placeholder keys also appear as **autocomplete suggestions** when typing inside class attributes, and can be expanded into full class strings with the **Expand Placeholder** command (`Alt+Shift+X`).
### Class Editor Panel
Opens an editable side panel showing all Tailwind classes in your file, organized by element. Each element's classes are shown in a textarea — edit them directly and changes sync back to the source. Click an element header to jump to it in the editor.
The panel highlights the active element as you move your cursor, and selecting a textarea in the panel scrolls the editor to that element (both behaviors are configurable).
## Usage
### Commands
All commands are available via the Command Palette (`Ctrl+Shift+P`):
| Command | Description |
|---|---|
| Tailwind Stash: Toggle Collapse Classnames | Toggle collapsing on/off |
| Tailwind Stash: Collapse All Classnames | Collapse all class strings |
| Tailwind Stash: Expand All Classnames | Expand all class strings |
| Tailwind Stash: Show Class Editor Panel | Open the class editor panel |
| Tailwind Stash: Hide Class Editor Panel | Close the class editor panel |
| Tailwind Stash: Toggle Class Editor Panel | Toggle the class editor panel |
| Tailwind Stash: Expand Placeholder | Expand the placeholder key at the cursor into its full class string |
### Default Keyboard Shortcuts
| Shortcut | Command |
|---|---|
| `Alt+Shift+T` | Toggle Collapse Classnames |
| `Alt+Shift+C` | Collapse All Classnames |
| `Alt+Shift+E` | Expand All Classnames |
| `Alt+Shift+P` | Show Class Editor Panel |
| `Alt+Shift+L` | Toggle Class Editor Panel |
| `Alt+Shift+X` | Expand Placeholder |
All shortcuts are configurable — either through VS Code's keyboard shortcuts settings (`Ctrl+K Ctrl+S`) or via the extension settings below.
## Supported Languages
HTML, JavaScript, JSX, TypeScript, TSX, Vue, Svelte, Astro, PHP
## Supported Utility Functions
Class strings inside these functions are detected and collapsible. The defaults are:
`cn()`, `clsx()`, `cva()`, `cx()`, `twMerge()`, `twJoin()`, `classNames()`, `classnames()`
This list is fully configurable via the `tailwindStash.supportedFunctions` setting. You can add plain function names or regex patterns wrapped in `/` delimiters:
```jsonc
"tailwindStash.supportedFunctions": [
"cn",
"clsx",
"myCustomHelper",
"/^get.*Classes$/" // matches getButtonClasses, getCardClasses, etc.
]
```
## Settings
### Folding
| Setting | Default | Description |
|---|---|---|
| `tailwindStash.foldByDefault` | `true` | Collapse classes automatically when a file is opened |
| `tailwindStash.placeholderStyle` | `"count"` | Placeholder style: `count` (`3`), `count-long` (`3 classes`), or `empty` (`…`) |
| `tailwindStash.minClassCount` | `4` | Minimum number of classes before collapsing kicks in |
| `tailwindStash.extraLanguages` | `[]` | (Experimental) Additional language IDs to enable collapsing for. Requires reload. |
| `tailwindStash.placeholders` | `{}` | Map of short labels to Tailwind class strings for smart fold placeholders and autocomplete |
| `tailwindStash.placeholderFormat` | `"{keys} +{rest}"` | Format template for matched placeholder labels. `{keys}` = matched names, `{rest}` = extra class count |
| `tailwindStash.supportedFunctions` | `["cn", "clsx", ...]` | Function names (or `/regex/` patterns) that wrap Tailwind classes |
### Panel
| Setting | Default | Description |
|---|---|---|
| `tailwindStash.scrollEditorOnPanelSelect` | `true` | Scroll the editor to the class range when clicking a textarea in the panel |
| `tailwindStash.scrollPanelOnEditorSelect` | `true` | Scroll the panel to the active card when focusing a class in the editor |
### Appearance
| Setting | Default | Description |
|---|---|---|
| `tailwindStash.foldedTextColor` | `""` | Color of the placeholder text (e.g. `"#888"`). Empty = theme default. |
| `tailwindStash.elementTextColor` | `""` | Color of the element name in the card header (e.g. `"#ee9d28"`). Empty = default. |
| `tailwindStash.activeBorderColor` | `""` | Border color of the active card (e.g. `"#007fd4"`). Empty = VS Code focus border. |
| `tailwindStash.textareaFocusBackground` | `""` | Background color of the textarea when focused (e.g. `"rgba(0,100,200,0.1)"`). Empty = default. |
### Keyboard Shortcuts
These settings let you change keybindings without opening VS Code's keyboard shortcuts editor. All require a reload after changing.
| Setting | Default | Description |
|---|---|---|
| `tailwindStash.shortcutToggleCollapse` | `"alt+shift+t"` | Keyboard shortcut for Toggle Collapse |
| `tailwindStash.shortcutCollapseAll` | `"alt+shift+c"` | Keyboard shortcut for Collapse All |
| `tailwindStash.shortcutExpandAll` | `"alt+shift+e"` | Keyboard shortcut for Expand All |
| `tailwindStash.shortcutShowPanel` | `"alt+shift+p"` | Keyboard shortcut for Show Class Editor Panel |
| `tailwindStash.shortcutHidePanel` | `""` | Keyboard shortcut for Hide Class Editor Panel |
| `tailwindStash.shortcutTogglePanel` | `"alt+shift+l"` | Keyboard shortcut for Toggle Class Editor Panel |
| `tailwindStash.shortcutExpandPlaceholder` | `"alt+shift+x"` | Keyboard shortcut for Expand Placeholder |
## Contributing
Contributions are welcome! See [CONTRIBUTING.md](CONTRIBUTING.md) for setup instructions, architecture overview, and development guidelines.
## Support
If you find this extension useful, consider [sponsoring the project](https://github.com/sponsors/beumerr).