Figma CSS to Tailwind

Convert Figma-style raw CSS into Tailwind CSS utility classes directly inside your code editor.

This extension uses an explicit tw attribute to eliminate noise and false positives. Paste CSS in the tw attribute, click the lightbulb, and get clean Tailwind classes.

✨ Features

Convert raw CSS to Tailwind utility classes including gradients, borders, and CSS variables
Works directly inside JSX / TSX / HTML / Vue / Svelte
Support for linear gradients with multiple color stops
Extract colors from CSS variables (var(--color, #fallback))
Handle complex borders (width, style, color)
Convert box shadows, width, height and more
Zero interference with normal className usage
No false triggers on Tailwind variants like hover: or md:
Clean, explicit workflow using a tw attribute
Auto-complete: Type tw + Enter → tw={``} with cursor ready
Select & Convert: Select any CSS anywhere and convert to Tailwind
One-click conversion via VS Code lightbulb

🚀 Quick Start

Method 1: Type `tw` + Enter (Fastest!)

<button tw    ← Press Enter

Automatically expands to:

<button tw={``}>
         ↑ cursor ready, paste CSS here

Method 2: Paste CSS inside `tw`

<button
  tw={`
    color: #F12120;
    font-family: Quicksand;
    font-size: 20px;
    font-weight: 500;
    line-height: 150%;
    border: 1px solid var(--border, #F9FAFB);
    background: linear-gradient(180deg, #C7DAFF 0%, #D9FFEE 100%);
  `}
>
  Click me
</button>

Step 2: Click the lightbulb 💡

A lightbulb appears under the tw attribute. Click Convert CSS to Tailwind.

Step 3: Get Tailwind classes ✨

<button className="text-[#F12120] font-[Quicksand] text-[20px] font-medium leading-[150%] border border-[#F9FAFB] border-solid bg-gradient-to-b from-[#C7DAFF] to-[#D9FFEE]">
  Click me
</button>

The tw attribute is automatically removed.

🎯 Advanced Features

🎨 Gradient Support

background: linear-gradient(180deg, #C7DAFF 0%, #D9FFEE 100%);

→ bg-gradient-to-b from-[#C7DAFF] to-[#D9FFEE]

Supports:

Multiple gradient directions (0deg, 90deg, 180deg, 270deg)
Multiple color stops with via-[color]
CSS variable fallbacks

🔲 Border Support

border: 1px solid var(--border-color, #F9FAFB);

→ border border-[#F9FAFB] border-solid

Supports:

Border width, style (solid, dashed, dotted), and color
Extracts fallback colors from CSS variables

🎯 CSS Variables

color: var(--text-primary, #1A1A1A);
background: var(--bg-gradient, linear-gradient(180deg, #C7DAFF 0%, #D9FFEE 100%));

→ Automatically extracts fallback values

📐 Box Shadows

box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.1);

→ shadow-[0px_4px_8px_rgba(0,0,0,0.1)]

💯 Width & Height

width: 100%;
height: 200px;

→ w-full h-[200px]

🔥 Convert CSS Anywhere

Not just tw attributes! Select any CSS and convert:

Select CSS (in any file: .css, .jsx, .html)
Right-click → "Convert Selected CSS to Tailwind"
Or Command Palette (Ctrl+Shift+P) → "Convert Selected CSS to Tailwind"

Example:

/* Select this CSS */
color: red;
padding: 16px;
border-radius: 8px;

Run command → Result:

text-[red] p-4 rounded-lg

📄 Supported CSS Properties

Text & Typography

color
font-family
font-size
font-weight
line-height
letter-spacing

Layout & Spacing

display (flex, grid, block, none)
justify-content
align-items
padding / margin
gap
width / height

Visual Effects

background / background-color
linear-gradient (NEW!)
border (width, style, color) (NEW!)
border-radius
box-shadow (NEW!)
opacity

Advanced

CSS Variables with fallbacks (NEW!)
Multiple gradient stops
Complex border definitions

🧠 Best Use Cases

Perfect when you:

Copy styles from the Figma Inspect panel
Receive raw CSS from designers with gradients and borders
Work with design systems using CSS variables
Want fast Tailwind conversion without manual cleanup
Need to convert entire style blocks quickly
Prefer explicit, predictable tooling

⚙️ How It Works

`tw` Attribute Workflow

Type tw + Enter → Auto-expands to tw={``}
Paste CSS inside backticks
Lightbulb appears automatically
Click to convert → tw becomes className

Selected Text Workflow

Select any CSS in any file
Right-click → "Convert Selected CSS to Tailwind"
CSS replaced with Tailwind classes

⚠️ Important Notes

The extension only activates with the tw attribute for auto-detection
You can convert any selected CSS using the command
Normal className attributes are never affected
Built-in VS Code refactor actions may appear — this is expected
Your existing code remains untouched unless you explicitly use tw
CSS variables: Only fallback values are used (the part after comma)

🎬 Typical Workflow

// 1. Type tw + Enter
<div tw

// 2. Auto-expands (cursor inside backticks)
<div tw={``}>

// 3. Paste Figma CSS
<div tw={`
  border: 1px solid var(--Grey-300, #F9FAFB);
  background: linear-gradient(180deg, #C7DAFF 0%, #D9FFEE 100%);
  padding: 16px 24px;
  border-radius: 8px;
`}>

// 4. Click lightbulb → Instant conversion!
<div className="border border-[#F9FAFB] bg-gradient-to-b from-[#C7DAFF] to-[#D9FFEE] p-4 px-6 rounded-lg">

🛠️ Commands

Command	Description
`Convert CSS to Tailwind`	Appears in lightbulb for `tw` attributes
`Convert Selected CSS to Tailwind`	Convert any selected CSS text

Access via:

Lightbulb (💡) on tw attributes
Right-click menu on selected text
Command Palette (Ctrl+Shift+P)

🛠️ Roadmap

Planned features:

✅ Linear gradient support
✅ Border support (width, style, color)
✅ CSS variable extraction
✅ Box shadow support
✅ Width/height support
✅ Selected-text conversion
✅ Auto-complete for tw attribute
⏳ px → rem conversion option
⏳ Preserve existing className values (merge mode)
⏳ Extended CSS property support (transforms, transitions)
⏳ Configurable behavior via settings

📦 Version History

0.0.6

🎨 Added linear gradient support with multiple color stops
🔲 Added border support (width, style, color)
🎯 CSS variable extraction with fallback values
📦 Box shadow support
📐 Width and height conversion
⚡ Auto-complete: tw + Enter → tw={``}
🔥 Convert selected CSS anywhere
🎪 Right-click context menu for conversions
🐛 Bug fixes and improved conversion accuracy

0.0.4

Introduced explicit tw attribute mode
Removed false positives from Tailwind detection
Improved developer experience

🧑‍💻 Author

Jahirul Islam
Independent developer building productivity tools for frontend developers.

📝 License

MIT License — Feel free to use and contribute!

🙏 Feedback & Contributions

Found a bug? Have a feature request? Want to contribute?

GitHub Issues: [Report bugs or request features]
Pull Requests: Always welcome!

Happy converting! 🎨✨

Figma CSS to Tailwind

jahirul-dev

Figma CSS to Tailwind

✨ Features

🚀 Quick Start

Method 1: Type tw + Enter (Fastest!)

Method 2: Paste CSS inside tw

Step 2: Click the lightbulb 💡

Step 3: Get Tailwind classes ✨

🎯 Advanced Features

🎨 Gradient Support

🔲 Border Support

🎯 CSS Variables

📐 Box Shadows

💯 Width & Height

🔥 Convert CSS Anywhere

📄 Supported CSS Properties

Text & Typography

Layout & Spacing

Visual Effects

Advanced

🧠 Best Use Cases

⚙️ How It Works

tw Attribute Workflow

Selected Text Workflow

⚠️ Important Notes

🎬 Typical Workflow

🛠️ Commands

🛠️ Roadmap

📦 Version History

🧑‍💻 Author

📝 License

🙏 Feedback & Contributions

Method 1: Type `tw` + Enter (Fastest!)

Method 2: Paste CSS inside `tw`

`tw` Attribute Workflow