Developer tool
CSS to Tailwind Converter
Free, no sign-up. Runs in your browser; nothing is uploaded.
CSS
Tailwind classes
flex flex-col items-center gap-4 py-6 px-8 my-0 mx-auto w-1/2 max-w-[640px] bg-[#1e293b] text-[#f8fafc] text-lg font-semibold leading-normal border border-solid border-[#334155] rounded-xl shadow-[0_4px_6px_rgba(0,_0,_0,_0.1)] transition-all duration-300 ease-in-out [backdrop-filter:blur(8px)]
One class per line
flex flex-col items-center gap-4 py-6 px-8 my-0 mx-auto w-1/2 max-w-[640px] bg-[#1e293b] text-[#f8fafc] text-lg font-semibold leading-normal border border-solid border-[#334155] rounded-xl shadow-[0_4px_6px_rgba(0,_0,_0,_0.1)] transition-all duration-300 ease-in-out [backdrop-filter:blur(8px)]
Not converted (1)
backdrop-filter: blur(8px)[backdrop-filter:blur(8px)]
Values off the spacing scale become arbitrary values such as p-[13px]. Check the result in your project: your theme may rename or extend the defaults.
How to use the css to tailwind converter
Convert CSS in two steps
- Paste a list of declarations such as
padding: 16px; display: flex, or a whole rule with braces. Press Sample to see an example. - Copy the generated class string into your
classorclassNameattribute.
Anything the tool could not turn into a named utility appears in the Not converted list together with its arbitrary-property form.
What is converted
- Layout: display, position, flex and grid properties, gap, overflow, z-index, inset values.
- Spacing and size: padding, margin, width, height, min and max sizes. Pixel and rem values are matched to the Tailwind spacing scale.
- Typography: font size, weight, line height, letter spacing, alignment, case and decoration.
- Colour: text, background and border colours as arbitrary values, with white, black and transparent mapped to names.
- Borders and effects: border width, style and colour, radius, shadows, opacity and basic transitions.
Off-scale values
Tailwind spacing counts in steps of 0.25rem, so 16px is 4 and 24px is 6. A value such as 13px has no step, so the tool writes p-[13px]. That works, but it is often better to move to the nearest step so the design stays consistent.
Limits
The tool reads one set of declarations. It does not understand selectors, media queries, pseudo-classes, custom property values defined elsewhere or shorthand forms with unusual ordering. Add variants such as hover: or md: yourself. Review the output once in the browser; some CSS, for example a shadow with several layers, is kept as an arbitrary value rather than rebuilt from named shadows.
Tip
Convert one component at a time, then delete the old CSS rule once the page looks the same.
Frequently asked questions
Which Tailwind version does it target?
Tailwind CSS v4 naming. For example box-shadow sizes and border radius names follow the v4 scale, and spacing uses the 0.25rem step so any even pixel value up to 384 maps to a number.
What happens to values that are not on the scale?
They become arbitrary values, such as p-[13px] or w-[37%], which Tailwind compiles as written. You can then decide whether to round them to a scale value.
What are the bracket classes like [backdrop-filter:blur(8px)]?
They are arbitrary properties. Tailwind accepts any CSS property in square brackets, so nothing is lost when no named utility exists. Spaces become underscores.
Does it handle pseudo-classes or media queries?
No. It converts the plain declarations of one rule. Add prefixes such as hover: or md: yourself on the classes that need them.
Is my CSS uploaded?
No. The conversion runs in your browser.