CSS to Tailwind Reference

Look up Tailwind CSS utility classes for any CSS property. 250+ mappings across display, flex, grid, spacing, typography, and more.

242 mappings

blockdisplay

display: block

inlinedisplay

display: inline

inline-blockdisplay

display: inline-block

flexdisplay

display: flex

inline-flexdisplay

display: inline-flex

griddisplay

display: grid

inline-griddisplay

display: inline-grid

hiddendisplay

display: hidden / display: none

tabledisplay

display: table

contentsdisplay

display: contents

flex-rowflexbox

flex-direction: row

flex-row-reverseflexbox

flex-direction: row-reverse

flex-colflexbox

flex-direction: column

flex-col-reverseflexbox

flex-direction: column-reverse

flex-wrapflexbox

flex-wrap: wrap

flex-nowrapflexbox

flex-wrap: nowrap

flex-wrap-reverseflexbox

flex-wrap: wrap-reverse

flex-1flexbox

flex: 1 1 0%

flex-autoflexbox

flex: 1 1 auto

flex-noneflexbox

flex: none

growflexbox

flex-grow: 1

grow-0flexbox

flex-grow: 0

shrinkflexbox

flex-shrink: 1

shrink-0flexbox

flex-shrink: 0

justify-startalignment

justify-content: flex-start

justify-endalignment

justify-content: flex-end

justify-centeralignment

justify-content: center

justify-betweenalignment

justify-content: space-between

justify-aroundalignment

justify-content: space-around

justify-evenlyalignment

justify-content: space-evenly

items-startalignment

align-items: flex-start

items-endalignment

align-items: flex-end

items-centeralignment

align-items: center

items-baselinealignment

align-items: baseline

items-stretchalignment

align-items: stretch

self-autoalignment

align-self: auto

self-startalignment

align-self: flex-start

self-endalignment

align-self: flex-end

self-centeralignment

align-self: center

self-stretchalignment

align-self: stretch

content-startalignment

align-content: flex-start

content-endalignment

align-content: flex-end

content-centeralignment

align-content: center

content-betweenalignment

align-content: space-between

content-aroundalignment

align-content: space-around

grid-cols-1grid

grid-template-columns: repeat(1, ...)

grid-cols-2grid

grid-template-columns: repeat(2, ...)

grid-cols-3grid

grid-template-columns: repeat(3, ...)

grid-cols-4grid

grid-template-columns: repeat(4, ...)

grid-cols-6grid

grid-template-columns: repeat(6, ...)

grid-cols-12grid

grid-template-columns: repeat(12, ...)

grid-rows-1grid

grid-template-rows: repeat(1, ...)

grid-rows-3grid

grid-template-rows: repeat(3, ...)

gap-0grid

gap: 0

gap-1grid

gap: 0.25rem (4px)

gap-2grid

gap: 0.5rem (8px)

gap-4grid

gap: 1rem (16px)

gap-6grid

gap: 1.5rem (24px)

gap-8grid

gap: 2rem (32px)

gap-x-4grid

column-gap: 1rem

gap-y-4grid

row-gap: 1rem

m-0spacing

margin: 0

m-autospacing

margin: auto

m-1spacing

margin: 0.25rem (4px)

m-2spacing

margin: 0.5rem (8px)

m-4spacing

margin: 1rem (16px)

m-6spacing

margin: 1.5rem (24px)

m-8spacing

margin: 2rem (32px)

mt-4spacing

margin-top: 1rem

mr-4spacing

margin-right: 1rem

mb-4spacing

margin-bottom: 1rem

ml-4spacing

margin-left: 1rem

mx-4spacing

margin-left & margin-right: 1rem

my-4spacing

margin-top & margin-bottom: 1rem

p-0spacing

padding: 0

p-1spacing

padding: 0.25rem (4px)

p-2spacing

padding: 0.5rem (8px)

p-4spacing

padding: 1rem (16px)

p-6spacing

padding: 1.5rem (24px)

p-8spacing

padding: 2rem (32px)

pt-4spacing

padding-top: 1rem

pr-4spacing

padding-right: 1rem

pb-4spacing

padding-bottom: 1rem

pl-4spacing

padding-left: 1rem

px-4spacing

padding-left & padding-right: 1rem

py-4spacing

padding-top & padding-bottom: 1rem

w-fullsizing

width: 100%

w-screensizing

width: 100vw

w-autosizing

width: auto

