Built a VSCode / Cursor extension to translate TailwindCSS classes into plain English.
My past work with codebases using Tailwind made it cognitively intensive to parse multiple Tailwind classes at a glance without documentation lookup. The TW IntelliSense is a great benefit but I thought it would be better if those classes could be translated to plain English as much as possible while still maintaining some useful technicality, a balance that I realize is quite subjective but I did my best to make the best of both worlds.
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)
gavb•4h ago
My past work with codebases using Tailwind made it cognitively intensive to parse multiple Tailwind classes at a glance without documentation lookup. The TW IntelliSense is a great benefit but I thought it would be better if those classes could be translated to plain English as much as possible while still maintaining some useful technicality, a balance that I realize is quite subjective but I did my best to make the best of both worlds.
--------------------------------------------------------------------------------------------------
A quick example,
from this:
<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 this:
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)
--------------------------------------------------------------------------------------------------
VS Code Marketplace: https://marketplace.visualstudio.com/items?itemName=gavbaros...
Docs: https://plainwind.dev
GitHub: https://github.com/gavbarosee/plainwind