Common CSS properties and their Tailwind utility classes

By

Find the Tailwind CSS 4 utility for a familiar CSS property, with tables for spacing, width, typography, colors, and flexbox.

~~~

If you know the CSS property you need, these tables show its Tailwind utility class. I keep the spacing, sizing, and typography mappings together because those are the ones I look up most.

For a searchable list of classes, open the interactive Tailwind cheat sheet.

This version matches Tailwind CSS 4. If you still need to wire the build, see how to set up Tailwind.

Here are the things I use the most.

Margin and Padding

Compose those 3 tables. Add a dash before the value (e.g. pt-2, m-auto)

In Tailwind 4, spacing utilities are driven by a single --spacing scale (0.25rem per step). So p-4 is 1rem, and odd values like p-7 work without extending the config.

SymbolDescription
pPadding
mMargin
-mNegative margin
SymbolDescription
tTop
rRight
bBottom
lLeft
xHorizontal
yVertical
ValueDescription
00
0.50.125rem
10.25rem
1.50.375rem
20.5rem
2.50.625rem
30.75rem
3.50.875rem
41rem
51.25rem
61.5rem
71.75rem
82rem
92.25rem
102.5rem
112.75rem
123rem
143.5rem
164rem
205rem
246rem
287rem
328rem
369rem
4010rem
4411rem
4812rem
5213rem
5614rem
6015rem
6416rem
7218rem
8020rem
9624rem
px1px
autoauto

margin: 0 auto

I sometimes use margin: 0 auto to center things.

The class mx-auto applies it.

Width

ClassCSS
w-1width: 0.25rem
w-2width: 0.5rem
w-3width: 0.75rem
w-4width: 1rem
w-6width: 1.5rem
w-8width: 2rem
w-10width: 2.5rem
w-12width: 3rem
w-16width: 4rem
w-24width: 6rem
w-32width: 8rem
w-48width: 12rem
w-64width: 16rem
w-96width: 24rem
w-autowidth: auto
w-pxwidth: 1px
w-1/2width: 50%
w-1/3width: 33.33333%
w-2/3width: 66.66667%
w-1/4width: 25%
w-3/4width: 75%
w-1/5width: 20%
w-2/5width: 40%
w-3/5width: 60%
w-4/5width: 80%
w-1/6width: 16.66667%
w-5/6width: 83.33333%
w-fullwidth: 100%
w-screenwidth: 100vw
w-svwwidth: 100svw
w-dvwwidth: 100dvw

Max Width

ClassCSS
max-w-xsmax-width: 20rem
max-w-smmax-width: 24rem
max-w-mdmax-width: 28rem
max-w-lgmax-width: 32rem
max-w-xlmax-width: 36rem
max-w-2xlmax-width: 42rem
max-w-3xlmax-width: 48rem
max-w-4xlmax-width: 56rem
max-w-5xlmax-width: 64rem
max-w-6xlmax-width: 72rem
max-w-7xlmax-width: 80rem
max-w-prosemax-width: 65ch
max-w-fullmax-width: 100%
max-w-nonemax-width: none

Min width

ClassCSS
min-w-0min-width: 0
min-w-fullmin-width: 100%
min-w-minmin-width: min-content
min-w-maxmin-width: max-content
min-w-fitmin-width: fit-content

Font Family

ClassCSS
font-sansfont-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", Arial, sans-serif, ...
font-seriffont-family: ui-serif, Georgia, Cambria, "Times New Roman", Times, serif
font-monofont-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, ...

Font Size

ClassCSS
text-xsfont-size: 0.75rem
text-smfont-size: 0.875rem
text-basefont-size: 1rem
text-lgfont-size: 1.125rem
text-xlfont-size: 1.25rem
text-2xlfont-size: 1.5rem
text-3xlfont-size: 1.875rem
text-4xlfont-size: 2.25rem
text-5xlfont-size: 3rem
text-6xlfont-size: 3.75rem
text-7xlfont-size: 4.5rem
text-8xlfont-size: 6rem
text-9xlfont-size: 8rem

Font weight

ClassCSS
font-thinfont-weight: 100
font-extralightfont-weight: 200
font-lightfont-weight: 300
font-normalfont-weight: 400
font-mediumfont-weight: 500
font-semiboldfont-weight: 600
font-boldfont-weight: 700
font-extraboldfont-weight: 800
font-blackfont-weight: 900

Colors

Tailwind 4 ships a modern palette. Common color names:

Every color has shades from -50 (lightest) up to -950 (darkest):

Text color

Prepend text- to any color, for example text-blue-600

Background color

Prepend bg- to any color, for example bg-zinc-100

Center text

Use text-center

Line Height

ClassCSS
leading-noneline-height: 1
leading-tightline-height: 1.25
leading-snugline-height: 1.375
leading-normalline-height: 1.5
leading-relaxedline-height: 1.625
leading-looseline-height: 2

Flexbox

Container

ClassCSS
flexdisplay: flex
inline-flexdisplay: inline-flex

Items

Direction

ClassCSS
flex-rowflex-direction: row
flex-row-reverseflex-direction: row-reverse
flex-colflex-direction: column
flex-col-reverseflex-direction: column-reverse

Wrapping

ClassCSS
flex-nowrapflex-wrap: nowrap
flex-wrapflex-wrap: wrap
flex-wrap-reverseflex-wrap: wrap-reverse

Align items

ClassCSS
items-stretchalign-items: stretch
items-startalign-items: flex-start
items-centeralign-items: center
items-endalign-items: flex-end
items-baselinealign-items: baseline

Align content

ClassCSS
content-startalign-content: flex-start
content-centeralign-content: center
content-endalign-content: flex-end
content-betweenalign-content: space-between
content-aroundalign-content: space-around
content-evenlyalign-content: space-evenly

Align self

ClassCSS
self-autoalign-self: auto
self-startalign-self: flex-start
self-centeralign-self: center
self-endalign-self: flex-end
self-stretchalign-self: stretch

Justify content

ClassCSS
justify-startjustify-content: flex-start
justify-centerjustify-content: center
justify-endjustify-content: flex-end
justify-betweenjustify-content: space-between
justify-aroundjustify-content: space-around
justify-evenlyjustify-content: space-evenly

Flex, grow, shrink

ClassCSS
flex-initialflex: 0 auto
flex-1flex: 1
flex-autoflex: auto
flex-noneflex: none
growflex-grow: 1
grow-0flex-grow: 0
shrinkflex-shrink: 1
shrink-0flex-shrink: 0

Modifiers

Hover

hover:, for example hover:bg-blue-600

New in Tailwind 4

A few utilities that did not exist in the version this cheat sheet started with:

ClassCSS
size-4width: 1rem; height: 1rem
size-fullwidth: 100%; height: 100%
text-balancetext-wrap: balance
text-prettytext-wrap: pretty
@containercontainer-type: inline-size
@sm:flexdisplay: flex when the container is at least 24rem wide

There is no tailwind.config.js by default. You customize the theme in CSS, with an @theme block, and any value you set there becomes a utility.

Tagged: CSS · All topics

Want me to talk about your product? You can sponsor this site.

~~~

Related posts about css: