{"id":46781168,"url":"https://github.com/beumerr/tailwind-stash","last_synced_at":"2026-03-14T02:51:21.457Z","repository":{"id":342438268,"uuid":"1173957699","full_name":"beumerr/tailwind-stash","owner":"beumerr","description":"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 ","archived":false,"fork":false,"pushed_at":"2026-03-09T23:14:37.000Z","size":1029,"stargazers_count":3,"open_issues_count":0,"forks_count":0,"subscribers_count":0,"default_branch":"master","last_synced_at":"2026-03-10T04:32:08.316Z","etag":null,"topics":["collapse","open-vsx","preview","tailwind","tailwindcss","vscode-extension"],"latest_commit_sha":null,"homepage":"","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/beumerr.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":"CONTRIBUTING.md","funding":".github/FUNDING.yml","license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":".github/CODEOWNERS","security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null,"notice":null,"maintainers":null,"copyright":null,"agents":null,"dco":null,"cla":null},"funding":{"github":["beumerr"]}},"created_at":"2026-03-05T23:30:42.000Z","updated_at":"2026-03-09T23:12:39.000Z","dependencies_parsed_at":"2026-03-11T01:01:02.893Z","dependency_job_id":null,"html_url":"https://github.com/beumerr/tailwind-stash","commit_stats":null,"previous_names":["beumerr/tailwind-stash"],"tags_count":8,"template":false,"template_full_name":null,"purl":"pkg:github/beumerr/tailwind-stash","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/beumerr%2Ftailwind-stash","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/beumerr%2Ftailwind-stash/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/beumerr%2Ftailwind-stash/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/beumerr%2Ftailwind-stash/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/beumerr","download_url":"https://codeload.github.com/beumerr/tailwind-stash/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/beumerr%2Ftailwind-stash/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":30364580,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-03-10T21:41:54.280Z","status":"ssl_error","status_checked_at":"2026-03-10T21:40:59.357Z","response_time":106,"last_error":"SSL_connect returned=1 errno=0 peeraddr=140.82.121.5:443 state=error: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["collapse","open-vsx","preview","tailwind","tailwindcss","vscode-extension"],"created_at":"2026-03-10T00:07:50.835Z","updated_at":"2026-03-12T02:00:50.916Z","avatar_url":"https://github.com/beumerr.png","language":"TypeScript","funding_links":["https://github.com/sponsors/beumerr"],"categories":[],"sub_categories":[],"readme":"# Tailwind Stash\n\nA 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.\n\n![Tailwind Stash demo](docs/tailwind-stash.gif)\n\n## Features\n\n### Horizontal Collapse\n\nCollapses class strings into a compact placeholder. Hover over the collapsed text to see all classes in a tooltip. The placeholder style is configurable:\n\n- **count** (default): `class=\"6\"`\n- **count-long**: `class=\"6 classes\"`\n- **empty**: `class=\"…\"`\n- **placeholder labels**: `class=\"btn +2\"` (when placeholders are configured)\n\n```html\n\u003c!-- Before collapsing --\u003e\n\u003cdiv class=\"flex items-center justify-between p-4 bg-white rounded-lg shadow-md\"\u003e\n\n\u003c!-- After collapsing (count style) --\u003e\n\u003cdiv class=\"6\"\u003e\n```\n\nThe line the cursor is on is always expanded, so you can read and edit classes normally.\n\n### Placeholder Labels\n\nMap 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.\n\n```jsonc\n// settings.json\n\"tailwindStash.placeholders\": {\n  \"btn\": \"px-4 py-2 bg-blue-500 text-white rounded hover:bg-blue-700\",\n  \"flex-center\": \"flex justify-center items-center\"\n}\n```\n\n```html\n\u003c!-- class=\"px-4 py-2 bg-blue-500 text-white rounded hover:bg-blue-700 flex justify-center items-center mt-4\" --\u003e\n\u003c!-- Folds to: --\u003e\n\u003cdiv class=\"btn flex-center +1\"\u003e\n```\n\nThe format is configurable via `tailwindStash.placeholderFormat` (default: `{keys} +{rest}`). The `+{rest}` portion is hidden when there are no extra classes.\n\nPlaceholder 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`).\n\n### Class Editor Panel\n\nOpens 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.\n\nThe 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).\n\n## Usage\n\n### Commands\n\nAll commands are available via the Command Palette (`Ctrl+Shift+P`):\n\n| Command | Description |\n|---|---|\n| Tailwind Stash: Toggle Collapse Classnames | Toggle collapsing on/off |\n| Tailwind Stash: Collapse All Classnames | Collapse all class strings |\n| Tailwind Stash: Expand All Classnames | Expand all class strings |\n| Tailwind Stash: Show Class Editor Panel | Open the class editor panel |\n| Tailwind Stash: Hide Class Editor Panel | Close the class editor panel |\n| Tailwind Stash: Toggle Class Editor Panel | Toggle the class editor panel |\n| Tailwind Stash: Expand Placeholder | Expand the placeholder key at the cursor into its full class string |\n\n### Default Keyboard Shortcuts\n\n| Shortcut | Command |\n|---|---|\n| `Alt+Shift+T` | Toggle Collapse Classnames |\n| `Alt+Shift+C` | Collapse All Classnames |\n| `Alt+Shift+E` | Expand All Classnames |\n| `Alt+Shift+P` | Show Class Editor Panel |\n| `Alt+Shift+L` | Toggle Class Editor Panel |\n| `Alt+Shift+X` | Expand Placeholder |\n\nAll shortcuts are configurable — either through VS Code's keyboard shortcuts settings (`Ctrl+K Ctrl+S`) or via the extension settings below.\n\n## Supported Languages\n\nHTML, JavaScript, JSX, TypeScript, TSX, Vue, Svelte, Astro, PHP\n\n## Supported Utility Functions\n\nClass strings inside these functions are detected and collapsible. The defaults are:\n\n`cn()`, `clsx()`, `cva()`, `cx()`, `twMerge()`, `twJoin()`, `classNames()`, `classnames()`\n\nThis list is fully configurable via the `tailwindStash.supportedFunctions` setting. You can add plain function names or regex patterns wrapped in `/` delimiters:\n\n```jsonc\n\"tailwindStash.supportedFunctions\": [\n  \"cn\",\n  \"clsx\",\n  \"myCustomHelper\",\n  \"/^get.*Classes$/\"  // matches getButtonClasses, getCardClasses, etc.\n]\n```\n\n## Settings\n\n### Folding\n\n| Setting | Default | Description |\n|---|---|---|\n| `tailwindStash.foldByDefault` | `true` | Collapse classes automatically when a file is opened |\n| `tailwindStash.placeholderStyle` | `\"count\"` | Placeholder style: `count` (`3`), `count-long` (`3 classes`), or `empty` (`…`) |\n| `tailwindStash.minClassCount` | `4` | Minimum number of classes before collapsing kicks in |\n| `tailwindStash.extraLanguages` | `[]` | (Experimental) Additional language IDs to enable collapsing for. Requires reload. |\n| `tailwindStash.placeholders` | `{}` | Map of short labels to Tailwind class strings for smart fold placeholders and autocomplete |\n| `tailwindStash.placeholderFormat` | `\"{keys} +{rest}\"` | Format template for matched placeholder labels. `{keys}` = matched names, `{rest}` = extra class count |\n| `tailwindStash.supportedFunctions` | `[\"cn\", \"clsx\", ...]` | Function names (or `/regex/` patterns) that wrap Tailwind classes |\n\n### Panel\n\n| Setting | Default | Description |\n|---|---|---|\n| `tailwindStash.scrollEditorOnPanelSelect` | `true` | Scroll the editor to the class range when clicking a textarea in the panel |\n| `tailwindStash.scrollPanelOnEditorSelect` | `true` | Scroll the panel to the active card when focusing a class in the editor |\n\n### Appearance\n\n| Setting | Default | Description |\n|---|---|---|\n| `tailwindStash.foldedTextColor` | `\"\"` | Color of the placeholder text (e.g. `\"#888\"`). Empty = theme default. |\n| `tailwindStash.elementTextColor` | `\"\"` | Color of the element name in the card header (e.g. `\"#ee9d28\"`). Empty = default. |\n| `tailwindStash.activeBorderColor` | `\"\"` | Border color of the active card (e.g. `\"#007fd4\"`). Empty = VS Code focus border. |\n| `tailwindStash.textareaFocusBackground` | `\"\"` | Background color of the textarea when focused (e.g. `\"rgba(0,100,200,0.1)\"`). Empty = default. |\n\n### Keyboard Shortcuts\n\nThese settings let you change keybindings without opening VS Code's keyboard shortcuts editor. All require a reload after changing.\n\n| Setting | Default | Description |\n|---|---|---|\n| `tailwindStash.shortcutToggleCollapse` | `\"alt+shift+t\"` | Keyboard shortcut for Toggle Collapse |\n| `tailwindStash.shortcutCollapseAll` | `\"alt+shift+c\"` | Keyboard shortcut for Collapse All |\n| `tailwindStash.shortcutExpandAll` | `\"alt+shift+e\"` | Keyboard shortcut for Expand All |\n| `tailwindStash.shortcutShowPanel` | `\"alt+shift+p\"` | Keyboard shortcut for Show Class Editor Panel |\n| `tailwindStash.shortcutHidePanel` | `\"\"` | Keyboard shortcut for Hide Class Editor Panel |\n| `tailwindStash.shortcutTogglePanel` | `\"alt+shift+l\"` | Keyboard shortcut for Toggle Class Editor Panel |\n| `tailwindStash.shortcutExpandPlaceholder` | `\"alt+shift+x\"` | Keyboard shortcut for Expand Placeholder |\n\n## Contributing\n\nContributions are welcome! See [CONTRIBUTING.md](CONTRIBUTING.md) for setup instructions, architecture overview, and development guidelines.\n\n## Support\n\nIf you find this extension useful, consider [sponsoring the project](https://github.com/sponsors/beumerr).\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fbeumerr%2Ftailwind-stash","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fbeumerr%2Ftailwind-stash","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fbeumerr%2Ftailwind-stash/lists"}