Tailwind CSS Quick Reference

max-width: breakpoint width

Sets max-width based on current breakpoint

display: block

Sets display to block

display: inline-block

Sets display to inline-block

display: inline

Sets display to inline

display: flex

Sets display to flex

display: inline-flex

Sets display to inline-flex

display: grid

Sets display to grid

display: none

Hides element (display none)

overflow: auto

Adds scrollbar only when needed

overflow: hidden

Clips overflowing content

overflow: scroll

Always shows scrollbar

overflow-x: auto

Horizontal scrollbar when needed

overflow-y: auto

Vertical scrollbar when needed

position: relative

Positions element relative to normal flow

position: absolute

Removes from flow, positions to nearest positioned ancestor

position: fixed

Positions relative to viewport

position: sticky

Sticks to nearest scroll container

top: 0px

Pins element to top edge

right: 0px

Pins element to right edge

bottom: 0px

Pins element to bottom edge

left: 0px

Pins element to left edge

top: 0; right: 0; bottom: 0; left: 0

Pins all edges to 0 (full cover)

z-index: 10

Sets stacking order to 10

z-index: 20

Sets stacking order to 20

z-index: 50

Sets stacking order to 50

flex-direction: row

Main axis goes left to right

flex-direction: column

Main axis goes top to bottom

flex-wrap: wrap

Items wrap to next line when overflow

flex-wrap: nowrap

Items never wrap

justify-content: flex-start

Items packed to start of main axis

justify-content: center

Items centered on main axis

justify-content: flex-end

Items packed to end of main axis

justify-content: space-between

Equal space between items

justify-content: space-around

Equal space around items

justify-content: space-evenly

Equal space between and around items

align-items: flex-start

Align items to start of cross axis

align-items: center

Align items to center of cross axis

align-items: flex-end

Align items to end of cross axis

align-items: stretch

Stretch items to fill cross axis

flex: 1 1 0%

Grow and shrink as needed, ignoring initial size

flex: 1 1 auto

Grow and shrink based on initial size

flex: none

Prevent item from growing or shrinking

flex-grow: 1

Allow item to grow to fill available space

flex-shrink: 1

Allow item to shrink when needed

grid-template-columns: repeat(1, minmax(0, 1fr))

1-column grid

grid-template-columns: repeat(2, minmax(0, 1fr))

2-column grid

grid-template-columns: repeat(3, minmax(0, 1fr))

3-column grid

grid-column: span 2 / span 2

Span 2 grid columns

grid-column: 1 / -1

Span all grid columns

padding: 0px

Remove all padding

padding: 0.25rem

4px padding all sides

padding: 0.5rem

8px padding all sides

padding: 1rem

16px padding all sides

padding: 1.5rem

24px padding all sides

padding: 2rem

32px padding all sides

padding-left: 1rem; padding-right: 1rem

16px horizontal padding

padding-top: 1rem; padding-bottom: 1rem

16px vertical padding

padding-top: 1rem

16px top padding

padding-right: 1rem

16px right padding

padding-bottom: 1rem

16px bottom padding

padding-left: 1rem

16px left padding

margin: 0px

Remove all margin

margin: 0.25rem

4px margin all sides

margin: 0.5rem

8px margin all sides

margin: 1rem

16px margin all sides

margin-left: auto; margin-right: auto

Center element horizontally

margin-top: auto; margin-bottom: auto

Center element vertically

margin-top: 1rem

16px top margin

margin-bottom: 1rem

16px bottom margin

> * + * { margin-left: 0.5rem }

8px horizontal gap between children

> * + * { margin-left: 1rem }

16px horizontal gap between children

> * + * { margin-top: 0.5rem }

8px vertical gap between children

> * + * { margin-top: 1rem }

16px vertical gap between children

gap: 0.25rem

4px gap between grid/flex items

gap: 0.5rem

8px gap between grid/flex items

gap: 1rem

16px gap between grid/flex items

gap: 1.5rem

24px gap between grid/flex items

gap: 2rem

32px gap between grid/flex items

width: 100%

Full width of parent

width: 100vw

Full viewport width

width: auto

Browser-determined width

width: 50%

Half the parent width

width: 33.333333%

One third the parent width

width: 66.666667%

Two thirds the parent width

width: 25%

One quarter the parent width

width: 75%

Three quarters the parent width

max-width: 20rem

Max width 320px

max-width: 24rem

Max width 384px

max-width: 28rem

Max width 448px

max-width: 32rem

Max width 512px

max-width: 36rem

Max width 576px

max-width: 42rem

Max width 672px

max-width: 100%

Max width is 100% of parent

height: 100%

Full height of parent

height: 100vh

Full viewport height

min-height: 100vh

Minimum full viewport height

font-size: 0.75rem; line-height: 1rem

