{"id":32791576,"url":"https://github.com/gavbarosee/plainwind","last_synced_at":"2026-05-05T13:32:36.588Z","repository":{"id":321583974,"uuid":"1069604936","full_name":"gavbarosee/plainwind","owner":"gavbarosee","description":"Plainwind translates Tailwind CSS classes into plain English, making complex classes instantly readable.","archived":false,"fork":false,"pushed_at":"2025-10-30T11:09:50.000Z","size":12033,"stargazers_count":1,"open_issues_count":0,"forks_count":0,"subscribers_count":0,"default_branch":"main","last_synced_at":"2025-10-30T13:11:54.276Z","etag":null,"topics":["code-readability","code-review","codelens","codelens-extension","css","cursor-ide","developer-experience","developer-tools","productivity","tailwind","tailwindcss","utility-css","vscode","vscode-extension"],"latest_commit_sha":null,"homepage":"https://plainwind.dev","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/gavbarosee.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"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}},"created_at":"2025-10-04T09:01:44.000Z","updated_at":"2025-10-30T11:09:54.000Z","dependencies_parsed_at":"2025-10-30T13:25:15.474Z","dependency_job_id":null,"html_url":"https://github.com/gavbarosee/plainwind","commit_stats":null,"previous_names":["gavbarosee/plainwind"],"tags_count":null,"template":false,"template_full_name":null,"purl":"pkg:github/gavbarosee/plainwind","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/gavbarosee%2Fplainwind","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/gavbarosee%2Fplainwind/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/gavbarosee%2Fplainwind/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/gavbarosee%2Fplainwind/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/gavbarosee","download_url":"https://codeload.github.com/gavbarosee/plainwind/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/gavbarosee%2Fplainwind/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":282823603,"owners_count":26733133,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","status":"online","status_checked_at":"2025-11-05T02:00:05.946Z","response_time":58,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"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":["code-readability","code-review","codelens","codelens-extension","css","cursor-ide","developer-experience","developer-tools","productivity","tailwind","tailwindcss","utility-css","vscode","vscode-extension"],"created_at":"2025-11-05T13:01:23.834Z","updated_at":"2025-11-05T13:01:53.340Z","avatar_url":"https://github.com/gavbarosee.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"\n\n\u003cdiv align=\"center\"\u003e\n\n\u003cimg width=\"auto\" height=\"110px\" alt=\"Plainwind\" src=\"media/plainwind-banner.png\" /\u003e\n\n\n\nTranslate Tailwind CSS classes to plain English directly in your editor.\n\n**[Install from VS Code Marketplace](https://marketplace.visualstudio.com/items?itemName=gavbarosee.plainwind)** • **[Full Documentation](https://plainwind.dev)** • **[Report Issue](https://github.com/gavbarosee/plainwind/issues)** • **[Discussions](https://github.com/gavbarosee/plainwind/discussions)**\n\n[![Version](https://img.shields.io/visual-studio-marketplace/v/gavbarosee.plainwind?color=blue)](https://marketplace.visualstudio.com/items?itemName=gavbarosee.plainwind)\n[![Downloads](https://img.shields.io/visual-studio-marketplace/d/gavbarosee.plainwind)](https://marketplace.visualstudio.com/items?itemName=gavbarosee.plainwind)\n[![Rating](https://img.shields.io/visual-studio-marketplace/r/gavbarosee.plainwind)](https://marketplace.visualstudio.com/items?itemName=gavbarosee.plainwind)\n[![License](https://img.shields.io/badge/license-MIT-green)](LICENSE)\n\u003c/div\u003e\n\n\n\n\n\n\n\n## What It Does\n\nPlainwind translates Tailwind CSS classes to plain English directly in your editor.\n\n**From complex Tailwind classes:**\n```jsx\n\u003cdiv className=\"fixed bottom-0 right-0 flex items-center justify-between gap-8 p-12 backdrop-blur-3xl bg-gradient-to-br from-purple-500/20 via-pink-500/20 to-rose-500/20 border border-white/30 shadow-2xl rounded-3xl -rotate-2 hover:rotate-0 hover:scale-105 transition-all duration-700 z-50\"\u003e\n```\n\n**To simplified, plain English translations:**\n```\nLayout: \n  fixed to viewport (stays visible when scrolling page)\n\nPositioning: \n  positioned at bottom edge, positioned at right edge, stacks on top of everything (z-index 50)\n\nFlexbox \u0026 Grid: \n  flexbox container, items aligned to center, spread items across full width (space between), \n  2rem space between items\n\nSpacing: \n  3rem padding on all sides\n\nFilters: \n  3x extra large blur behind element (maximum blur)\n\nBackgrounds: \n  gradient flowing to bottom-right corner, gradient starts at purple with 20% opacity, \n  gradient passes through pink with 20% opacity, gradient ends at rose with 20% opacity\n\nBorders: \n  border on all sides, white border with 30% opacity, 3x large rounded corners\n\nEffects: \n  2x extra large box shadow (dramatic elevation)\n\nTransforms: \n  slight tilt counterclockwise (-2°), [Hover] no rotation (0°), [Hover] slightly enlarged (105% size)\n\nAnimation: \n  smoothly animates all property changes, very slow animation (700ms)\n```\n\n## Features\n\n### Display Modes\n\nPlainwind gives you three ways to view translations:\n\n- **CodeLens** shows translations above className attributes. They're always visible, making it easy to learn Tailwind patterns.\n- **Hover** shows translations only when you hover over a className. This keeps your editor clean while still giving you instant access.\n- **Off** disables translations when you don't need them. The extension stays loaded for quick re-enabling.\n\n\u003cbr /\u003e\n\n\u003cdiv align=\"center\"\u003e\n \u003cimg alt=\"Codelens display mode\" src=\"media/codelens-open2tabs-closethem.gif\" /\u003e\n  \u003cp\u003e\u003cem\u003eCodelens display mode\u003c/em\u003e\u003c/p\u003e\n\u003c/div\u003e\n\n\u003cbr /\u003e\n\n\u003cdiv align=\"center\"\u003e\n \u003cimg alt=\"Hover display mode\" src=\"media/hover-open2tab-closethem.gif\" /\u003e\n  \u003cp\u003e\u003cem\u003eHover display mode\u003c/em\u003e\u003c/p\u003e\n\u003c/div\u003e\n\n\n**[See display modes →](https://plainwind.dev/features#display-modes)**\n\n### Smart Features\n\nPlainwind includes features that adapt to your workflow:\n\n- **Category Grouping** organizes translations by Layout, Spacing, Colors, and Typography for easier scanning\n- **File-Level Control** lets you disable Plainwind for specific files via the status bar\n- **Detail Panels** open when you click any translation to show full breakdowns with copy buttons\n- **Visual Enhancements** display actual color swatches and font previews in detail panels\n\n**[Explore all features →](https://plainwind.dev/features)**\n\n### Conditional Detection\n\nPlainwind understands when classes apply conditionally. The translations show you the conditions alongside the styles:\n\n```tsx\n\u003cbutton className={clsx(\n  'px-4 py-2 rounded-md',\n  isActive \u0026\u0026 'bg-blue-500 text-white',\n  isDisabled \u0026\u0026 'opacity-50'\n)}\u003e\n```\n\nYou'll see: \n```\nSpacing: padding | Borders: rounded corners \nColors: blue background, white text (if isActive) \nInteractivity: 50% opacity (if isDisabled)\n```\n\nPlainwind recognizes all the patterns you actually use:\n\n- Ternaries (`x ? 'a' : 'b'`), including nested ternaries\n- Logical operators (`\u0026\u0026`, `||`, `??`)\n- Object syntax (`{ 'class': condition }`)\n- Array syntax (`['class1', 'class2']`)\n- Template literals (`` `flex ${dynamic}` ``)\n\nWorks with `clsx`, `classnames`, `cn`, `twMerge`, `cva`, and `tw`.\n\n**[Learn more about conditional detection →](https://plainwind.dev/features#conditional-detection)**\n\n### Framework Support\n\nWorks with React, Vue, Svelte, Angular, Solid.js, and standard HTML.\n\n**[View framework examples →](https://plainwind.dev/frameworks)**\n\n## Quick Start\n\n1. Install from the [VS Code Marketplace](https://marketplace.visualstudio.com/items?itemName=gavbarosee.plainwind)\n2. Open any file with Tailwind classes\n3. See translations appear automatically\n\nThat's it! No configuration required, but you can [customize it](https://plainwind.dev/configuration) to fit your workflow.\n\n**[View full getting started guide](https://plainwind.dev/getting-started)**\n\n## Documentation\n\nComplete guides, configuration options, and framework examples:\n\n- **[Getting Started](https://plainwind.dev/getting-started)** for installation and setup\n- **[Features](https://plainwind.dev/features)** for display modes, detail panels, and conditional detection\n- **[Configuration](https://plainwind.dev/configuration)** for settings and keyboard shortcuts\n- **[Framework Support](https://plainwind.dev/frameworks)** for React, Vue, Svelte, Angular, and Solid examples\n- **[Contributing](https://plainwind.dev/contributing)** for development setup and guidelines\n\n## Commands\n\nAccess these commands via the Command Palette (`Cmd+Shift+P` / `Ctrl+Shift+P`):\n\n\n\u003cdiv align=\"center\"\u003e\n \u003cimg alt=\"Command palette\" src=\"media/command-palette.gif\" /\u003e\n  \u003cp\u003e\u003cem\u003eCommand palette\u003c/em\u003e\u003c/p\u003e\n\u003c/div\u003e\n\n\n| Command | Description |\n|---------|-------------|\n| `Plainwind: Show Options Menu` | Quick menu with all settings and options |\n| `Plainwind: Choose Display Mode` | Switch between CodeLens, Hover, or Off |\n| `Plainwind: Toggle Extension On/Off` | Enable/disable Plainwind globally |\n| `Plainwind: Toggle for This File` | Enable/disable for current file only |\n| `Plainwind: Disable for This File` | Disable Plainwind for current file |\n| `Plainwind: Enable for This File` | Enable Plainwind for current file |\n| `Plainwind: Toggle Group By Category` | Toggle category grouping on/off |\n| `Plainwind: Toggle Category Emojis` | Show/hide emojis in category names |\n| `Plainwind: Toggle Visual Enhancements In Detail Panel` | Toggle color, font, and spacing previews |\n| `Plainwind: Set CodeLens Truncation Length` | Adjust when translations get truncated |\n| `Plainwind: Clear All Detail Panels` | Close all open translation panels |\n\n**Tip:** Use `Plainwind: Show Options Menu` for quick access to the most common settings.\n\n## Quick Configuration\n\n| Setting | Default | Description |\n|---------|---------|-------------|\n| `plainwind.enabled` | `true` | Enable/disable globally |\n| `plainwind.displayMode` | `codelens` | Choose `codelens`, `hover`, or `off` |\n| `plainwind.groupByCategory` | `true` | Group by Layout, Spacing, Colors, etc. |\n| `plainwind.showCategoryEmojis` | `false` | Show emojis in category labels |\n\n**[View all configuration options →](https://plainwind.dev/configuration)**\n\n## Contributing\n\nWe'd love your help making Plainwind better.\n\n**Quick start:**\n```bash\ngit clone https://github.com/gavbarosee/plainwind.git\ncd plainwind\nnpm install\nnpm run compile\n```\n\nPress `F5` in VS Code to launch the extension in debug mode.\n\n**[Read the full contributing guide →](https://plainwind.dev/contributing)**\n\n## Learn More\n\n**[Visit the full documentation at plainwind.dev](https://plainwind.dev)** for detailed guides, configuration options, and framework-specific examples.\n\n## License\n\nMIT — see the LICENSE file for details.\n\nCopyright © 2025 Gav Barosee\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fgavbarosee%2Fplainwind","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fgavbarosee%2Fplainwind","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fgavbarosee%2Fplainwind/lists"}