Show HN: Plainwind – Translate TailwindCSS to Plain English in VS Code
github.comMy 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