CSS to Tailwind Converter
Paste your CSS variables and instantly generate a deeply nested tailwind.config.js object. We automatically group variables by prefix (e.g., --color-primary → colors: { primary: '...' }). 100% client-side.
- Deeply nested object generation
- Strips double quotes for cleaner JS
- No upload, no sign-up
- Runs in your browser
- No upload
- No sign-up
- Deeply nested output
- Works offline
Related tools
Free AI and developer tools that run in your browser. Nothing uploaded, ever.
Why this tool is the best choice
Most converters output messy JSON. We output clean JavaScript perfectly shaped for Tailwind.
| Feature | TToolDeck | Manual Entry | Other Converters |
|---|---|---|---|
| Runs entirely in your browser | Yes | No | No |
| CSS never sent to a server | Yes | No | No |
| Deeply nested object generation | Yes | No | Partial |
| Cleans quotes for JS (no "keys") | Yes | No | No |
| Instant real-time parsing | Yes | No | No |
| Free without paywalls | Yes | Yes | Partial |
How it works
- 1
Paste your CSS
Copy the :root block or any CSS variables from your stylesheet and paste them into the left pane.
- 2
Automatic parsing
The tool splits variable names by hyphens and builds a deeply nested object, grouping colors, spacing, etc.
- 3
Copy to Tailwind
We format the output perfectly for module.exports and strip the double quotes so it is ready to paste.
Everything you get for free
Smart Nesting
--color-primary-red becomes { color: { primary: { red: "..." } } }. This matches the exact shape Tailwind expects.
Clean JavaScript Output
JSON requires double quotes on keys. Tailwind config is JavaScript. We strip the quotes from keys automatically so your config looks clean.
100% Secure
Your proprietary brand colors and design tokens are processed locally. Nothing is uploaded to a server.
Handles Complex Values
Hex codes, rgb(), calc(), and even var() fallbacks are preserved exactly as you wrote them.
No Setup Required
No CLI installation or npm package needed. Paste your CSS, grab your config, and go.
Works Offline
After the page loads, the regex parser works entirely in your browser without an internet connection.
What people use it for
Migrating to Tailwind
Moving an existing custom CSS design system into Tailwind? Convert your entire color palette in seconds.
Shadcn/UI Theming
Shadcn uses CSS variables for themes. Convert those variables into your tailwind.config.js to extend the theme.
Generating Brand Palettes
Paste a client's brand CSS and instantly get a Tailwind config you can drop into their new project.
Extending Tailwind
Instead of manually nesting colors in your config, paste them here to generate the object structure instantly.
Learning Tailwind
Understand how CSS variables map to Tailwind theme extensions by seeing the output side-by-side.
Saving Time
Manually converting 50 CSS variables to a nested object takes 20 minutes. This tool does it in 2 seconds.
Questions people ask
How does it format the variables?
It splits the CSS variable name by hyphens. For example, --color-primary-red becomes a deeply nested object: { color: { primary: { red: "..." } } }.
Does it handle complex values?
Yes. It captures everything between the colon and the semicolon. This includes hex codes, rgb(), calc(), and even var(--other-variable).
Does it output standard JSON or JS?
It outputs a clean JavaScript object wrapped in a standard module.exports block, ready to paste directly into your tailwind.config.js or tailwind.config.ts file.
Why are the quotes missing?
Standard JSON requires quotes around keys, but JavaScript objects do not. Tailwind uses JavaScript, so we strip the quotes to give you cleaner, standard config syntax.
Does it convert standard CSS classes?
No, it only converts CSS custom properties (variables) starting with --. It does not convert standard classes like .btn into Tailwind utility classes.
Can I use this for SCSS or LESS?
Yes, as long as you extract the variables into a :root block first.
Is my data sent to a server?
No. The parsing runs entirely in your browser using regex. Your design system stays private.
Is there a limit on the number of variables?
No. You can paste an entire design system with thousands of variables and it will process instantly.