Figma CSS to Tailwind

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

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 - powered by both regex-based conversion and Gemini AI.

✨ Features

🤖 AI-Powered Conversion: Use Google Gemini AI for intelligent CSS to Tailwind conversion
⚡ Dual Conversion Modes: Choose between fast regex-based or AI-powered conversion
Convert raw CSS to Tailwind utility classes including gradients, borders, RGBA colors, and CSS variables
Works directly inside JSX / TSX / HTML / Vue / Svelte
Support for linear gradients with multiple color stops
RGBA/RGB color support with automatic hex conversion and opacity handling
Extract colors from CSS variables (var(--color, #fallback))
Handle complex borders (width, style, color)
Multi-value padding/margin support (2, 3, or 4 values)
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: rgba(8, 15, 42, 0.50);
    font-family: Quicksand;
    font-size: 20px;
    font-weight: 500;
    line-height: 150%;
    padding: 75px 29px;
    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. You'll see two options:

Convert CSS to Tailwind - Fast regex-based conversion
Convert with AI (Gemini) - AI-powered intelligent conversion

Step 3: Get Tailwind classes ✨

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

The tw attribute is automatically removed.

🤖 AI-Powered Conversion Setup

Step 1: Get Your Gemini API Key

Visit Google AI Studio
Sign in with your Google account
Click "Get API Key" or "Create API Key"
Copy your API key

Step 2: Add API Key to VS Code

Option A: Settings UI

Open VS Code Settings (Ctrl+, or Cmd+,)
Search for Figma CSS to Tailwind
Find "Gemini API Key"
Paste your API key

Option B: settings.json

Open Command Palette (Ctrl+Shift+P or Cmd+Shift+P)
Type Preferences: Open User Settings (JSON)
Add this line:

{
  "figmaCssToTailwind.geminiApiKey": "YOUR_API_KEY_HERE"
}

Step 3: Use AI Conversion

Now when you click the lightbulb on a tw attribute, you'll see:

Convert CSS to Tailwind (Fast, regex-based)
Convert with AI (Gemini) (Intelligent, AI-powered)

🆚 Conversion Modes Comparison

Feature	Regex-Based	AI-Powered (Gemini)
Speed	⚡ Instant	🐢 2-5 seconds
Accuracy	✅ Good for standard CSS	✨ Excellent for complex CSS
Internet Required	❌ No	✅ Yes
API Key Required	❌ No	✅ Yes (Free tier available)
Complex Properties	⚠️ Limited	✅ Handles advanced cases
Fallback	-	✅ Auto-falls back to regex

Pro Tip: Use regex-based for quick conversions, AI-powered for complex or unusual CSS.

🎯 Advanced Features

🎨 RGBA Color Support

color: rgba(8, 15, 42, 0.50);
background-color: rgb(255, 0, 0);

→ text-[#080f2a] text-opacity-[50]
→ bg-[#ff0000]

Supports:

Automatic RGBA → Hex conversion
Separate opacity classes for semi-transparent colors
RGB color format

📦 Multi-Value Padding/Margin

padding: 75px 29px;           /* vertical horizontal */
margin: 10px 20px 30px;       /* top horizontal bottom */
padding: 10px 20px 30px 40px; /* top right bottom left */

→ py-[75px] px-[29px]
→ mt-[10px] mx-[20px] mb-[30px]
→ pt-[10px] pr-[20px] pb-[30px] pl-[40px]

🎨 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"
For AI conversion: Use Command Palette → "Convert with AI (Gemini)"

Example:

/* Select this CSS */
color: rgba(255, 0, 0, 0.8);
padding: 16px 24px;
border-radius: 8px;

Run command → Result:

text-[#ff0000] text-opacity-[80] py-4 px-6 rounded-lg

📄 Supported CSS Properties

Text & Typography

color (hex, rgb, rgba)
font-family
font-size
font-weight
line-height
letter-spacing

Layout & Spacing

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

Visual Effects

background / background-color (hex, rgb, rgba)
linear-gradient
border (width, style, color)
border-radius
box-shadow
opacity

Advanced

RGBA/RGB colors with opacity
Multi-value padding/margin
CSS Variables with fallbacks
Multiple gradient stops
Complex border definitions

🧠 Best Use Cases

Perfect when you:

Copy styles from the Figma Inspect panel with RGBA colors
Receive raw CSS from designers with gradients, borders, and semi-transparent colors
Work with design systems using CSS variables
Need to handle complex spacing with multiple padding/margin values
Want fast Tailwind conversion without manual cleanup
Need to convert entire style blocks quickly
Have complex CSS that benefits from AI understanding
Prefer explicit, predictable tooling

⚙️ How It Works

`tw` Attribute Workflow

Type tw + Enter → Auto-expands to tw={``}
Paste CSS inside backticks
Lightbulb appears automatically with two options
Choose regex-based (fast) or AI-powered (intelligent)
Click to convert → tw becomes className

Selected Text Workflow

Select any CSS in any file
Right-click → "Convert Selected CSS to Tailwind" (regex-based)
Or use Command Palette → "Convert with AI (Gemini)" (AI-powered)
CSS replaced with Tailwind classes

AI Conversion Details

Smart fallback: If AI fails, automatically uses regex-based conversion
Model caching: Remembers successful Gemini model for faster subsequent calls
Multiple model attempts: Tries common models (gemini-1.5-flash, gemini-pro) before discovery
Progress indicator: Shows "AI is converting..." notification
Error handling: Graceful degradation with helpful error messages

⚠️ 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)
RGBA colors: Automatically converted to hex with separate opacity classes
AI conversion: Requires internet connection and Gemini API key (free tier available)
Privacy: Your CSS is sent to Google's Gemini API for conversion

🎬 Typical Workflow

// 1. Type tw + Enter
<div tw

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

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

// 4. Click lightbulb → Choose conversion method
// - "Convert CSS to Tailwind" (Fast)
// - "Convert with AI (Gemini)" (Intelligent)

// 5. Instant conversion!
<div className="text-[#080f2a] text-opacity-[50] border border-[#F9FAFB] bg-gradient-to-b from-[#C7DAFF] to-[#D9FFEE] py-[75px] px-[29px] rounded-lg">

🛠️ Commands

Command	Description	Requires API Key
`Convert CSS to Tailwind`	Fast regex-based conversion for `tw` attributes	❌ No
`Convert with AI (Gemini)`	AI-powered conversion for `tw` attributes	✅ Yes
`Convert Selected CSS to Tailwind`	Convert any selected CSS text (regex-based)	❌ No

Access via:

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

🛠️ Configuration

Setting	Default	Description
`figmaCssToTailwind.geminiApiKey`	`""`	Your Google Gemini API key for AI conversion

Access settings:

VS Code Settings (Ctrl+, or Cmd+,)
Search for "Figma CSS to Tailwind"
Configure your API key

🛠️ 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
✅ RGBA/RGB color support with opacity
✅ Multi-value padding/margin support
✅ AI-powered conversion with Gemini
⏳ Multiple AI provider support (OpenAI, Claude)
⏳ px → rem conversion option
⏳ Preserve existing className values (merge mode)
⏳ Extended CSS property support (transforms, transitions)
⏳ Configurable behavior via settings

📦 Version History

0.1.0 (Latest)

🤖 NEW: Gemini AI-powered conversion
⚡ Dual conversion modes: regex-based and AI-powered
🎯 Smart fallback mechanism
💾 Model caching for faster AI conversions
📊 Progress notifications for AI operations
🔧 Configurable Gemini API key via settings
🛡️ Graceful error handling with fallback to regex
✨ Two lightbulb options: basic and AI conversion

0.0.8

🎨 Added RGBA/RGB color support with automatic hex conversion
🔢 Added opacity handling for semi-transparent colors
📦 Multi-value padding/margin support (2, 3, or 4 values)
🐛 Fixed padding conversion to properly handle vertical/horizontal values
⚡ Improved color parsing accuracy

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

🔒 Privacy & Security

API Key Storage: Your Gemini API key is stored locally in VS Code settings
Data Transmission: Only CSS code is sent to Google's Gemini API
No Telemetry: This extension does not collect usage data
Open Source: Full source code available for inspection

🧑‍💻 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 ✨

🤖 AI-Powered Conversion Setup

Step 1: Get Your Gemini API Key

Step 2: Add API Key to VS Code

Step 3: Use AI Conversion

🆚 Conversion Modes Comparison

🎯 Advanced Features

🎨 RGBA Color Support

📦 Multi-Value Padding/Margin

🎨 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

AI Conversion Details

⚠️ Important Notes

🎬 Typical Workflow

🛠️ Commands

🛠️ Configuration

🛠️ Roadmap

📦 Version History

🔒 Privacy & Security

🧑‍💻 Author

📝 License

🙏 Feedback & Contributions

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

Method 2: Paste CSS inside `tw`

`tw` Attribute Workflow