Skip to content

Tailwind Previewer

Convert CSS declarations to Tailwind utility classes, each labeled exact, approximate or arbitrary value, and copy them as a class string or JSX.

Tailwind Previewer

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

  1. 1

    Paste CSS

    Paste CSS declarations or a full rule block that you want to express in Tailwind.

  2. 2

    Preview the utilities

    See the Tailwind classes each declaration maps to, with the combined class string ready to paste.

  3. 3

    Check the confidence labels

    Exact matches need no review; nearest-scale and arbitrary-value matches deserve a look; manual items have no direct utility.

  4. 4

    Copy the result

    Copy the class string into your markup or download the output.

Questions and answers

What is Tailwind Previewer?
Tailwind CSS styles elements with small utility classes such as p-4 or text-lg instead of custom CSS rules. Paste CSS here to see the matching classes, each labeled exact, approximate (nearest scale step) or arbitrary [value], and copy them as a class list or JSX. It uses the same engine as CSS to Tailwind Converter.
Which CSS properties does it map?
The common layout, spacing, typography, color, border and effect properties. Values that fall between Tailwind's scale steps map to the nearest step or to an arbitrary [value] class.
Does it send my CSS anywhere?
No. Conversion runs entirely in your browser.
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-previewer/

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