Plainwind – Translate TailwindCSS to Plain English in VS Code

4 hours ago 1

Plainwind translates Tailwind CSS classes to plain English directly in your editor.

From complex Tailwind classes:

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)

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 →

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 →

Plainwind understands when classes apply conditionally. The translations show you the conditions alongside the styles:

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 →

Works with React, Vue, Svelte, Angular, Solid.js, and standard HTML.

View framework examples →

Install from the VS Code Marketplace
Open any file with Tailwind classes
See translations appear automatically

That's it! No configuration required, but you can customize it to fit your workflow.

View full getting started guide

Complete guides, configuration options, and framework examples:

Getting Started for installation and setup
Features for display modes, detail panels, and conditional detection
Configuration for settings and keyboard shortcuts
Framework Support for React, Vue, Svelte, Angular, and Solid examples
Contributing for development setup and guidelines

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.

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