Tailwind ToolsNo account required

Tailwind CSS Converter

Yes. Custom colors, sizes, and uncommon values are emitted as Tailwind arbitrary value classes.

Convert common CSS declarations into Tailwind utility classes with arbitrary values when needed.

Tailwind workspace

Use CSS Converter

Add your input, choose the available settings, and review the result before using it.

CSS inputcss

Tailwind classes

flex p-6 text-[#ffffff] bg-[#0f172a] rounded-3 items-center justify-between gap-4

All parsed declarations were converted.

Simple workflow

01
Add your input
Enter values, paste content, or choose files in the workspace.
02
Choose your settings
Adjust the available options to match the result you need.
03
Review the result
Check the output before you copy or download it.

Before you use the result

Review generated code and styles in your own project context before using them in production.

Does every CSS property have a Tailwind equivalent?

No. The converter maps common layout, spacing, color, sizing, and radius declarations and flags unsupported rules.

Are arbitrary values supported?

Continue the workflow with tools that pair naturally with this one.