Instant CSS

Tailwind CSS Cheat Sheet

A quick reference guide for common Tailwind CSS utility classes.

Layout

Container

container mx-auto px-4

Display

block | flex | grid | hidden

Position

relative | absolute | fixed | sticky

Z-Index

z-0 | z-10 | z-50

Flexbox

Flex Row/Col

flex-row | flex-col

Justify

justify-start | justify-center | justify-between

Align

items-start | items-center | items-stretch

Gap

gap-4 | gap-x-2 | gap-y-4

Spacing

Padding

p-4 | px-4 | py-2 | pt-0

Margin

m-4 | mx-auto | my-2 | mb-8

Space Between

space-x-4 | space-y-4

Typography

Font Size

text-sm | text-lg | text-xl | text-4xl

Font Weight

font-light | font-medium | font-bold

Text Color

text-blue-500 | text-slate-900

Text Align

text-left | text-center | text-right

Colors

Background

bg-white | bg-slate-900 | bg-blue-500

Gradient

bg-gradient-to-r from-blue-500 to-cyan-500

Border

border-slate-200 | border-blue-500

Effects

Shadow

shadow-sm | shadow-md | shadow-xl

Opacity

opacity-50 | opacity-100

Blur

blur-sm | blur-lg