CSS to Tailwind
Convert common CSS properties to equivalent Tailwind CSS utility classes.
flex items-center justify-between gap-4 py-3 px-6 mx-auto text-sm font-semibold text-gray-900 bg-gray-100 rounded-lg border border-gray-200 w-full max-w-sm overflow-hidden cursor-pointer
CSS to Tailwind converter
This tool maps common CSS declarations to Tailwind CSS utility classes using a lookup table. Exact pixel values are mapped to the nearest Tailwind scale (4px grid). Properties without a direct equivalent are listed separately — use Tailwind's arbitrary value syntax (e.g. text-[13px]) for those. For inspecting CSS variables, try the CSS Variables Generator. To format raw CSS, use CSS Formatter.
Private & free — this tool runs entirely in your browser.
Recommended: IndieKit — Ship your Next.js startup in days.affiliate
Related Design & CSS tools
Color Converter
Convert a color to HEX, RGB, HSL, HSB, and CMYK at once.
HEX to RGB
Convert HEX color codes to RGB / RGBA values.
RGB to HEX
Convert RGB values into HEX color codes.
CSS Box Shadow Generator
Visually design CSS box-shadow with a live preview and code.
CSS Border Radius Generator
Visually craft border-radius with a live preview.
HEX to CMYK
Convert HEX colors to CMYK print values.
CMYK to HEX
Convert CMYK print values to HEX colors.
HEX to HSB
Convert HEX colors to HSB / HSV values.