Tailwind CSS Cheat Sheet

A complete reference of Tailwind CSS utility classes for both V3 and V4. Find classes for layout, typography, colors, spacing, responsive design, and more.

46 utility groups found
Filter by category:

Display

Layout V3 & V4

Controls the display type of an element

Syntax:

block | inline | inline-block | flex | grid | hidden

Examples:

block Makes element a block-level element
inline Makes element an inline element
inline-block Makes element inline-block
flex Makes element a flex container
grid Makes element a grid container
hidden Hides the element

Notes:

Essential for controlling element layout behavior

Position

Layout V3 & V4

Controls how an element is positioned

Syntax:

static | fixed | absolute | relative | sticky

Examples:

static Default positioning
fixed Fixed relative to viewport
absolute Absolute positioning
relative Relative positioning
sticky Sticky positioning

Notes:

Use with top, right, bottom, left utilities for precise placement

Top / Right / Bottom / Left

Layout V3 & V4

Controls placement of positioned elements

Syntax:

top-{size} | right-{size} | bottom-{size} | left-{size}

Examples:

top-0 top: 0px
right-4 right: 1rem
bottom-auto bottom: auto
left-1/2 left: 50%
inset-0 top: 0, right: 0, bottom: 0, left: 0

Notes:

Works with positioned elements (relative, absolute, fixed, sticky)

Z-Index

Layout V3 & V4

Controls stack order of elements

Syntax:

z-{value}

Examples:

z-0 z-index: 0
z-10 z-index: 10
z-20 z-index: 20
z-50 z-index: 50
z-auto z-index: auto

Notes:

Higher values appear on top of lower values

Flex Direction

Flexbox V3 & V4

Controls direction of flex items

Syntax:

flex-row | flex-col | flex-row-reverse | flex-col-reverse

Examples:

flex-row Horizontal direction (default)
flex-col Vertical direction
flex-row-reverse Horizontal reversed
flex-col-reverse Vertical reversed

Notes:

Must be used on a flex container

Flex Wrap

Flexbox V3 & V4

Controls whether flex items wrap

Syntax:

flex-wrap | flex-nowrap | flex-wrap-reverse

Examples:

flex-wrap Allow items to wrap
flex-nowrap Don't allow wrapping (default)
flex-wrap-reverse Wrap in reverse order

Notes:

Determines if items stay on one line or can wrap to new lines

Justify Content

Flexbox V3 & V4

Controls alignment along main axis

Syntax:

justify-start | justify-center | justify-end | justify-between | justify-around | justify-evenly

Examples:

justify-start Align to start (default)
justify-center Center items
justify-end Align to end
justify-between Space between items
justify-around Space around items
justify-evenly Even space between items

Notes:

Controls horizontal alignment in flex-row, vertical in flex-col

Align Items

Flexbox V3 & V4

Controls alignment along cross axis

Syntax:

items-start | items-center | items-end | items-stretch | items-baseline

Examples:

items-start Align to start
items-center Center items
items-end Align to end
items-stretch Stretch to fill (default)
items-baseline Align to baseline

Notes:

Controls vertical alignment in flex-row, horizontal in flex-col

Grid Template Columns/Rows

Grid V3 & V4

Defines grid track sizing

Syntax:

grid-cols-{n} | grid-rows-{n}

Examples:

grid-cols-1 1 column grid
grid-cols-12 12 column grid
grid-cols-none No explicit columns
grid-rows-3 3 row grid
grid-cols-[200px_1fr_100px] Custom column sizes

Notes:

Must be used on a grid container

Column Span

Grid V3 & V4

Controls how many columns an element spans

Syntax:

col-span-{n} | col-start-{n} | col-end-{n}

Examples:

col-span-2 Span 2 columns
col-span-full Span all columns
col-start-2 Start at column 2
col-end-4 End at column 4
col-auto Auto column placement

Notes:

Used on grid items to control their column placement

Margin

Spacing V3 & V4

Controls margin (outer spacing) of an element

Syntax:

m-{size} | mx-{size} | my-{size} | mt|mr|mb|ml-{size}

Examples:

m-4 margin: 1rem (all sides)
mx-auto margin-left: auto; margin-right: auto
my-8 margin-top: 2rem; margin-bottom: 2rem
mt-2 margin-top: 0.5rem
ml-6 margin-left: 1.5rem
-mx-4 Negative horizontal margin

Notes:

Spacing scale: 0, 0.5, 1, 1.5, 2, 2.5, 3, 3.5, 4, 5, 6, 7, 8, 9, 10, 11, 12, etc.

Padding

Spacing V3 & V4

Controls padding (inner spacing) of an element

Syntax:

p-{size} | px-{size} | py-{size} | pt|pr|pb|pl-{size}

