CSS → Tailwind Suggestions

Suggest Tailwind utility classes for a block of CSS.

Overview

Paste a block of plain CSS and the tool suggests equivalent Tailwind utility classes. It covers spacing, sizing, colour, typography, flex/grid, borders, shadows, and the common positioning properties - the day-to-day 80% of any Tailwind project.

It's for developers migrating a hand-written stylesheet to a utility-first workflow, or pasting a design-tool export (Figma, Webflow) into a Tailwind component. Reach for it when porting legacy components, reviewing AI-generated CSS, or just speeding up writing utilities for something you've sketched out longhand.

How it works

Each CSS declaration is mapped against Tailwind's default theme scale - spacing (p-4, m-2), font-size (text-sm), colour palette (bg-slate-600), and so on. The suggester rounds non-default values to the nearest theme step and notes when an exact match isn't available, so you can decide whether to add a custom theme value or accept the closest preset.

The mapping targets Tailwind v3 utility names by default. Shorthand properties (padding: 1rem 2rem) expand to per-side utilities (py-4 px-8) following Tailwind's naming convention. Properties without a pre-built utility (custom clip-path, exotic transforms) are flagged for a style="..." fallback or an arbitrary-value utility.

Examples

Plain block to utilities:

.btn {
  padding: 0.5rem 1rem;
  background-color: #3b82f6;
  color: white;
  border-radius: 0.375rem;
}

px-4 py-2 bg-blue-500 text-white rounded-md

Flex container:

display: flex;
justify-content: space-between;
align-items: center;

flex justify-between items-center

Off-scale spacing falls to arbitrary value:
```
margin-top: 13px;
```
```
mt-[13px]
```

Typography:

font-size: 1.125rem;
font-weight: 600;
line-height: 1.5;

text-lg font-semibold leading-normal

FAQ

Will it match my custom theme?

The suggester uses Tailwind's default theme. If you've extended tailwind.config.js with custom colours or spacing, your real utilities may have different names - treat the output as a starting point.

What about pseudo-classes like :hover?

You can prefix any utility with hover:, focus:, md:, etc. The CSS-to-Tailwind mapping is per-declaration; combine with state prefixes manually.

Should I use arbitrary values like mt-[13px]?

For one-off values, yes. If you find yourself using the same off-scale value repeatedly, extend your theme.spacing instead so the utility name is meaningful.

Does it work for Tailwind v4?

Output targets v3 utility names. v4 keeps the vast majority of names but changes a few (notably the default font-family stack and the breakpoints) - verify against v4 docs if you're on the latest.

Try CSS → Tailwind Suggestions