New

Tailwind CSS Cheatsheet

Runs in browser

Search and browse common Tailwind CSS utility classes with CSS equivalents and live previews. Filter by category and copy class names instantly.

Tailwind CSS Cheatsheet tool

161 classes

  • flex

    display: flex;

  • flex-col

    flex-direction: column;

  • flex-row

    flex-direction: row;

  • grid

    display: grid;

  • grid-cols-2

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

  • grid-cols-3

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

  • grid-cols-4

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

  • hidden

    display: none;

    (element hidden)
  • block

    display: block;

  • inline-flex

    display: inline-flex;

  • items-center

    align-items: center;

  • items-start

    align-items: flex-start;

  • justify-between

    justify-content: space-between;

  • justify-center

    justify-content: center;

  • gap-1

    gap: 0.25rem;

  • gap-2

    gap: 0.5rem;

  • gap-3

    gap: 0.75rem;

  • gap-4

    gap: 1rem;

  • gap-5

    gap: 1.25rem;

  • gap-6

    gap: 1.5rem;

  • gap-8

    gap: 2rem;

  • flex-wrap

    flex-wrap: wrap;

  • flex-1

    flex: 1 1 0%;

  • shrink-0

    flex-shrink: 0;

  • overflow-hidden

    overflow: hidden;

  • overflow-auto

    overflow: auto;

  • overflow-y-auto

    overflow-y: auto;

  • relative

    position: relative;

  • absolute

    position: absolute;

  • fixed

    position: fixed;

  • sticky

    position: sticky;

  • z-10

    z-index: 10;

  • z-50

    z-index: 50;

  • p-1

    padding: 0.25rem;

  • p-2

    padding: 0.5rem;

  • p-3

    padding: 0.75rem;

  • p-4

    padding: 1rem;

  • p-5

    padding: 1.25rem;

  • p-6

    padding: 1.5rem;

  • p-8

    padding: 2rem;

  • px-4

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

  • py-2

    padding-top: 0.5rem; padding-bottom: 0.5rem;

  • m-1

    margin: 0.25rem;

  • m-2

    margin: 0.5rem;

  • m-3

    margin: 0.75rem;

  • m-4

    margin: 1rem;

  • m-5

    margin: 1.25rem;

  • m-6

    margin: 1.5rem;

  • m-8

    margin: 2rem;

  • mx-auto

    margin-left: auto; margin-right: auto;

  • mt-4

    margin-top: 1rem;

  • mb-4

    margin-bottom: 1rem;

  • space-x-4

    margin-left: 1rem; (between children)

  • space-y-4

    margin-top: 1rem; (between children)

  • w-full

    width: 100%;

  • w-1/2

    width: 50%;

  • w-screen

    width: 100vw;

  • h-full

    height: 100%;

  • h-screen

    height: 100vh;

  • max-w-sm

    max-width: 24rem;

  • max-w-md

    max-width: 28rem;

  • max-w-lg

    max-width: 32rem;

  • max-w-xl

    max-width: 36rem;

  • max-w-2xl

    max-width: 42rem;

  • max-w-6xl

    max-width: 72rem;

  • min-h-screen

    min-height: 100vh;

  • aspect-square

    aspect-ratio: 1 / 1;

  • text-xs

    font-size: 0.75rem;

    Sample text
  • text-sm

    font-size: 0.875rem;

    Sample text
  • text-base

    font-size: 1rem;

    Sample text
  • text-lg

    font-size: 1.125rem;

    Sample text
  • text-xl

    font-size: 1.25rem;

    Sample text
  • text-2xl

    font-size: 1.5rem;

    Sample text
  • text-3xl

    font-size: 1.875rem;

    Sample text
  • text-4xl

    font-size: 2.25rem;

    Sample text
  • font-normal

    font-weight: 400;

  • font-medium

    font-weight: 500;

  • font-semibold

    font-weight: 600;

  • font-bold

    font-weight: 700;

  • text-left

    text-align: left;

    Sample text
  • text-center

    text-align: center;

    Sample text
  • text-right

    text-align: right;

    Sample text
  • leading-none

    line-height: 1;

  • leading-tight

    line-height: 1.25;

  • leading-normal

    line-height: 1.5;

  • leading-loose

    line-height: 2;

  • tracking-tight

    letter-spacing: -0.025em;

  • tracking-normal

    letter-spacing: 0;

  • tracking-wide

    letter-spacing: 0.025em;

  • uppercase

    text-transform: uppercase;

  • lowercase

    text-transform: lowercase;

  • capitalize

    text-transform: capitalize;

  • truncate

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

  • line-clamp-2

    display: -webkit-box; -webkit-line-clamp: 2;

  • line-clamp-3

    display: -webkit-box; -webkit-line-clamp: 3;

  • bg-slate-50

    background-color: (slate palette 50);

  • bg-slate-100

    background-color: (slate palette 100);

  • bg-slate-200

    background-color: (slate palette 200);

  • bg-slate-300

    background-color: (slate palette 300);

  • bg-slate-400

    background-color: (slate palette 400);

  • bg-slate-500

    background-color: (slate palette 500);

  • bg-slate-600

    background-color: (slate palette 600);

  • bg-slate-700

    background-color: (slate palette 700);

  • bg-slate-800

    background-color: (slate palette 800);

  • bg-slate-900

    background-color: (slate palette 900);

  • bg-blue-500

    background-color: #3b82f6;

  • bg-green-500

    background-color: #22c55e;

  • bg-red-500

    background-color: #ef4444;

  • bg-yellow-500

    background-color: #eab308;

  • bg-purple-500

    background-color: #a855f7;

  • bg-indigo-500

    background-color: #6366f1;

  • bg-white

    background-color: #fff;

  • bg-black

    background-color: #000;

  • bg-transparent

    background-color: transparent;

  • text-slate-50

    color: (slate palette 50);

    Sample text
  • text-slate-100

    color: (slate palette 100);

    Sample text
  • text-slate-200

    color: (slate palette 200);

    Sample text
  • text-slate-300

    color: (slate palette 300);

    Sample text
  • text-slate-400

    color: (slate palette 400);

    Sample text
  • text-slate-500

    color: (slate palette 500);

    Sample text
  • text-slate-600

    color: (slate palette 600);

    Sample text
  • text-slate-700

    color: (slate palette 700);

    Sample text
  • text-slate-800

    color: (slate palette 800);

    Sample text
  • text-slate-900

    color: (slate palette 900);

    Sample text
  • text-white

    color: #fff;

    Sample text
  • text-black

    color: #000;

    Sample text
  • text-blue-500

    color: #3b82f6;

    Sample text
  • text-green-500

    color: #22c55e;

    Sample text
  • text-red-500

    color: #ef4444;

    Sample text
  • text-yellow-500

    color: #eab308;

    Sample text
  • border

    border-width: 1px;

  • border-2

    border-width: 2px;

  • border-slate-200

    border-color: #e2e8f0;

  • border-slate-700

    border-color: #334155;

  • rounded

    border-radius: 0.25rem;

  • rounded-md

    border-radius: 0.375rem;

  • rounded-lg

    border-radius: 0.5rem;

  • rounded-xl

    border-radius: 0.75rem;

  • rounded-full

    border-radius: 9999px;

  • border-none

    border-style: none;

  • shadow-sm

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

  • shadow-md

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

  • shadow-lg

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

  • shadow-xl

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

  • shadow-2xl

    box-shadow: 0 25px 50px -12px rgb(0 0 0 / 0.25);

  • opacity-0

    opacity: 0;

  • opacity-50

    opacity: 0.5;

  • opacity-100

    opacity: 1;

  • blur-sm

    filter: blur(4px);

  • blur-md

    filter: blur(12px);

  • backdrop-blur-sm

    backdrop-filter: blur(4px);

  • backdrop-blur-md

    backdrop-filter: blur(12px);

  • transition-all

    transition-property: all;

  • transition-colors

    transition-property: color, background-color, border-color;

  • duration-150

    transition-duration: 150ms;

  • duration-300

    transition-duration: 300ms;

  • ease-in

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

  • ease-out

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

  • hover:bg-slate-700

    background-color (on :hover);

    Hover me
  • hover:opacity-80

    opacity: 0.8 (on :hover);

    Hover me
  • hover:scale-105

    transform: scale(1.05) (on :hover);

    Hover me

Chain to another tool

Send this output to another tool instantly — no copy-paste needed.

Produce output above to enable chaining.

How to use

  1. Search

    Filter by text (class name or CSS snippet) and narrow with category chips.

  2. Preview

    Each card shows a compact visual when the utility applies to a box or text.

  3. Copy

    Copy a utility name to paste into your className or HTML.

Examples

  • Spacing

    Try searching “p-4” or “gap”.

    Input
    Output
    p-4

Frequently asked questions

Is this every Tailwind class?
No. The cheatsheet lists common utilities (~200) for quick reference.
Does preview use my Tailwind build?
Previews use this site’s Tailwind setup; your project theme may differ slightly.

Related tools

You might find these useful too.