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.

📚 Practice what you've learned with our Tailwind CSS Flashcards

46 utility groups found

Filter by category:

Display

Layout V3 & V4

Controls the display type of an element

Syntax:

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:

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

🎨 What is Tailwind CSS?

Tailwind CSS is a utility-first CSS framework created by Adam Wathan in 2017. Unlike traditional CSS frameworks that provide pre-designed components (like Bootstrap), Tailwind provides low-level utility classes that let you build custom designs directly in your HTML. With over 3 million weekly downloads on npm, Tailwind has revolutionized how developers approach CSS, offering unprecedented flexibility and maintainability while dramatically speeding up development.

🚀 Core Philosophy

✓ Utility-first: Small, single-purpose classes for maximum flexibility
✓ Component-agnostic: Build any design without fighting the framework
✓ Responsive by default: Mobile-first responsive design built-in
✓ Highly customizable: Configure every aspect via config files
✓ Developer experience: Autocomplete, IntelliSense, and great tooling
✓ Production-ready: Automatic purging removes unused CSS

💡 Why Choose Tailwind?

• Faster development: Style directly in HTML without switching files
• Consistent design: Predefined scale ensures visual harmony
• Smaller CSS bundles: Only ship the CSS you actually use
• Easy maintenance: No more hunting through CSS files
• Team collaboration: Shared design system through utilities
• Framework agnostic: Works with React, Vue, Angular, vanilla HTML

🎯 Utility-First Approach

Traditional CSS

.btn-primary { background: blue; color: white; padding: 12px 24px; border-radius: 6px; } <button class="btn-primary">Click me</button>

Requires writing custom CSS classes

Tailwind CSS

<button class="bg-blue-500 text-white px-6 py-3 rounded-lg hover:bg-blue-600">Click me</button>

Compose styles using utility classes

🏗️ Tailwind Architecture

🎨 Design Tokens

Colors, spacing, typography scales defined in config

theme: { colors: {...} }

🔧 Utilities

Single-purpose classes generated from tokens

text-blue-500

📱 Responsive

Breakpoint prefixes for responsive design

md:text-lg

🌙 Variants

State and context modifiers

hover:bg-blue-600

🌟 Key Features

Responsive Design

• Mobile-first breakpoints
• sm: md: lg: xl: prefixes
• Container queries (V4)
• Arbitrary breakpoints

Dark Mode

• Built-in dark mode support
• dark: prefix for variants
• System preference detection
• Manual toggle support

State Variants

• hover: focus: active:
• first: last: odd: even:
• group-hover: peer-focus:
• Custom variant creation

📦 Tailwind Ecosystem

Core Tools

• Tailwind CLI: Standalone build tool
• PostCSS Plugin: Integration with build systems
• JIT Compiler: Just-in-time CSS generation
• Play CDN: Quick prototyping without build step
• Tailwind UI: Official component library

Editor Support

• IntelliSense: VS Code extension with autocomplete
• Class sorting: Prettier plugin for consistent order
• Syntax highlighting: Better readability
• Linting: Catch errors and inconsistencies
• Fold/unfold: Manage long class lists

🚀 Getting Started with Tailwind

1. Installation

npm install -D tailwindcss • Initialize config: npx tailwindcss init

2. Configuration

Set up content paths • Configure theme customizations • Add plugins and variants as needed

3. Build Process

Include Tailwind directives • Set up build command • Configure purging for production

4. Start Building

Learn utility classes • Practice with components • Explore responsive design patterns

⚖️ Tailwind vs. Other Frameworks

Tailwind Advantages

• No opinionated design decisions
• Tiny production CSS bundles
• Rapid prototyping and iteration
• Consistent design systems
• No naming conventions to learn
• Framework/library agnostic

Popular Alternatives

• Bootstrap: Component-based, faster for prototypes
• Bulma: Modern CSS flexbox framework
• Chakra UI: React component library with design system
• Material-UI: Google's Material Design implementation
• CSS-in-JS: Runtime styling solutions (Styled Components)

🏗️ Tailwind Best Practices

Component Extraction

• Extract common patterns into components
• Use @apply for repeated utility combinations
• Create design system components
• Balance utility-first with component abstraction

Development Workflow

• Start with utilities, extract components later
• Use editor extensions for productivity
• Configure purging for optimal bundle size
• Test across breakpoints and themes

Tailwind Philosophy: "It's easier to achieve a good design when you're limited to a set of constraints than when you can do literally anything." Embrace the utility-first approach and watch your CSS become more maintainable and your designs more consistent! 🎨

Pro Tailwind Tips

Related Resources

Explore the complete Tailwind Colors Palette

Essential Patterns

flex items-center justify-center - Perfect centering
grid grid-cols-1 md:grid-cols-2 - Responsive grid
max-w-4xl mx-auto - Centered container
space-y-4 - Consistent vertical spacing
transition-all duration-300 - Smooth animations
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

Feature	Tailwind V3	Tailwind V4
Core Utilities
Container Queries
Enhanced CSS Variables
Modern CSS Features

Fully Supported Partial/Plugin Required Not Available

Tailwind CSS Cheat Sheet

Display

Syntax:

Examples:

Notes:

Position

Syntax:

Examples:

Notes:

Top / Right / Bottom / Left

Syntax:

Examples:

Notes:

Z-Index

Syntax:

Examples:

Notes:

Flex Direction

Syntax:

Examples:

Notes:

Flex Wrap

Syntax:

Examples:

Notes:

Justify Content

Syntax:

Examples:

Notes:

Align Items

Syntax:

Examples:

Notes:

Grid Template Columns/Rows

Syntax:

Examples:

Notes:

Column Span

Syntax:

Examples:

Notes:

Margin

Syntax:

Examples:

Notes:

Padding

Syntax:

Examples:

Notes:

Space Between

Syntax:

Examples:

Notes:

Width

Syntax:

Examples:

Notes:

Height

Syntax:

Examples:

Notes:

Min/Max Width

Syntax:

Examples:

Notes:

Font Family

Syntax:

Examples:

Notes:

Font Size

Syntax:

Examples:

Notes:

Font Weight

Syntax:

Examples:

Notes:

Text Align

Syntax:

Examples: