CSS to Tailwind Converter
Turn CSS declarations into Tailwind utility classes, with an arbitrary value where no utility exists and a count of which is which.
/* .card */
flex flex-col gap-4 p-6 bg-[#1e56ec] text-white rounded-xl text-sm font-semibold [box-shadow:0_8px_24px_rgba(0,_0,_0,_0.12)]
# 8 of 10 declarations mapped to a utility; 2 used an arbitrary value.
# An arbitrary value is valid Tailwind, not a failure: a colour or a size off the scale has no class.
# The spacing scale assumes a 16px root, where one unit is 0.25rem.Output is valid and updates as you type.
Fix the highlighted fields to update the output.
Turn CSS declarations into Tailwind utility classes, with an honest count of what mapped and what did not.
How to use
- Paste the CSS. One class list comes back per selector, in source order.
- Check the root font size if your project changes it. Tailwind’s spacing scale is 0.25rem a unit, so the root decides which pixel values land on the scale.
- Read the count at the bottom. It says how many declarations became a utility and how many needed an arbitrary value.
- Paste the classes onto the element and delete the CSS rule. Keep the rule if it does something utilities cannot, such as a complex selector.
Example
.card {
display: flex;
gap: 16px;
padding: 1.5rem;
background-color: #1e56ec;
border-radius: 12px;
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
}becomes
flex gap-4 p-6 bg-[#1e56ec] rounded-xl [box-shadow:0_8px_24px_rgba(0,0,0,0.12)]gap-4 is 16 pixels because one unit is four. The colour and the shadow have no utility, so they use the arbitrary value syntax, which is valid Tailwind rather than a failure.
Pitfalls
- An arbitrary value is a signal, not a defeat. A brand colour belongs in your theme, so
bg-[#1e56ec]is a prompt to add--color-brandand usebg-brand. - Classes cannot express a selector.
.card:hover .titlebecomes ahover:variant on the child, which is a restructuring, not a conversion; this tool converts declarations and leaves selectors to you. - Media queries have no class equivalent either. A rule inside
@mediais skipped, because the answer is a responsive prefix on the element, and only you know which breakpoint it should be. - The spacing scale is a grid, and CSS is not. A padding of 15 pixels becomes an arbitrary value; if that happens often, the design is off the grid and worth a conversation.
- Tailwind’s named font sizes are in rem, so
0.875remistext-smat any root while14pxis onlytext-smwhen the root is 16. - Shorthand properties convert as one declaration.
margin: 0 autobecomes an arbitrary value, because Tailwind spells itmx-auto my-0; split the shorthand first for a cleaner result. - Class order does not matter to Tailwind, but it does to a reader. Group layout, then spacing, then colour, the way the output does.
- Converting a whole stylesheet at once is rarely the right move. The classes belong on the markup, and the useful unit of work is one component.
Compatibility
The mapping targets Tailwind’s default scale: 0.25rem spacing units, the named font sizes, radii, weights and line heights, and the standard utility names. It is aimed at Tailwind 3 and 4, which share those names. The arbitrary value syntax, both p-[15px] and [box-shadow:…], has been supported since Tailwind 3.0. Everything runs in your browser.
Frequently asked questions
Why is my colour an arbitrary value?
bg-brand.What happens to hover and focus styles?
hover: to the classes you want changed on hover.Does it handle media queries?
md:p-8, and which breakpoint that is depends on your design.