w-fitsizing

width: fit-content

w-maxsizing

width: max-content

w-minsizing

width: min-content

min-w-0sizing

min-width: 0

min-w-fullsizing

min-width: 100%

max-w-fullsizing

max-width: 100%

max-w-nonesizing

max-width: none

max-w-mdsizing

max-width: 28rem (448px)

max-w-lgsizing

max-width: 32rem (512px)

max-w-xlsizing

max-width: 36rem (576px)

max-w-2xlsizing

max-width: 42rem (672px)

max-w-3xlsizing

max-width: 48rem (768px)

max-w-4xlsizing

max-width: 56rem (896px)

h-fullsizing

height: 100%

h-screensizing

height: 100vh

h-autosizing

height: auto

h-fitsizing

height: fit-content

min-h-screensizing

min-height: 100vh

min-h-fullsizing

min-height: 100%

max-h-fullsizing

max-height: 100%

max-h-screensizing

max-height: 100vh

text-xstypography

font-size: 0.75rem (12px)

text-smtypography

font-size: 0.875rem (14px)

text-basetypography

font-size: 1rem (16px)

text-lgtypography

font-size: 1.125rem (18px)

text-xltypography

font-size: 1.25rem (20px)

text-2xltypography

font-size: 1.5rem (24px)

text-3xltypography

font-size: 1.875rem (30px)

text-4xltypography

font-size: 2.25rem (36px)

font-thintypography

font-weight: 100

font-lighttypography

font-weight: 300

font-normaltypography

font-weight: 400

font-mediumtypography

font-weight: 500

font-semiboldtypography

font-weight: 600

font-boldtypography

font-weight: 700

font-extraboldtypography

font-weight: 800

italictypography

font-style: italic

text-lefttypography

text-align: left

text-centertypography

text-align: center

text-righttypography

text-align: right

text-justifytypography

text-align: justify

underlinetypography

text-decoration: underline

line-throughtypography

text-decoration: line-through

no-underlinetypography

text-decoration: none

uppercasetypography

text-transform: uppercase

lowercasetypography

text-transform: lowercase

capitalizetypography

text-transform: capitalize

whitespace-nowraptypography

white-space: nowrap

whitespace-normaltypography

white-space: normal

break-wordstypography

overflow-wrap: break-word

break-alltypography

word-break: break-all

leading-nonetypography

line-height: 1 (none)

leading-tighttypography

line-height: 1.25 (tight)

leading-normaltypography

line-height: 1.5 (normal)

leading-loosetypography

line-height: 2 (loose)

tracking-tightertypography

letter-spacing: -0.05em (tighter)

tracking-normaltypography

letter-spacing: 0 (normal)

tracking-widetypography

letter-spacing: 0.05em (wide)

tracking-widertypography

letter-spacing: 0.1em (wider)

font-monotypography

font-family: ui-monospace, monospace

font-seriftypography

font-family: ui-serif, Georgia, serif

font-sanstypography

font-family: ui-sans-serif, system-ui, sans-serif

bg-transparentbackground

background-color: transparent

bg-whitebackground

background-color: white

bg-blackbackground

background-color: black

bg-coverbackground

background-size: cover

bg-containbackground

background-size: contain

bg-centerbackground

background-position: center

bg-topbackground

background-position: top

bg-bottombackground

background-position: bottom

bg-no-repeatbackground

background-repeat: no-repeat

bg-repeatbackground

background-repeat: repeat

bg-fixedbackground

background-attachment: fixed

borderborder

border-width: 1px

border-0border

border-width: 0

border-2border

border-width: 2px

border-4border

border-width: 4px

border-tborder

border-top-width: 1px

border-rborder

border-right-width: 1px

border-bborder

border-bottom-width: 1px

border-lborder

border-left-width: 1px

border-solidborder

border-style: solid

border-dashedborder

border-style: dashed

border-dottedborder

border-style: dotted

border-noneborder

border-style: none

rounded-noneborder

border-radius: 0

rounded-smborder

border-radius: 0.125rem (2px)

roundedborder

border-radius: 0.25rem (4px)

rounded-mdborder

border-radius: 0.375rem (6px)

rounded-lgborder

border-radius: 0.5rem (8px)

rounded-xlborder

border-radius: 0.75rem (12px)

rounded-2xlborder

border-radius: 1rem (16px)

rounded-fullborder

border-radius: 9999px

opacity-0effects

opacity: 0

