CSS to Tailwind Converter

Convert CSS declarations to Tailwind CSS utility classes with 200+ property mappings.

CSS Input

Paste CSS declarations (properties and values, without selectors or braces)

Options

Use arbitrary values for unknown sizesShow unresolved properties

Tailwind Classes

18 converted

flexitems-centerjustify-betweengap-4py-6px-8my-0mx-autobg-whiterounded-xlshadow-[0 4px 6px -1px rgba(0,0,0,0.1)]text-basefont-semiboldtext-neutral-900borderborder-gray-200w-fullmax-w-2xl

Converted Classes

/* Original CSS */
display: flex;
align-items: center;
justify-content: space-between;
gap: 16px;
padding: 24px 32px;
margin: 0 auto;
background: #ffffff;
border-radius: 12px;
box-shadow: 0 4px 6px -1px rgba(0,0,0,0.1);
font-size: 16px;
font-weight: 600;
color: #1d1d1f;
border: 1px solid #e5e7eb;
width: 100%;
max-width: 640px;

100%

Free, no
sign-up needed

Code written
by hand

85+

CSS tools
in one place

<1s

Copy-ready
CSS instantly

What is this

What is the CSS to Tailwind Converter?

Convert CSS properties to Tailwind CSS utility class equivalents. Speed up migration from handwritten CSS to Tailwind.

Everything runs locally in your browser. Adjust the controls above, preview instantly, and copy clean, production-ready CSS — no account, no upload.

How to use

Using the CSS to Tailwind Converter

Everything lives in the panel at the top of this page. There is nothing to install — it all runs right here in your browser.

Paste your CSS rule

Paste a CSS declaration block (the property-value pairs inside {}). The tool converts each property to its Tailwind equivalent.

Review the output

Some CSS values do not have a direct Tailwind equivalent and will be shown as arbitrary values: [value]. Review these for accuracy.

Copy and paste into HTML

Add the Tailwind class string to your HTML element's class attribute.

The output

What the generated code looks like

Clean, production-ready CSS — no vendor bloat, no unnecessary declarations.

tailwind-output.html

<!-- Input CSS -->
<!--
.card {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 24px;
  background: #ffffff;
  border-radius: 12px;
  box-shadow: 0 1px 3px rgba(0,0,0,0.1);
}
-->

<!-- Tailwind classes equivalent -->
<div class="flex flex-col gap-4 p-6 bg-white rounded-xl shadow-sm">
  <!-- content -->
</div>

Tailwind uses a default spacing scale where 1 unit = 4px. padding: 24px becomes p-6 (6 x 4px = 24px). gap: 16px becomes gap-4 (4 x 4px = 16px).

Common mistakes & fixes

Common mistakes & how to fix them

A few habits trip people up. Here is what to watch for — and the exact fix.

Expecting a 1:1 CSS to Tailwind conversion

Tailwind's spacing scale, colour palette, and breakpoints are opinionated. Custom values (non-scale colours, arbitrary spacing) become [arbitrary] classes.

Fix: Use the converter for rough migration. Review arbitrary values and either add them to tailwind.config.js as custom tokens or refactor to the nearest Tailwind scale value.

Pro tips

Pro tips for better results

★

Tailwind arbitrary values [value] are an escape hatch, not a pattern

Frequent arbitrary values (bg-[#0071e3], p-[13px]) defeat the purpose of a design system. Add frequently used values to tailwind.config.js theme extension instead.

FAQ

Frequently asked questions

CSS inside @media blocks maps to Tailwind responsive prefixes: md: lg: xl:. Enter the media query styles separately and prepend the appropriate breakpoint prefix to each class.

Use the reverse direction in this tool, or inspect the element in Chrome DevTools with Tailwind CSS Devtools extension to see the computed CSS for any Tailwind class.