Features

Conditional Detection

Plainwind detects when classes apply conditionally and shows you the condition in the translation. This makes it easy to understand dynamic styling at a glance.

<button className={clsx(
  'px-4 py-2 rounded-md',
  isActive && 'bg-blue-500 text-white',
  isDisabled && 'opacity-50'
)}>

The translation shows which classes are always applied and which depend on conditions:

Supported Patterns

Plainwind recognizes all the common conditional patterns you're already using.

Ternaries let you switch between two class sets:

className={isOpen ? 'block' : 'hidden'}

Logical operators apply classes when conditions are true (or false):

className={isValid && 'border-green-500'}
className={error || 'text-gray-500'}

Template literals combine static and dynamic classes:

className={`flex ${isVertical ? 'flex-col' : 'flex-row'}`}

Helper Functions

Plainwind works with all the common class merging utilities you're already using:

• clsx
• classnames
• cn
• twMerge
• cva (class variance authority)
• tw (twin.macro)

Display Modes

Plainwind gives you three ways to view translations, depending on your workflow and screen space.

CodeLens

Translations appear above className attributes. This is the default mode. Click any translation to open a detail panel with the full breakdown.

Hover

Translations appear only when you hover over a className. This keeps your editor clean while still giving you instant access to translations. Click "Toggle Details" in the tooltip to open a detail panel.

Best for: Minimal clutter, checking specific classes, working in small windows.

Off

No translations. The extension stays loaded so you can quickly re-enable it when needed.

When to use: Focused work, presentations, pairing with someone who finds it distracting.

You can switch between modes from the status bar or command palette (⌘⇧P on macOS, Ctrl+Shift+P on Windows/Linux, then search for "Plainwind: Choose Display Mode").

Category Grouping

By default, Plainwind groups translations by category (Layout, Spacing, Colors, etc.). This helps you understand what different classes are doing at a glance.

With categories (and emojis enabled):

Without categories:

Categories help you parse complex class strings, but for simple cases the flat list works just fine. You can toggle these from the status bar or settings.

Detail Panels

Click any translation (in CodeLens or Hover mode) to open a detail panel with the full breakdown.

Each panel shows:

• Full class breakdown with categories
• Original Tailwind classes for reference
• Detected conditions (if any)
• Variant information (hover states, responsive breakpoints, etc.)
• Visual enhancements (color swatches, font previews, and more)

Panels stay open until you close them, so you can open multiple panels to compare different className strings side by side.

File-Level Control

You can disable Plainwind for specific files:

1. Open the file
2. Click Plainwind in the status bar
3. Select "Toggle for This File"

This is useful for auto-generated files or large files where you don't need translations.

You can re-enable it anytime from the same menu.

Performance

Plainwind processes files efficiently with translation caching and incremental updates. You shouldn't notice any slowdown in normal use.

If you're working in very large files (10,000+ lines), you can switch to Hover mode or disable Plainwind for that specific file.

Troubleshooting

Translations not appearing?

• Check that the status bar shows "Plainwind"
• Verify the display mode isn't set to "off"
• Confirm your file type is supported
• Try reloading the window: Command palette → "Developer: Reload Window"

Unknown classes:

If Plainwind can't translate a class, it'll show the original class name. This usually happens with custom Tailwind classes or plugin utilities.

Need help?

• Documentation for guides and examples
• GitHub Issues (opens in a new tab) to report bugs or request features