opacity-25effects

opacity: 0.25

opacity-50effects

opacity: 0.5

opacity-75effects

opacity: 0.75

opacity-100effects

opacity: 1

shadow-smeffects

box-shadow: sm

shadow-mdeffects

box-shadow: md

shadow-lgeffects

box-shadow: lg

shadow-xleffects

box-shadow: xl

shadow-noneeffects

box-shadow: none

cursor-pointereffects

cursor: pointer

cursor-defaulteffects

cursor: default

cursor-not-allowedeffects

cursor: not-allowed

cursor-waiteffects

cursor: wait

pointer-events-noneeffects

pointer-events: none

select-noneeffects

user-select: none

select-alleffects

user-select: all

select-texteffects

user-select: text

staticposition

position: static

relativeposition

position: relative

absoluteposition

position: absolute

fixedposition

position: fixed

stickyposition

position: sticky

top-0position

top: 0

right-0position

right: 0

bottom-0position

bottom: 0

left-0position

left: 0

inset-0position

inset: 0

z-0position

z-index: 0

z-10position

z-index: 10

z-20position

z-index: 20

z-50position

z-index: 50

z-autoposition

z-index: auto

overflow-autooverflow

overflow: auto

overflow-hiddenoverflow

overflow: hidden

overflow-visibleoverflow

overflow: visible

overflow-scrolloverflow

overflow: scroll

overflow-x-autooverflow

overflow-x: auto

overflow-y-autooverflow

overflow-y: auto

overflow-x-hiddenoverflow

overflow-x: hidden

overflow-y-hiddenoverflow

overflow-y: hidden

transition-alltransition

transition-property: all

transition-colorstransition

transition-property: colors

transition-opacitytransition

transition-property: opacity

transition-transformtransition

transition-property: transform

duration-150transition

transition-duration: 150ms

duration-300transition

transition-duration: 300ms

duration-500transition

transition-duration: 500ms

ease-intransition

transition-timing-function: ease-in

ease-outtransition

transition-timing-function: ease-out

ease-in-outtransition

transition-timing-function: ease-in-out

scale-90transform

transform: scale(0.9)

scale-100transform

transform: scale(1)

scale-105transform

transform: scale(1.05)

scale-110transform

transform: scale(1.1)

rotate-45transform

transform: rotate(45deg)

rotate-90transform

transform: rotate(90deg)

rotate-180transform

transform: rotate(180deg)

-translate-x-1/2 -translate-y-1/2transform

transform: translateX(-50%) translateY(-50%)

-translate-y-fulltransform

transform: translateY(-100%)

What Is This CSS to Tailwind Reference?

This tool maps standard CSS property–value pairs to their Tailwind CSS utility class equivalents. It covers all major CSS categories: display, flexbox, grid, spacing, sizing, typography, borders, backgrounds, effects, positioning, overflow, transitions, and transforms — over 250 mappings in total. Use it when migrating plain CSS to Tailwind or when you know the CSS but can't remember the Tailwind class name.

How to Use

Type a CSS property or value in the search box (e.g., flex-direction or border-radius)
Or filter by category using the buttons below the search bar
Click the copy icon next to any Tailwind class to copy it to your clipboard
Paste it directly into your JSX or HTML className

Features

250+ CSS property → Tailwind class mappings
14 categories: display, flex, grid, spacing, sizing, typography, background, border, effects, position, overflow, transition, transform
Search by CSS property name, value, or Tailwind class name
One-click copy for each Tailwind class
Color-coded category badges for quick scanning

FAQ

Does Tailwind cover every CSS property?

Tailwind covers the most commonly used CSS properties with utility classes. For properties without a built-in class, Tailwind v3+ supports arbitrary values with bracket notation, e.g. w-[347px] or grid-cols-[200px_1fr].

How does Tailwind spacing scale work?

Tailwind's default spacing scale maps integers to multiples of 0.25rem. So p-4 = 1rem (16px), p-8 = 2rem (32px), and p-1 = 0.25rem (4px).

What's the difference between mx-auto and m-auto?

mx-auto sets margin-left: auto; margin-right: auto — the standard way to horizontally center a block element. m-auto sets all four margins to auto.

How do responsive variants work in Tailwind?

Prefix any class with a breakpoint: md:flex-row applies flex-direction: row only at the md breakpoint (768px) and above. Tailwind is mobile-first, so unprefixed classes apply to all screen sizes.