https://github.com/gavbarosee/plainwind
Plainwind translates Tailwind CSS classes into plain English, making complex classes instantly readable.
https://github.com/gavbarosee/plainwind
code-readability code-review codelens codelens-extension css cursor-ide developer-experience developer-tools productivity tailwind tailwindcss utility-css vscode vscode-extension
Last synced: 3 months ago
JSON representation
Plainwind translates Tailwind CSS classes into plain English, making complex classes instantly readable.
- Host: GitHub
- URL: https://github.com/gavbarosee/plainwind
- Owner: gavbarosee
- License: mit
- Created: 2025-10-04T09:01:44.000Z (4 months ago)
- Default Branch: main
- Last Pushed: 2025-10-30T11:09:50.000Z (3 months ago)
- Last Synced: 2025-10-30T13:11:54.276Z (3 months ago)
- Topics: code-readability, code-review, codelens, codelens-extension, css, cursor-ide, developer-experience, developer-tools, productivity, tailwind, tailwindcss, utility-css, vscode, vscode-extension
- Language: TypeScript
- Homepage: https://plainwind.dev
- Size: 11.5 MB
- Stars: 1
- Watchers: 0
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
Translate Tailwind CSS classes to plain English directly in your editor.
**[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)**
[](https://marketplace.visualstudio.com/items?itemName=gavbarosee.plainwind)
[](https://marketplace.visualstudio.com/items?itemName=gavbarosee.plainwind)
[](https://marketplace.visualstudio.com/items?itemName=gavbarosee.plainwind)
[](LICENSE)
## What It Does
Plainwind translates Tailwind CSS classes to plain English directly in your editor.
**From complex Tailwind classes:**
```jsx
```
**To simplified, plain English translations:**
```
Layout:
fixed to viewport (stays visible when scrolling page)
Positioning:
positioned at bottom edge, positioned at right edge, stacks on top of everything (z-index 50)
Flexbox & Grid:
flexbox container, items aligned to center, spread items across full width (space between),
2rem space between items
Spacing:
3rem padding on all sides
Filters:
3x extra large blur behind element (maximum blur)
Backgrounds:
gradient flowing to bottom-right corner, gradient starts at purple with 20% opacity,
gradient passes through pink with 20% opacity, gradient ends at rose with 20% opacity
Borders:
border on all sides, white border with 30% opacity, 3x large rounded corners
Effects:
2x extra large box shadow (dramatic elevation)
Transforms:
slight tilt counterclockwise (-2°), [Hover] no rotation (0°), [Hover] slightly enlarged (105% size)
Animation:
smoothly animates all property changes, very slow animation (700ms)
```
## Features
### Display Modes
Plainwind gives you three ways to view translations:
- **CodeLens** shows translations above className attributes. They're always visible, making it easy to learn Tailwind patterns.
- **Hover** shows translations only when you hover over a className. This keeps your editor clean while still giving you instant access.
- **Off** disables translations when you don't need them. The extension stays loaded for quick re-enabling.
Codelens display mode
Hover display mode
**[See display modes →](https://plainwind.dev/features#display-modes)**
### Smart Features
Plainwind includes features that adapt to your workflow:
- **Category Grouping** organizes translations by Layout, Spacing, Colors, and Typography for easier scanning
- **File-Level Control** lets you disable Plainwind for specific files via the status bar
- **Detail Panels** open when you click any translation to show full breakdowns with copy buttons
- **Visual Enhancements** display actual color swatches and font previews in detail panels
**[Explore all features →](https://plainwind.dev/features)**
### Conditional Detection
Plainwind understands when classes apply conditionally. The translations show you the conditions alongside the styles:
```tsx
```
You'll see:
```
Spacing: padding | Borders: rounded corners
Colors: blue background, white text (if isActive)
Interactivity: 50% opacity (if isDisabled)
```
Plainwind recognizes all the patterns you actually use:
- Ternaries (`x ? 'a' : 'b'`), including nested ternaries
- Logical operators (`&&`, `||`, `??`)
- Object syntax (`{ 'class': condition }`)
- Array syntax (`['class1', 'class2']`)
- Template literals (`` `flex ${dynamic}` ``)
Works with `clsx`, `classnames`, `cn`, `twMerge`, `cva`, and `tw`.
**[Learn more about conditional detection →](https://plainwind.dev/features#conditional-detection)**
### Framework Support
Works with React, Vue, Svelte, Angular, Solid.js, and standard HTML.
**[View framework examples →](https://plainwind.dev/frameworks)**
## Quick Start
1. Install from the [VS Code Marketplace](https://marketplace.visualstudio.com/items?itemName=gavbarosee.plainwind)
2. Open any file with Tailwind classes
3. See translations appear automatically
That's it! No configuration required, but you can [customize it](https://plainwind.dev/configuration) to fit your workflow.
**[View full getting started guide](https://plainwind.dev/getting-started)**
## Documentation
Complete guides, configuration options, and framework examples:
- **[Getting Started](https://plainwind.dev/getting-started)** for installation and setup
- **[Features](https://plainwind.dev/features)** for display modes, detail panels, and conditional detection
- **[Configuration](https://plainwind.dev/configuration)** for settings and keyboard shortcuts
- **[Framework Support](https://plainwind.dev/frameworks)** for React, Vue, Svelte, Angular, and Solid examples
- **[Contributing](https://plainwind.dev/contributing)** for development setup and guidelines
## Commands
Access these commands via the Command Palette (`Cmd+Shift+P` / `Ctrl+Shift+P`):
Command palette
| Command | Description |
|---------|-------------|
| `Plainwind: Show Options Menu` | Quick menu with all settings and options |
| `Plainwind: Choose Display Mode` | Switch between CodeLens, Hover, or Off |
| `Plainwind: Toggle Extension On/Off` | Enable/disable Plainwind globally |
| `Plainwind: Toggle for This File` | Enable/disable for current file only |
| `Plainwind: Disable for This File` | Disable Plainwind for current file |
| `Plainwind: Enable for This File` | Enable Plainwind for current file |
| `Plainwind: Toggle Group By Category` | Toggle category grouping on/off |
| `Plainwind: Toggle Category Emojis` | Show/hide emojis in category names |
| `Plainwind: Toggle Visual Enhancements In Detail Panel` | Toggle color, font, and spacing previews |
| `Plainwind: Set CodeLens Truncation Length` | Adjust when translations get truncated |
| `Plainwind: Clear All Detail Panels` | Close all open translation panels |
**Tip:** Use `Plainwind: Show Options Menu` for quick access to the most common settings.
## Quick Configuration
| Setting | Default | Description |
|---------|---------|-------------|
| `plainwind.enabled` | `true` | Enable/disable globally |
| `plainwind.displayMode` | `codelens` | Choose `codelens`, `hover`, or `off` |
| `plainwind.groupByCategory` | `true` | Group by Layout, Spacing, Colors, etc. |
| `plainwind.showCategoryEmojis` | `false` | Show emojis in category labels |
**[View all configuration options →](https://plainwind.dev/configuration)**
## Contributing
We'd love your help making Plainwind better.
**Quick start:**
```bash
git clone https://github.com/gavbarosee/plainwind.git
cd plainwind
npm install
npm run compile
```
Press `F5` in VS Code to launch the extension in debug mode.
**[Read the full contributing guide →](https://plainwind.dev/contributing)**
## Learn More
**[Visit the full documentation at plainwind.dev](https://plainwind.dev)** for detailed guides, configuration options, and framework-specific examples.
## License
MIT — see the LICENSE file for details.
Copyright © 2025 Gav Barosee