CSS to Tailwind Pro: Instant Utility Converter 🎨
Instantly convert vanilla CSS, CSS-in-JS, and Figma inspect styles into clean Tailwind CSS utility classes and JSX className bindings!
Say goodbye to flipping between tabs searching Tailwind documentation.
🎨 Why CSS to Tailwind Pro?
Tailwind CSS has become the industry standard for modern frontend engineering in React, Next.js, Vue, Svelte, and Astro. However, translating legacy CSS files, design tokens, or Figma copy-pasted styles into Tailwind utility classes wastes countless hours every week.
CSS to Tailwind Pro brings instantaneous translation right into your editor:
- ⚡ 1-Click Class Replacement: Highlight any block of CSS properties, press
Alt + Shift + W, and watch it instantly transform into clean Tailwind utilities!
- ⚛️ 1-Click JSX Binding: Need to paste styles straight into a React component? Convert directly into
className="flex justify-between p-4...".
- 🧪 Interactive Conversion Sandbox: Paste large stylesheets into the side-by-side sandbox to inspect generated classes and view a simulated component in real time.
- 📐 Comprehensive Coverage: Supports Flexbox, Grid, Multi-value Margins & Paddings, Typography, Sizing, Colors, Borders, Shadows, and Positioning.
- 🧩 Arbitrary Values: Non-standard pixel sizes automatically convert to Tailwind arbitrary values (e.g.
width: 320px ➔ w-80, width: 342px ➔ w-[342px]).
🌟 Conversion Examples
| Raw CSS Property |
Converted Tailwind Utility |
display: flex; justify-content: space-between; align-items: center; |
flex justify-between items-center |
padding: 16px 24px; |
py-4 px-6 |
margin: 0 auto; |
my-0 mx-auto |
font-size: 24px; font-weight: 700; |
text-2xl font-bold |
background-color: #0f172a; color: #ffffff; |
bg-[#0f172a] text-white |
border-radius: 12px; border: 1px solid #e2e8f0; |
rounded-xl border border-[#e2e8f0] |
position: sticky; top: 0; z-index: 50; |
sticky top-0 z-[50] |
cursor: pointer; overflow: hidden; |
cursor-pointer overflow-hidden |
⌨️ Keyboard Shortcuts & Commands
| Command |
Shortcut |
Description |
| Convert Selected CSS to Tailwind |
Alt + Shift + W / Cmd + Shift + W |
Replaces selected CSS with utility classes |
| Convert to className="..." |
Via Right Click / Command Palette |
Replaces selection with JSX className="..." binding |
| Open Conversion Sandbox |
Via Right Click / Command Palette |
Side-by-side interactive playground with live preview |
⚙️ Configuration
Customize behavior in VS Code Settings (Ctrl + , / Cmd + ,):
{
// Fall back to arbitrary values (e.g. w-[342px]) for non-scale pixels
"cssToTailwind.useArbitraryValues": true,
// Sort classes following recommended ordering
"cssToTailwind.sortClasses": true
}
👨💻 Author & Connect
Developed with ❤️ by Pirapaakaran Pirathapan.
If you find this extension helpful, please consider leaving a ⭐⭐⭐⭐⭐ review on the VS Code Marketplace!
📄 License
MIT License © 2026 Pirapaakaran Pirathapan.
