CSS to Tailwind Converter
Maps declarations onto the default Tailwind scale, falling back to arbitrary values like p-[13px]. Declarations with no utility equivalent are listed rather than dropped.
CSS to Tailwind Converter — Free Online Tool
Translates CSS declarations into Tailwind CSS utility classes, matching the default scale for spacing, colors, font sizes, flexbox, grid, borders and shadows, and falling back to arbitrary-value syntax such as w-[13px] when no scale value matches, while listing declarations that have no utility equivalent so nothing is silently dropped.
How to use the CSS to Tailwind Converter
- Open the tool above — it runs entirely in your browser, so your input never leaves this page.
- Paste or type your input into the field, then press the relevant button (e.g. Encode / Decode, Generate, or Convert).
- Copy the result from the output area with the copy button orCtrl/Cmd + C.
- No signup, no upload, and no tracking — repeat as often as you need.
Frequently asked questions
What does a class like p-[13px] mean?
It is Tailwind's arbitrary-value syntax, used when no value on the default scale matches. 13px is not on the spacing scale, so the exact value is emitted rather than silently rounding to p-3 (12px).
Why are some declarations listed as having no equivalent?
Because a wrong utility is worse than none. Multi-part shorthands, transitions, filters and animations often need a config change or a custom class, so they are reported for you to handle rather than approximated.
Does the output account for my tailwind.config.js?
No — it maps onto Tailwind's default scale. If your project customizes spacing, colors or breakpoints, treat the output as a starting point and swap in your own token names.
Free & private — why use this CSS to Tailwind Converter
The CSS to Tailwind Converter runs 100% client-side in your browser. Your data is never uploaded to a server, no account is required, and the tool is completely free. It works offline once the page has loaded and is part of a growing collection of privacy-first developer utilities.