Examples:

p-4 padding: 1rem (all sides)
px-6 padding-left: 1.5rem; padding-right: 1.5rem
py-2 padding-top: 0.5rem; padding-bottom: 0.5rem
pt-8 padding-top: 2rem
pr-0 padding-right: 0

Notes:

Uses same spacing scale as margin

Space Between

Spacing V3 & V4

Controls space between child elements

Syntax:

space-x-{size} | space-y-{size}

Examples:

space-x-4 Add horizontal space between children
space-y-2 Add vertical space between children
space-x-reverse Reverse horizontal spacing direction
space-y-reverse Reverse vertical spacing direction

Notes:

Applies margin to all children except the first

Width

Sizing V3 & V4

Controls the width of an element

Syntax:

w-{size} | w-{fraction} | w-{keyword}

Examples:

w-32 width: 8rem
w-1/2 width: 50%
w-full width: 100%
w-screen width: 100vw
w-auto width: auto
w-fit width: fit-content

Notes:

Includes fixed sizes, fractions, and responsive keywords

Height

Sizing V3 & V4

Controls the height of an element

Syntax:

h-{size} | h-{fraction} | h-{keyword}

Examples:

h-64 height: 16rem
h-1/3 height: 33.333333%
h-full height: 100%
h-screen height: 100vh
h-auto height: auto
h-fit height: fit-content

Notes:

Similar sizing options as width

Min/Max Width

Sizing V3 & V4

Controls minimum and maximum width constraints

Syntax:

min-w-{size} | max-w-{size}

Examples:

min-w-0 min-width: 0px
min-w-full min-width: 100%
max-w-sm max-width: 24rem
max-w-prose max-width: 65ch
max-w-none max-width: none

Notes:

Useful for responsive design and content constraints

Font Family

Typography V3 & V4

Controls the font family of text

Syntax:

font-{family}

Examples:

font-sans System sans-serif font stack
font-serif System serif font stack
font-mono System monospace font stack

Notes:

Can be customized in tailwind.config.js

Font Size

Typography V3 & V4

Controls the size of text

Syntax:

text-{size}

Examples:

text-xs font-size: 0.75rem; line-height: 1rem
text-sm font-size: 0.875rem; line-height: 1.25rem
text-base font-size: 1rem; line-height: 1.5rem
text-lg font-size: 1.125rem; line-height: 1.75rem
text-xl font-size: 1.25rem; line-height: 1.75rem
text-6xl font-size: 3.75rem; line-height: 1

Notes:

Also sets appropriate line-height for each size

Font Weight

Typography V3 & V4

Controls the weight (boldness) of text

Syntax:

font-{weight}

Examples:

font-thin font-weight: 100
font-light font-weight: 300
font-normal font-weight: 400
font-medium font-weight: 500
font-semibold font-weight: 600
font-bold font-weight: 700
font-black font-weight: 900

Notes:

Not all weights are available for every font

Text Align

Typography V3 & V4

Controls text alignment

Syntax:

text-{alignment}

Examples:

text-left text-align: left
text-center text-align: center
text-right text-align: right
text-justify text-align: justify
text-start text-align: start
text-end text-align: end

Notes:

text-start and text-end respect text direction (RTL/LTR)

Line Height

Typography V3 & V4

Controls the line height of text

Syntax:

leading-{size}

Examples:

leading-3 line-height: 0.75rem
leading-normal line-height: 1.5
leading-relaxed line-height: 1.625
leading-loose line-height: 2
leading-none line-height: 1

Notes:

Can use numeric values or named sizes

Text Color

Colors V3 & V4

Controls the color of text

Syntax:

text-{color}-{shade}

Examples:

text-black color: #000000
text-white color: #ffffff
text-gray-500 color: #6b7280
text-red-600 color: #dc2626
text-blue-500 color: #3b82f6
text-green-400 color: #4ade80

Notes:

Color shades range from 50 (lightest) to 950 (darkest)

Background Color

Colors V3 & V4

Controls the background color of an element

Syntax:

bg-{color}-{shade}

Examples:

bg-transparent background-color: transparent
bg-white background-color: #ffffff
bg-gray-100 background-color: #f3f4f6
bg-blue-500 background-color: #3b82f6
bg-red-50 background-color: #fef2f2

Notes:

Same color palette as text colors

Border Color

Colors V3 & V4

Controls the color of borders

Syntax:

border-{color}-{shade}

Examples:

border-transparent border-color: transparent
border-gray-300 border-color: #d1d5db
border-blue-500 border-color: #3b82f6
border-red-400 border-color: #f87171

Notes:

Must be used with border width utility

Background Size

Backgrounds V3 & V4

Controls the size of background images

Syntax:

bg-{size}

Examples:

