Introduction
Plainwind

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

What It Does

From complex Tailwind classes:

<div 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">

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)

Works with all VS Code themes

No documentation lookups. No mental parsing. Just translations that appear inline as you code and they look great in every VS Code theme.

Two Display Modes

CodeLens shows translations above your className attributes. They're always visible, making it easy to understand Tailwind patterns as you code.

Click any translation to open a detail panel. You can open multiple panels to compare different className strings side by side.

CodeLens mode workflow

Hover shows translations only when you hover over a className. This keeps your editor clean while still giving you instant access to translations when you need them.

Hover mode workflow

You can switch between modes from the status bar with a single click.

Smart Conditional Detection

Plainwind understands when classes apply conditionally. When you use helper functions like clsx, classnames, or cn, it detects the conditions and shows them in the translations.

<button className={clsx(
  'px-4 py-2 rounded-md font-semibold transition-colors',
  isActive && 'bg-blue-500 text-white shadow-lg',
  isDisabled && 'opacity-50 cursor-not-allowed'
)}>

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

Spacing: 1rem padding on left and right sides, 0.5rem padding on top and bottom sides
Borders: medium rounded corners
Typography: semi-bold text (weight 600)
Animation: animates colors
Colors: medium blue background (if isActive), white text (if isActive)
Effects: large box shadow (high elevation) (if isActive)
Interactivity: 50% opacity (if isDisabled), cursor not allowed (disabled state) (if isDisabled)

This works with all the popular class merging utilities: clsx, classnames, cn, and more.

Understanding Complex CSS

Plainwind translates even the most complex Tailwind patterns into plain English. Here are some examples:

Glassmorphism card (frosted glass effect):

<div className="backdrop-blur-3xl bg-white/10 shadow-2xl">
Filters: 3x extra large blur behind element (maximum blur)
Backgrounds: white background with 10% opacity
Effects: 2x extra large box shadow (dramatic elevation)

Vintage photo filter:

<img className="grayscale sepia contrast-125 brightness-90" />
Filters: removes all color (grayscale), warm brownish vintage tone (old photo effect), punchy contrast (125% contrast), slightly dark (90% brightness)

Animated notification badge:

<span className="animate-ping scale-0 opacity-0">
Animation: ripple effect (scales up and fades out)
Transforms: completely collapsed (invisible, 0% size)
Effects: completely transparent (invisible)

3D card tilt:

<div className="rotate-12 -rotate-y-45 perspective-dramatic transform-3d">
Transforms: tilted clockwise (12°), rotate -45° around vertical axis, dramatic 3D depth (very close viewpoint), preserves 3D space for children

Every cryptic class name becomes plain English.

Install in 30 Seconds

Get started →

Getting Started