block inline inline-block
flex inline-flex
grid inline-grid
table inline-table table-cell table-row
contents list-item
hidden
container
static fixed absolute relative sticky
inset-0 inset-x-0 inset-y-0
top-0 right-0 bottom-0 left-0
inset-1 inset-2 inset-4 inset-8 inset-16 inset-32 inset-64
inset-auto inset-px
inset-1/2 inset-1/3 inset-2/3 inset-1/4 inset-3/4 inset-full
-inset-1 -inset-2 ... (negative values)
visible invisible
z-0 z-10 z-20 z-30 z-40 z-50 z-auto
-z-10 -z-20 ... (negative values)
overflow-auto overflow-hidden overflow-visible overflow-scroll
overflow-x-auto overflow-y-auto
overflow-x-hidden overflow-y-hidden
overflow-x-scroll overflow-y-scroll
overscroll-auto overscroll-contain overscroll-none
overscroll-x-auto overscroll-y-auto
flex-row flex-row-reverse
flex-col flex-col-reverse
flex-wrap flex-wrap-reverse flex-nowrap
flex-1 flex-auto flex-initial flex-none
grow grow-0
shrink shrink-0
order-1 order-2 ... order-12
order-first order-last order-none
justify-start justify-end justify-center
justify-between justify-around justify-evenly
justify-items-start justify-items-end justify-items-center justify-items-stretch
justify-self-auto justify-self-start justify-self-end justify-self-center justify-self-stretch
content-center content-start content-end
content-between content-around content-evenly
items-start items-end items-center items-baseline items-stretch
self-auto self-start self-end self-center self-stretch self-baseline
place-content-center place-content-start place-content-end
place-content-between place-content-around place-content-evenly place-content-stretch
place-items-start place-items-end place-items-center place-items-stretch
place-self-auto place-self-start place-self-end place-self-center place-self-stretch
grid-cols-1 grid-cols-2 ... grid-cols-12
grid-cols-none
col-auto
col-span-1 col-span-2 ... col-span-12 col-span-full
col-start-1 col-start-2 ... col-start-13 col-start-auto
col-end-1 col-end-2 ... col-end-13 col-end-auto
grid-rows-1 grid-rows-2 ... grid-rows-6
grid-rows-none
row-auto
row-span-1 row-span-2 ... row-span-6 row-span-full
row-start-1 row-start-2 ... row-start-7 row-start-auto
row-end-1 row-end-2 ... row-end-7 row-end-auto
grid-flow-row grid-flow-col
grid-flow-row-dense grid-flow-col-dense
auto-cols-auto auto-cols-min auto-cols-max auto-cols-fr
auto-rows-auto auto-rows-min auto-rows-max auto-rows-fr
gap-0 gap-px gap-0.5 gap-1 gap-2 gap-4 gap-8 gap-16 gap-32 gap-64
gap-x-0 gap-x-1 ... gap-x-64
gap-y-0 gap-y-1 ... gap-y-64
p-0 p-px p-0.5 p-1 p-2 p-4 p-8 p-16 p-32 p-64 p-96
pt-0 pr-0 pb-0 pl-0 (and all values above)
px-0 py-0 (and all values above)
m-0 m-px m-0.5 m-1 m-2 m-4 m-8 m-16 m-32 m-64 m-96 m-auto
mt-0 mr-0 mb-0 ml-0 (and all values above)
mx-0 my-0 mx-auto my-auto (and all values above)
-m-1 -m-2 ... (negative margins)
space-x-0 space-x-1 ... space-x-96 space-x-reverse
space-y-0 space-y-1 ... space-y-96 space-y-reverse
w-0 w-px w-0.5 w-1 w-2 w-4 w-8 w-16 w-32 w-64 w-96
w-auto w-1/2 w-1/3 w-2/3 w-1/4 w-3/4 w-1/5 w-2/5 w-3/5 w-4/5
w-1/6 w-5/6 w-1/12 w-11/12
w-full w-screen w-min w-max w-fit
min-w-0 min-w-full min-w-min min-w-max min-w-fit
max-w-0 max-w-none max-w-xs max-w-sm max-w-md max-w-lg max-w-xl
max-w-2xl max-w-3xl max-w-4xl max-w-5xl max-w-6xl max-w-7xl
max-w-full max-w-min max-w-max max-w-fit
max-w-prose max-w-screen-sm max-w-screen-md max-w-screen-lg max-w-screen-xl max-w-screen-2xl
h-0 h-px h-0.5 h-1 h-2 h-4 h-8 h-16 h-32 h-64 h-96
h-auto h-1/2 h-1/3 h-2/3 h-1/4 h-3/4 h-1/5 h-2/5 h-3/5 h-4/5
h-1/6 h-5/6 h-full h-screen h-min h-max h-fit
min-h-0 min-h-full min-h-screen min-h-min min-h-max min-h-fit
max-h-0 max-h-px max-h-full max-h-screen
max-h-min max-h-max max-h-fit
font-sans font-serif font-mono
text-xs text-sm text-base text-lg text-xl
text-2xl text-3xl text-4xl text-5xl text-6xl text-7xl text-8xl text-9xl
antialiased subpixel-antialiased
italic not-italic
font-thin font-extralight font-light font-normal font-medium
font-semibold font-bold font-extrabold font-black
normal-nums ordinal slashed-zero lining-nums oldstyle-nums
proportional-nums tabular-nums diagonal-fractions stacked-fractions
tracking-tighter tracking-tight tracking-normal tracking-wide
tracking-wider tracking-widest
leading-none leading-tight leading-snug leading-normal
leading-relaxed leading-loose
leading-3 leading-4 ... leading-10
list-none list-disc list-decimal
list-inside list-outside
text-left text-center text-right text-justify
text-inherit text-current text-transparent
text-black text-white
text-slate-50 ... text-slate-950
text-gray-50 ... text-gray-950
text-zinc-50 ... text-zinc-950
text-neutral-50 ... text-neutral-950
text-stone-50 ... text-stone-950
text-red-50 ... text-red-950
text-orange-50 ... text-orange-950
text-amber-50 ... text-amber-950
text-yellow-50 ... text-yellow-950
text-lime-50 ... text-lime-950
text-green-50 ... text-green-950
text-emerald-50 ... text-emerald-950
text-teal-50 ... text-teal-950
text-cyan-50 ... text-cyan-950
text-sky-50 ... text-sky-950
text-blue-50 ... text-blue-950
text-indigo-50 ... text-indigo-950
text-violet-50 ... text-violet-950
text-purple-50 ... text-purple-950
text-fuchsia-50 ... text-fuchsia-950
text-pink-50 ... text-pink-950
text-rose-50 ... text-rose-950
underline overline line-through no-underline
decoration-inherit decoration-current decoration-transparent
decoration-black decoration-white
decoration-{color}-{shade} (same as text colors)
decoration-solid decoration-double decoration-dotted decoration-dashed decoration-wavy
decoration-auto decoration-from-font
decoration-0 decoration-1 decoration-2 decoration-4 decoration-8
underline-offset-auto underline-offset-0 underline-offset-1
underline-offset-2 underline-offset-4 underline-offset-8
uppercase lowercase capitalize normal-case
truncate text-ellipsis text-clip
indent-0 indent-px indent-1 ... indent-96
align-baseline align-top align-middle align-bottom
align-text-top align-text-bottom align-sub align-super
whitespace-normal whitespace-nowrap whitespace-pre
whitespace-pre-line whitespace-pre-wrap
break-normal break-words break-all
content-none
bg-fixed bg-local bg-scroll
bg-clip-border bg-clip-padding bg-clip-content bg-clip-text
bg-inherit bg-current bg-transparent
bg-black bg-white
bg-{color}-{shade} (same colors as text)
bg-origin-border bg-origin-padding bg-origin-content
bg-bottom bg-center bg-left bg-left-bottom bg-left-top
bg-right bg-right-bottom bg-right-top bg-top
bg-repeat bg-no-repeat bg-repeat-x bg-repeat-y bg-repeat-round bg-repeat-space
bg-auto bg-cover bg-contain
bg-none
bg-gradient-to-t bg-gradient-to-tr bg-gradient-to-r bg-gradient-to-br
bg-gradient-to-b bg-gradient-to-bl bg-gradient-to-l bg-gradient-to-tl
from-{color}-{shade}
via-{color}-{shade}
to-{color}-{shade}
rounded-none rounded-sm rounded rounded-md rounded-lg rounded-xl
rounded-2xl rounded-3xl rounded-full
rounded-t-{size} rounded-r-{size} rounded-b-{size} rounded-l-{size}
rounded-tl-{size} rounded-tr-{size} rounded-br-{size} rounded-bl-{size}
border border-0 border-2 border-4 border-8
border-x border-y border-t border-r border-b border-l
border-x-0 border-y-0 border-t-0 border-r-0 border-b-0 border-l-0
(same for 2, 4, 8)
border-inherit border-current border-transparent
border-{color}-{shade} (same colors as text)
border-solid border-dashed border-dotted border-double border-none
divide-x divide-x-0 divide-x-2 divide-x-4 divide-x-8 divide-x-reverse
divide-y divide-y-0 divide-y-2 divide-y-4 divide-y-8 divide-y-reverse
divide-{color}-{shade} (same colors as border)
divide-solid divide-dashed divide-dotted divide-double divide-none
outline-0 outline-1 outline-2 outline-4 outline-8
outline-{color}-{shade} (same colors as border)
outline-none outline outline-dashed outline-dotted outline-double
outline-offset-0 outline-offset-1 outline-offset-2 outline-offset-4 outline-offset-8
ring ring-0 ring-1 ring-2 ring-4 ring-8
ring-inset
ring-{color}-{shade} (same colors as border)
ring-offset-0 ring-offset-1 ring-offset-2 ring-offset-4 ring-offset-8
ring-offset-{color}-{shade} (same colors as border)
shadow-sm shadow shadow-md shadow-lg shadow-xl shadow-2xl shadow-inner shadow-none
shadow-{color}-{shade} (same colors as text)
opacity-0 opacity-5 opacity-10 opacity-20 opacity-25 opacity-30
opacity-40 opacity-50 opacity-60 opacity-70 opacity-75 opacity-80
opacity-90 opacity-95 opacity-100
mix-blend-normal mix-blend-multiply mix-blend-screen mix-blend-overlay
mix-blend-darken mix-blend-lighten mix-blend-color-dodge mix-blend-color-burn
mix-blend-hard-light mix-blend-soft-light mix-blend-difference
mix-blend-exclusion mix-blend-hue mix-blend-saturation
mix-blend-color mix-blend-luminosity
bg-blend-normal bg-blend-multiply bg-blend-screen bg-blend-overlay
bg-blend-darken bg-blend-lighten bg-blend-color-dodge bg-blend-color-burn
bg-blend-hard-light bg-blend-soft-light bg-blend-difference
bg-blend-exclusion bg-blend-hue bg-blend-saturation
bg-blend-color bg-blend-luminosity
blur-none blur-sm blur blur-md blur-lg blur-xl blur-2xl blur-3xl
brightness-0 brightness-50 brightness-75 brightness-90 brightness-95
brightness-100 brightness-105 brightness-110 brightness-125 brightness-150 brightness-200
contrast-0 contrast-50 contrast-75 contrast-100 contrast-125 contrast-150 contrast-200
drop-shadow-sm drop-shadow drop-shadow-md drop-shadow-lg
drop-shadow-xl drop-shadow-2xl drop-shadow-none
grayscale-0 grayscale
hue-rotate-0 hue-rotate-15 hue-rotate-30 hue-rotate-60 hue-rotate-90 hue-rotate-180
-hue-rotate-180 -hue-rotate-90 -hue-rotate-60 -hue-rotate-30 -hue-rotate-15
invert-0 invert
saturate-0 saturate-50 saturate-100 saturate-150 saturate-200
sepia-0 sepia
backdrop-blur-none backdrop-blur-sm backdrop-blur backdrop-blur-md
backdrop-blur-lg backdrop-blur-xl backdrop-blur-2xl backdrop-blur-3xl
backdrop-brightness-0 ... backdrop-brightness-200 (same as brightness)
backdrop-contrast-0 ... backdrop-contrast-200 (same as contrast)
backdrop-grayscale-0 backdrop-grayscale
backdrop-hue-rotate-0 ... backdrop-hue-rotate-180 (same as hue-rotate)
backdrop-invert-0 backdrop-invert
backdrop-opacity-0 ... backdrop-opacity-100 (same as opacity)
backdrop-saturate-0 ... backdrop-saturate-200 (same as saturate)
backdrop-sepia-0 backdrop-sepia
transition-none transition-all transition
transition-colors transition-opacity transition-shadow transition-transform
duration-75 duration-100 duration-150 duration-200 duration-300
duration-500 duration-700 duration-1000
ease-linear ease-in ease-out ease-in-out
delay-75 delay-100 delay-150 delay-200 delay-300
delay-500 delay-700 delay-1000
animate-none animate-spin animate-ping animate-pulse animate-bounce
scale-0 scale-50 scale-75 scale-90 scale-95 scale-100
scale-105 scale-110 scale-125 scale-150
scale-x-{value} scale-y-{value}
rotate-0 rotate-1 rotate-2 rotate-3 rotate-6 rotate-12
rotate-45 rotate-90 rotate-180
-rotate-180 -rotate-90 -rotate-45 -rotate-12 -rotate-6 -rotate-3 -rotate-2 -rotate-1
translate-x-0 translate-x-px translate-x-1 ... translate-x-96
translate-x-1/2 translate-x-1/3 translate-x-2/3 translate-x-1/4 translate-x-3/4 translate-x-full
-translate-x-{value} (negative values)
translate-y-{value} (same as translate-x)
skew-x-0 skew-x-1 skew-x-2 skew-x-3 skew-x-6 skew-x-12
-skew-x-12 -skew-x-6 -skew-x-3 -skew-x-2 -skew-x-1
skew-y-{value} (same as skew-x)
origin-center origin-top origin-top-right origin-right origin-bottom-right
origin-bottom origin-bottom-left origin-left origin-top-left
accent-auto accent-{color}-{shade}
appearance-none
cursor-auto cursor-default cursor-pointer cursor-wait cursor-text
cursor-move cursor-help cursor-not-allowed cursor-none
cursor-context-menu cursor-progress cursor-cell cursor-crosshair
cursor-vertical-text cursor-alias cursor-copy cursor-no-drop
cursor-grab cursor-grabbing cursor-all-scroll cursor-col-resize
cursor-row-resize cursor-n-resize cursor-e-resize cursor-s-resize
cursor-w-resize cursor-ne-resize cursor-nw-resize cursor-se-resize cursor-sw-resize
cursor-ew-resize cursor-ns-resize cursor-nesw-resize cursor-nwse-resize
cursor-zoom-in cursor-zoom-out
caret-{color}-{shade} (same colors as text)
pointer-events-none pointer-events-auto
resize-none resize resize-x resize-y
scroll-auto scroll-smooth
scroll-m-0 scroll-m-px scroll-m-1 ... scroll-m-96
scroll-mx-{value} scroll-my-{value} scroll-mt-{value} scroll-mr-{value} scroll-mb-{value} scroll-ml-{value}
scroll-p-0 scroll-p-px scroll-p-1 ... scroll-p-96
scroll-px-{value} scroll-py-{value} scroll-pt-{value} scroll-pr-{value} scroll-pb-{value} scroll-pl-{value}
snap-start snap-end snap-center snap-align-none
snap-normal snap-always
snap-none snap-x snap-y snap-both
snap-mandatory snap-proximity
touch-auto touch-none touch-pan-x touch-pan-left touch-pan-right
touch-pan-y touch-pan-up touch-pan-down touch-pinch-zoom touch-manipulation
select-none select-text select-all select-auto
will-change-auto will-change-scroll will-change-contents will-change-transform
fill-none fill-{color}-{shade}
stroke-none stroke-{color}-{shade}
stroke-0 stroke-1 stroke-2
sr-only not-sr-only
All utilities can be prefixed with breakpoints:
sm: (640px)
md: (768px)
lg: (1024px)
xl: (1280px)
2xl: (1536px)
Example: sm:text-center md:text-left lg:text-right
Pseudo-classes and pseudo-elements:
hover: focus: focus-within: focus-visible: active: visited:
target: first: last: only: odd: even:
first-of-type: last-of-type: only-of-type:
empty: disabled: enabled: checked: indeterminate:
default: required: valid: invalid: in-range: out-of-range:
placeholder-shown: autofill: read-only:
before: after: first-letter: first-line:
marker: selection: file: placeholder:
backdrop:
Example: hover:bg-blue-500 focus:ring-2 disabled:opacity-50
Prefix with dark: when dark mode is enabled:
dark:bg-gray-800 dark:text-white
Use square brackets for custom values:
w-[137px] h-[100vh] top-[117px] bg-[#1da1f2]
text-[14px] leading-[3] m-[3px]
Add ! prefix to make any utility important:
!text-center !bg-red-500
- 50: #f8fafc
- 100: #f1f5f9
- 200: #e2e8f0
- 300: #cbd5e1
- 400: #94a3b8
- 500: #64748b
- 600: #475569
- 700: #334155
- 800: #1e293b
- 900: #0f172a
- 950: #020617
- 50: #f9fafb
- 100: #f3f4f6
- 200: #e5e7eb
- 300: #d1d5db
- 400: #9ca3af
- 500: #6b7280
- 600: #4b5563
- 700: #374151
- 800: #1f2937
- 900: #111827
- 950: #030712
- 50: #fafafa
- 100: #f4f4f5
- 200: #e4e4e7
- 300: #d4d4d8
- 400: #a1a1aa
- 500: #71717a
- 600: #52525b
- 700: #3f3f46
- 800: #27272a
- 900: #18181b
- 950: #09090b
- 50: #fafafa
- 100: #f5f5f5
- 200: #e5e5e5
- 300: #d4d4d4
- 400: #a3a3a3
- 500: #737373
- 600: #525252
- 700: #404040
- 800: #262626
- 900: #171717
- 950: #0a0a0a
- 50: #fafaf9
- 100: #f5f5f4
- 200: #e7e5e4
- 300: #d6d3d1
- 400: #a8a29e
- 500: #78716c
- 600: #57534e
- 700: #44403c
- 800: #292524
- 900: #1c1917
- 950: #0c0a09
- 50: #fef2f2
- 100: #fee2e2
- 200: #fecaca
- 300: #fca5a5
- 400: #f87171
- 500: #ef4444
- 600: #dc2626
- 700: #b91c1c
- 800: #991b1b
- 900: #7f1d1d
- 950: #450a0a
- 50: #fff7ed
- 100: #ffedd5
- 200: #fed7aa
- 300: #fdba74
- 400: #fb923c
- 500: #f97316
- 600: #ea580c
- 700: #c2410c
- 800: #9a3412
- 900: #7c2d12
- 950: #431407
- 50: #fffbeb
- 100: #fef3c7
- 200: #fde68a
- 300: #fcd34d
- 400: #fbbf24
- 500: #f59e0b
- 600: #d97706
- 700: #b45309
- 800: #92400e
- 900: #78350f
- 950: #451a03
- 50: #fefce8
- 100: #fef9c3
- 200: #fef08a
- 300: #fde047
- 400: #facc15
- 500: #eab308
- 600: #ca8a04
- 700: #a16207
- 800: #854d0e
- 900: #713f12
- 950: #422006
- 50: #f7fee7
- 100: #ecfccb
- 200: #d9f99d
- 300: #bef264
- 400: #a3e635
- 500: #84cc16
- 600: #65a30d
- 700: #4d7c0f
- 800: #3f6212
- 900: #365314
- 950: #1a2e05
- 50: #f0fdf4
- 100: #dcfce7
- 200: #bbf7d0
- 300: #86efac
- 400: #4ade80
- 500: #22c55e
- 600: #16a34a
- 700: #15803d
- 800: #166534
- 900: #14532d
- 950: #052e16
- 50: #ecfdf5
- 100: #d1fae5
- 200: #a7f3d0
- 300: #6ee7b7
- 400: #34d399
- 500: #10b981
- 600: #059669
- 700: #047857
- 800: #065f46
- 900: #064e3b
- 950: #022c22
- 50: #f0fdfa
- 100: #ccfbf1
- 200: #99f6e4
- 300: #5eead4
- 400: #2dd4bf
- 500: #14b8a6
- 600: #0d9488
- 700: #0f766e
- 800: #115e59
- 900: #134e4a
- 950: #042f2e
- 50: #ecfeff
- 100: #cffafe
- 200: #a5f3fc
- 300: #67e8f9
- 400: #22d3ee
- 500: #06b6d4
- 600: #0891b2
- 700: #0e7490
- 800: #155e75
- 900: #164e63
- 950: #083344
- 50: #f0f9ff
- 100: #e0f2fe
- 200: #bae6fd
- 300: #7dd3fc
- 400: #38bdf8
- 500: #0ea5e9
- 600: #0284c7
- 700: #0369a1
- 800: #075985
- 900: #0c4a6e
- 950: #082f49
- 50: #eff6ff
- 100: #dbeafe
- 200: #bfdbfe
- 300: #93c5fd
- 400: #60a5fa
- 500: #3b82f6
- 600: #2563eb
- 700: #1d4ed8
- 800: #1e40af
- 900: #1e3a8a
- 950: #172554
- 50: #eef2ff
- 100: #e0e7ff
- 200: #c7d2fe
- 300: #a5b4fc
- 400: #818cf8
- 500: #6366f1
- 600: #4f46e5
- 700: #4338ca
- 800: #3730a3
- 900: #312e81
- 950: #1e1b4b
- 50: #f5f3ff
- 100: #ede9fe
- 200: #ddd6fe
- 300: #c4b5fd
- 400: #a78bfa
- 500: #8b5cf6
- 600: #7c3aed
- 700: #6d28d9
- 800: #5b21b6
- 900: #4c1d95
- 950: #2e1065
- 50: #faf5ff
- 100: #f3e8ff
- 200: #e9d5ff
- 300: #d8b4fe
- 400: #c084fc
- 500: #a855f7
- 600: #9333ea
- 700: #7e22ce
- 800: #6b21a8
- 900: #581c87
- 950: #3b0764
- 50: #fdf4ff
- 100: #fae8ff
- 200: #f5d0fe
- 300: #f0abfc
- 400: #e879f9
- 500: #d946ef
- 600: #c026d3
- 700: #a21caf
- 800: #86198f
- 900: #701a75
- 950: #4a044e
- 50: #fdf2f8
- 100: #fce7f3
- 200: #fbcfe8
- 300: #f9a8d4
- 400: #f472b6
- 500: #ec4899
- 600: #db2777
- 700: #be185d
- 800: #9d174d
- 900: #831843
- 950: #500724
- 50: #fff1f2
- 100: #ffe4e6
- 200: #fecdd3
- 300: #fda4af
- 400: #fb7185
- 500: #f43f5e
- 600: #e11d48
- 700: #be123c
- 800: #9f1239
- 900: #881337
- 950: #4c0519
Use these colors with utility classes:
- Text:
text-blue-500 - Background:
bg-green-600 - Border:
border-red-400 - Ring:
ring-purple-300 - Divide:
divide-gray-200 - Placeholder:
placeholder-slate-400
Each color scale ranges from 50 (lightest) to 950 (darkest).