bg-auto background-size: auto
bg-cover background-size: cover
bg-contain background-size: contain

Notes:

bg-cover is most commonly used for full coverage

Background Position

Backgrounds V3 & V4

Controls the position of background images

Syntax:

bg-{position}

Examples:

bg-center background-position: center
bg-top background-position: top
bg-bottom background-position: bottom
bg-left background-position: left
bg-right background-position: right
bg-left-top background-position: left top

Notes:

Can combine positions like bg-left-top

Background Repeat

Backgrounds V3 & V4

Controls repetition of background images

Syntax:

bg-{repeat}

Examples:

bg-repeat background-repeat: repeat
bg-no-repeat background-repeat: no-repeat
bg-repeat-x background-repeat: repeat-x
bg-repeat-y background-repeat: repeat-y

Notes:

bg-no-repeat is commonly used with bg-cover

Border Width

Borders V3 & V4

Controls border width

Syntax:

border-{width} | border-{side}-{width}

Examples:

border border-width: 1px (all sides)
border-2 border-width: 2px (all sides)
border-t border-top-width: 1px
border-r-4 border-right-width: 4px
border-0 border-width: 0px

Notes:

Default border width is 1px when using 'border'

Border Style

Borders V3 & V4

Controls border style

Syntax:

border-{style}

Examples:

border-solid border-style: solid
border-dashed border-style: dashed
border-dotted border-style: dotted
border-double border-style: double
border-none border-style: none

Notes:

border-solid is the default style

Border Radius

Borders V3 & V4

Controls border radius (rounded corners)

Syntax:

rounded-{size} | rounded-{corner}-{size}

Examples:

rounded border-radius: 0.25rem
rounded-md border-radius: 0.375rem
rounded-lg border-radius: 0.5rem
rounded-full border-radius: 9999px
rounded-t-lg border-top-left-radius: 0.5rem; border-top-right-radius: 0.5rem
rounded-none border-radius: 0px

Notes:

rounded-full creates perfect circles for square elements

Box Shadow

Effects V3 & V4

Controls box shadow of an element

Syntax:

shadow-{size}

Examples:

shadow-sm Small shadow
shadow Default shadow
shadow-md Medium shadow
shadow-lg Large shadow
shadow-xl Extra large shadow
shadow-none No shadow
shadow-inner Inner shadow

Notes:

Shadows add depth and elevation to elements

Opacity

Effects V3 & V4

Controls opacity of an element

Syntax:

opacity-{value}

Examples:

opacity-0 opacity: 0 (invisible)
opacity-25 opacity: 0.25
opacity-50 opacity: 0.5
opacity-75 opacity: 0.75
opacity-100 opacity: 1 (fully visible)

Notes:

Opacity affects the entire element including children

Scale

Transforms V3 & V4

Controls scaling transformation

Syntax:

scale-{value} | scale-x-{value} | scale-y-{value}

Examples:

scale-50 transform: scale(0.5)
scale-100 transform: scale(1) (default)
scale-125 transform: scale(1.25)
scale-x-150 transform: scaleX(1.5)
scale-y-75 transform: scaleY(0.75)

Notes:

Values are percentages: 100 = 100% = normal size

Rotate

Transforms V3 & V4

Controls rotation transformation

Syntax:

rotate-{degrees}

Examples:

rotate-0 transform: rotate(0deg)
rotate-45 transform: rotate(45deg)
rotate-90 transform: rotate(90deg)
rotate-180 transform: rotate(180deg)
-rotate-12 transform: rotate(-12deg)

Notes:

Use negative values with dash prefix for counter-clockwise rotation

Translate

Transforms V3 & V4

Controls translation (movement) transformation

Syntax:

translate-x-{value} | translate-y-{value}

Examples:

translate-x-4 transform: translateX(1rem)
translate-y-8 transform: translateY(2rem)
-translate-x-2 transform: translateX(-0.5rem)
translate-x-1/2 transform: translateX(50%)

Notes:

Useful for positioning and animations

Transition Property

Transitions V3 & V4

Controls which CSS properties transition

Syntax:

transition-{property}

Examples:

transition Transition common properties
transition-all Transition all properties
transition-colors Transition color properties
transition-opacity Transition opacity
transition-transform Transition transforms
transition-none No transitions

Notes:

Use with duration and timing utilities for smooth animations

Transition Duration

Transitions V3 & V4

Controls transition duration

Syntax:

duration-{time}

Examples:

duration-75 transition-duration: 75ms
duration-150 transition-duration: 150ms
duration-300 transition-duration: 300ms
duration-500 transition-duration: 500ms
duration-1000 transition-duration: 1000ms

Notes:

300ms is a good default for most transitions

Transition Timing

Transitions V3 & V4

