Skip to content

CSS to Tailwind Converter

Convert vanilla CSS to Tailwind CSS utility classes with property mapping and spacing scale conversion

CSS to Tailwind Converter

37 CSS properties converted

37 properties parsed
35 exact2 approximate

CSS input

Paste CSS declarations or full rule blocks

Tailwind output

37 classes generated
Combined classes
flex flex-col items-center justify-between w-full max-w-96 pt-6 pr-8 pb-6 pl-8 mt-0 mr-auto mb-0 ml-auto bg-gray-800 border border-solid border-gray-700 rounded-lg shadow-md text-sm font-semibold text-gray-100 cursor-pointer transition-all overflow-hidden relative z-10 opacity-95 gap-4 text-2xl font-bold text-center no-underline tracking-tight leading-tight whitespace-nowrap
Property breakdown
Exact
display: flex→flex
Exact
flex-direction: column→flex-col
Exact
align-items: center→items-center
Exact
justify-content: space-between→justify-between
Exact
width: 100%→w-full
Exact
max-width: 384px→max-w-96
Exact
padding-top: 24px→pt-6
Exact
padding-right: 32px→pr-8
Exact
padding-bottom: 24px→pb-6
Exact
padding-left: 32px→pl-8
Exact
margin-top: 0→mt-0
Exact
margin-right: auto→mr-auto
Exact
margin-bottom: 0→mb-0
Exact
margin-left: auto→ml-auto
Exact
background-color: #1f2937→bg-gray-800
Exact
border-width: 1px→border
Exact
border-style: solid→border-solid
Exact
border-color: #374151→border-gray-700
Exact
border-radius: 8px→rounded-lg
Approx
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1)→shadow-md

Matched closest Tailwind shadow

Exact
font-size: 14px→text-sm
Exact
font-weight: 600→font-semibold
Exact
color: #f3f4f6→text-gray-100
Exact
cursor: pointer→cursor-pointer
Approx
transition: all 200ms ease-in-out→transition-all
Exact
overflow: hidden→overflow-hidden
Exact
position: relative→relative
Exact
z-index: 10→z-10
Exact
opacity: 0.95→opacity-95
Exact
gap: 16px→gap-4
Exact
font-size: 24px→text-2xl
Exact
font-weight: 700→font-bold
Exact
text-align: center→text-center
Exact
text-decoration: none→no-underline
Exact
letter-spacing: -0.025em→tracking-tight
Exact
line-height: 1.25→leading-tight
Exact
white-space: nowrap→whitespace-nowrap
Confidence legend
Exact -- direct 1:1 match
Approx -- nearest scale value
Arbitrary -- uses [value]
Manual -- needs human review

Updated . Provided as is. Check the output before you rely on it in production.

How to use CSS to Tailwind Converter

  1. 1

    Paste CSS rules

    Paste CSS declarations or full rule blocks, for example color: red; padding: 1rem;, or load the sample.

  2. 2

    Get the Tailwind classes

    The tool shows the combined class string, for example text-red-500 p-4, as you type.

  3. 3

    Review the property breakdown

    Each declaration is listed with its Tailwind class and a confidence label: exact match, nearest scale value, arbitrary [value] or needs manual review.

  4. 4

    Handle responsive and state styles

    For media queries use breakpoint prefixes (sm:, md:, lg:); for :hover and :focus use the hover: and focus: variants.

  5. 5

    Copy or download

    Copy the combined classes or download the result.

Questions and answers

What is CSS to Tailwind Converter?
Tailwind CSS is a utility-first framework where styles are written as small classes such as p-4 or text-lg instead of CSS rules. This converter reads your CSS declarations and returns the matching Tailwind classes, rating each as exact, approximate, arbitrary value or manual.
Does it support all CSS properties?
It maps layout, flexbox, grid, spacing, sizing, typography, colors, borders, radius, shadows, opacity, z-index and transitions. Off-scale values become arbitrary classes such as p-[13px], and properties it cannot map are marked for manual conversion. Media queries and selectors are not converted.
For AI agents: how to call this tool

Machine-readable contract, endpoints and examples. Humans can ignore this section.

Best Path For Builders

Browser workflow

Runs instantly in the browser with private local processing and copy/export-ready output.

Browser Workflow

This tool is optimized for instant in-browser execution with local data handling. Run it here and copy/export the output directly.

/tailwind-converter/

For automation planning, fetch the canonical contract at /api/tool/tailwind-converter.json.