CSS to Tailwind

Convert common CSS properties to equivalent Tailwind CSS utility classes.

Input Declarations: 16Tailwind Classes: 18Unmatched Declarations: 0

CSS input

Paste CSS declarations here (e.g. display: flex; color: #fff;)

Tailwind 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.

Built and maintained by Meet Shah · Last updated 19 July 2026

What this tool is used for

Converting a stylesheet rule into the utility classes that match it.
Finding the utility for a property you rarely use.
Migrating a component from CSS to utilities incrementally.
Checking whether a value maps to a scale step or needs an arbitrary value.
Producing a starting class list from designer-supplied CSS.

Frequently Asked Questions

How does the conversion actually work?: A lookup table of regular expressions against normalised declarations — `display: flex` matches a pattern that emits `flex`, `align-items: center` emits `items-center`. It is a declaration-level mapping, not a CSS parser, so it converts a block of properties rather than a whole stylesheet with selectors and nesting.
What happens to a value that has no Tailwind class?: It is listed separately instead of being silently approximated. Tailwind's spacing scale is a 4px grid, so 16px is `gap-4`, but 13px is not on the scale at all — for those, use arbitrary-value syntax like `text-[13px]`, which the tool points you at rather than rounding to the nearest class behind your back.
Why does 16px become 4 and not 16?: Because Tailwind's numeric suffix counts 0.25rem units, not pixels. `p-4` is 4 × 0.25rem = 1rem = 16px at the default root size. That indirection is deliberate — it makes the whole scale rescale with the root font size, which a pixel-named class could not do.
Does it handle media queries and pseudo-classes?: Not as input. Those become Tailwind's variant prefixes — `md:`, `hover:`, `dark:` — which are structural rather than a property-to-class mapping. Convert the declarations inside the block, then add the variant prefix to the resulting classes yourself.
Is the output going to be shorter than my CSS?: Usually not in characters, and that is not the point. Utilities trade file length for the removal of the naming problem and of dead CSS — the class list is longer than the declaration block, but the stylesheet stops growing with every new component, since the utilities are already there.

Common errors and gotchas

Assuming every property has a utility, when many need an arbitrary value or a custom rule.
Converting a value that is not on the scale and getting an approximation rather than a match.
Losing pseudo-selectors and media queries, which become prefixes rather than properties.
Producing a class list so long the markup becomes unreadable, where a component class was better.
Assuming utility order matters for the cascade, which it does not.