Extra small text (12px)

font-size: 0.875rem; line-height: 1.25rem

Small text (14px)

font-size: 1rem; line-height: 1.5rem

Base text size (16px)

font-size: 1.125rem; line-height: 1.75rem

Large text (18px)

font-size: 1.25rem; line-height: 1.75rem

Extra large text (20px)

font-size: 1.5rem; line-height: 2rem

2x large text (24px)

font-size: 1.875rem; line-height: 2.25rem

3x large text (30px)

font-size: 2.25rem; line-height: 2.5rem

4x large text (36px)

font-weight: 400

Normal font weight

font-weight: 500

Medium font weight

font-weight: 600

Semi-bold font weight

font-weight: 700

Bold font weight

line-height: 1

No extra line height

line-height: 1.25

Tight line height

line-height: 1.5

Normal line height

line-height: 1.625

Relaxed line height

letter-spacing: -0.05em

Tighter letter spacing

letter-spacing: 0em

Normal letter spacing

letter-spacing: 0.025em

Wider letter spacing

text-align: left

Left-align text

text-align: center

Center-align text

text-align: right

Right-align text

overflow: hidden; text-overflow: ellipsis; white-space: nowrap

Truncate text with ellipsis

text-transform: uppercase

Transform text to uppercase

text-transform: lowercase

Transform text to lowercase

text-transform: capitalize

Capitalize first letter of each word

font-style: italic

Italic text

font-style: normal

Remove italic style

color: rgb(255 255 255)

White text color

color: rgb(0 0 0)

Black text color

color: rgb(107 114 128)

Gray text (medium)

color: rgb(55 65 81)

Dark gray text

color: rgb(59 130 246)

Blue text

color: rgb(37 99 235)

Darker blue text

color: rgb(239 68 68)

Red text

color: rgb(34 197 94)

Green text

background-color: rgb(255 255 255)

White background

background-color: rgb(0 0 0)

Black background

background-color: rgb(243 244 246)

Very light gray background

background-color: rgb(17 24 39)

Very dark gray background

background-color: rgb(59 130 246)

Blue background

background-color: rgb(239 68 68)

Red background

background-color: rgb(34 197 94)

Green background

background-color: transparent

Transparent background

border-width: 1px

1px border on all sides

border-width: 2px

2px border on all sides

border-width: 0px

Remove border

border-top-width: 1px

1px top border only

border-bottom-width: 1px

1px bottom border only

border-style: solid

Solid border style

border-style: dashed

Dashed border style

border-radius: 0.25rem

Small border radius (4px)

border-radius: 0.375rem

Medium border radius (6px)

border-radius: 0.5rem

Large border radius (8px)

border-radius: 0.75rem

Extra large border radius (12px)

border-radius: 1rem

2x large border radius (16px)

border-radius: 9999px

Fully rounded (pill / circle)

border-right-width: 0; border-left-width: 1px (between)

Adds vertical divider between children

border-top-width: 0; border-bottom-width: 1px (between)

Adds horizontal divider between children

box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05)

Small box shadow

box-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1)

Default box shadow

box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1)

Medium box shadow

box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1)

Large box shadow

box-shadow: 0 20px 25px -5px rgb(0 0 0 / 0.1)

Extra large box shadow

box-shadow: 0 0 #0000

Remove box shadow

opacity: 0

Fully transparent

opacity: 0.5

Half transparent

opacity: 1

Fully opaque

box-shadow: 0 0 0 3px var(--tw-ring-color)

Adds ring (focus outline effect)

filter: blur(8px)

Blurs element (8px)

filter: blur(4px)

Slightly blurs element (4px)

backdrop-filter: blur(8px)

Blurs content behind element

transform: scale(1)

No scale transformation

transform: scale(0.95)

Scale down to 95%

transform: scale(1.05)

Scale up to 105%

transform: rotate(45deg)

Rotate 45 degrees

transform: rotate(90deg)

Rotate 90 degrees

transform: rotate(180deg)

Rotate 180 degrees

transform: translateX(0.25rem)

Move right 4px

transform: translateY(0.25rem)

Move down 4px

transform: translateY(-0.25rem)

Move up 4px

transition: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter 150ms ease

Transition all common properties

transition: color, background-color, border-color 150ms ease

Transition only color properties

transition: opacity 150ms ease

Transition opacity only

transition: transform 150ms ease

Transition transform only

transition-duration: 150ms

150ms transition duration

transition-duration: 300ms

300ms transition duration

transition-duration: 500ms

500ms transition duration

transition-timing-function: cubic-bezier(0.4, 0, 1, 1)

Start slow, end fast

transition-timing-function: cubic-bezier(0, 0, 0.2, 1)

Start fast, end slow

transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1)

Slow at both ends