Controls transition timing function

Syntax:

ease-{function}

Examples:

ease-linear transition-timing-function: linear
ease-in transition-timing-function: ease-in
ease-out transition-timing-function: ease-out
ease-in-out transition-timing-function: ease-in-out

Notes:

ease-in-out provides the most natural feeling transitions

Responsive Breakpoints

Responsive V3 & V4

Apply utilities at specific screen sizes

Syntax:

sm: | md: | lg: | xl: | 2xl:

Examples:

sm:text-lg Large text on small screens and up
md:flex Flex display on medium screens and up
lg:w-1/2 Half width on large screens and up
xl:px-8 Extra padding on extra large screens
2xl:max-w-6xl Max width on 2xl screens and up

Notes:

Breakpoints: sm(640px), md(768px), lg(1024px), xl(1280px), 2xl(1536px)

CSS Variables

V4 Features V4

Direct CSS variable support in V4

Syntax:

var(--{name})

Examples:

text-[var(--primary)] Use CSS variable for text color
bg-[var(--surface)] Use CSS variable for background
border-[var(--accent)] Use CSS variable for border color

Notes:

V4 has enhanced CSS variable integration

Enhanced Arbitrary Values

V4 Features V4

Improved arbitrary value support in V4

Syntax:

[value]

Examples:

text-[#1da1f2] Custom hex color
text-[length:theme(fontSize.lg)] Theme value reference
bg-[color:color-mix(in_srgb,theme(colors.blue.500)_50%,transparent)] CSS color-mix function

Notes:

V4 provides more powerful arbitrary value syntax

Container Queries

V4 Features V4

Native container query support in V4

Syntax:

@{size}:

Examples:

@sm:text-lg Apply when container is small or larger
@md:grid-cols-2 2 columns when container is medium
@lg:p-8 More padding in large containers

Notes:

Container queries allow responsive design based on container size, not viewport

Modern CSS Features

V4 Features V4

V4 includes modern CSS features out of the box

Syntax:

Various new utilities

Examples:

bg-gradient-to-r CSS gradients with better syntax
backdrop-blur-sm Backdrop filter support
supports-grid:grid CSS @supports queries
motion-reduce:animate-none Respect user motion preferences

Notes:

V4 embraces modern CSS features and better browser support

Hover States

Interactive V3 & V4

Apply styles on hover

Syntax:

hover:{utility}

Examples:

hover:bg-blue-500 Blue background on hover
hover:text-white White text on hover
hover:scale-105 Slightly scale up on hover
hover:shadow-lg Larger shadow on hover

Notes:

Essential for interactive elements like buttons and links

Focus States

Interactive V3 & V4

Apply styles when element is focused

Syntax:

focus:{utility}

Examples:

focus:outline-none Remove default focus outline
focus:ring-2 Add focus ring
focus:ring-blue-500 Blue focus ring color
focus:border-blue-500 Blue border on focus

Notes:

Important for accessibility and keyboard navigation

Active States

Interactive V3 & V4

Apply styles when element is being pressed/clicked

Syntax:

active:{utility}

Examples:

active:bg-blue-700 Darker background when pressed
active:scale-95 Slightly scale down when pressed
active:transform Enable transforms for active state

Notes:

Provides immediate feedback when users interact with elements

Pro Tailwind Tips

Related Resources

Explore the complete Tailwind Colors Palette

Essential Patterns

  1. flex items-center justify-center - Perfect centering
  2. grid grid-cols-1 md:grid-cols-2 - Responsive grid
  3. max-w-4xl mx-auto - Centered container
  4. space-y-4 - Consistent vertical spacing
  5. transition-all duration-300 - Smooth animations
  6. focus:ring-2 focus:ring-blue-500 - Accessible focus

Best Practices

  • Use semantic color names (primary, secondary) in config
  • Leverage responsive prefixes: sm:, md:, lg:
  • Group related utilities together for readability
  • Use arbitrary values sparingly: [14px]
  • Create component classes for repeated patterns
  • Test dark mode with dark: variants

V3 vs V4 Key Differences

  • • V4: Enhanced CSS variable support
  • • V4: Native container queries (@sm:, @md:)
  • • V4: Better arbitrary value syntax
  • • V4: Modern CSS features built-in
  • • V4: Smaller bundle sizes

Common Component Pattern

/* Button Component */
class="px-4 py-2 bg-blue-500
text-white font-medium
rounded-lg shadow-sm
hover:bg-blue-600
focus:ring-2 focus:ring-blue-500
transition-colors duration-200"

Version Compatibility

FeatureTailwind V3Tailwind V4
Core Utilities
Container Queries
Enhanced CSS Variables
Modern CSS Features
Fully Supported Partial/Plugin Required Not Available