CSS to Tailwind Converter

How values are mapped

Tailwind’s default spacing scale uses steps of 0.25 rem (4 px), so padding: 16px becomes p-4 and margin: 0 auto becomes my-0 mx-auto. Values that are not on the scale use arbitrary-value syntax: padding: 13px → p-[13px]. Typography, radii and weights map to their named steps:

Limits to know

• Colours become arbitrary values; map them to your theme palette (for example bg-violet-500) afterwards — the CSS variables to Tailwind tool helps define a theme.
• Properties without a utility are written as arbitrary properties: [mask-image:url(...)].
• Media queries, complex selectors and animations need manual translation to md:, group-hover: and theme config.
• !important becomes the ! prefix.

For one-off values, the Tailwind arbitrary value generator builds individual classes, and the Tailwind colour generator creates full palettes.

Tools that pair well with the CSS to Tailwind Converter

• PX to REM Converter — Convert between pixels, rem and em with your own root font size — or paste a whole stylesheet and convert every px value in one go.
• CSS Formatter — Turn a minified stylesheet into readable CSS with one property per line and properly nested @media blocks.
• CSS Gradient Generator — Design a gradient visually — drag colour stops, change the angle or type, start from a preset — and copy production-ready CSS with a solid fallback colour.
• Box Shadow Generator — Stack multiple shadow layers, tweak offsets, blur, spread and opacity on a live card, then copy the box-shadow or text-shadow CSS.