Tul
z
Image
Video
Document
Utility
Developer
Productivity
Designer
Search…
K
Toggle theme
Tailwind CSS Class Reference
Click any class to copy · 940 classes across 19 categories · v2 · v3 · v4
All versions
v2
(770)
v3
(140)
v4
(30)
940 of 940
All
🗂 Layout
↔ Flexbox
⊞ Grid
↕ Spacing
⤢ Sizing
T Typography
🎨 Colors
□ Borders
◯ Ring
☁ Shadows
🖼 Backgrounds
✨ Filters
⚡ Transitions
⟳ Transform
🖱 Interactive
⊟ Tables
⬟ SVG
♿ Accessibility
📱 Responsive
v2
Tailwind v2 (stable)
v3
New in v3
v4
New in v4
🗂
Layout
80
container
Max-width container centered per breakpoint
block
display: block
inline-block
display: inline-block
inline
display: inline
flex
display: flex
inline-flex
display: inline-flex
grid
display: grid
inline-grid
display: inline-grid
contents
display: contents
list-item
display: list-item
hidden
display: none
table
display: table
table-row
display: table-row
table-cell
display: table-cell
flow-root
display: flow-root
columns-1
v3
columns: 1
columns-2
v3
columns: 2
columns-3
v3
columns: 3
columns-auto
v3
columns: auto
float-left
float: left
float-right
float: right
float-none
float: none
clear-left
clear: left
clear-right
clear: right
clear-both
clear: both
clear-none
clear: none
isolate
v3
isolation: isolate
isolation-auto
v3
isolation: auto
object-contain
object-fit: contain
object-cover
object-fit: cover
object-fill
object-fit: fill
object-none
object-fit: none
object-scale-down
object-fit: scale-down
object-center
object-position: center
object-top
object-position: top
object-bottom
object-position: bottom
overflow-auto
overflow: auto
overflow-hidden
overflow: hidden
overflow-clip
overflow: clip
overflow-visible
overflow: visible
overflow-scroll
overflow: scroll
overflow-x-auto
overflow-x: auto
overflow-y-auto
overflow-y: auto
overflow-x-hidden
overflow-x: hidden
overflow-y-hidden
overflow-y: hidden
overscroll-auto
v3
overscroll-behavior: auto
overscroll-contain
v3
overscroll-behavior: contain
overscroll-none
v3
overscroll-behavior: none
static
position: static
fixed
position: fixed
absolute
position: absolute
relative
position: relative
sticky
position: sticky
inset-0
top/right/bottom/left: 0
inset-x-0
left+right: 0
inset-y-0
top+bottom: 0
top-0
top: 0
right-0
right: 0
bottom-0
bottom: 0
left-0
left: 0
top-auto
top: auto
right-auto
right: auto
bottom-auto
bottom: auto
left-auto
left: auto
z-0
z-index: 0
z-10
z-index: 10
z-20
z-index: 20
z-30
z-index: 30
z-40
z-index: 40
z-50
z-index: 50
z-auto
z-index: auto
visible
visibility: visible
invisible
visibility: hidden
collapse
visibility: collapse
truncate
overflow: hidden; text-overflow: ellipsis; white-space: nowrap
aspect-auto
v3
aspect-ratio: auto
aspect-square
v3
aspect-ratio: 1 / 1
aspect-video
v3
aspect-ratio: 16 / 9
box-border
box-sizing: border-box
box-content
box-sizing: content-box
↔
Flexbox
70
flex-row
flex-direction: row
flex-row-reverse
flex-direction: row-reverse
flex-col
flex-direction: column
flex-col-reverse
flex-direction: column-reverse
flex-wrap
flex-wrap: wrap
flex-wrap-reverse
flex-wrap: wrap-reverse
flex-nowrap
flex-wrap: nowrap
flex-1
flex: 1 1 0%
flex-auto
flex: 1 1 auto
flex-initial
flex: 0 1 auto
flex-none
flex: none
shrink
v3
flex-shrink: 1
shrink-0
v3
flex-shrink: 0
grow
v3
flex-grow: 1
grow-0
v3
flex-grow: 0
basis-0
v3
flex-basis: 0px
basis-auto
v3
flex-basis: auto
basis-full
v3
flex-basis: 100%
basis-1/2
v3
flex-basis: 50%
basis-1/3
v3
flex-basis: 33.333%
basis-1/4
v3
flex-basis: 25%
items-start
align-items: flex-start
items-end
align-items: flex-end
items-center
align-items: center
items-baseline
align-items: baseline
items-stretch
align-items: stretch
justify-start
justify-content: flex-start
justify-end
justify-content: flex-end
justify-center
justify-content: center
justify-between
justify-content: space-between
justify-around
justify-content: space-around
justify-evenly
justify-content: space-evenly
justify-stretch
v3
justify-content: stretch
justify-normal
v3
justify-content: normal
content-start
align-content: flex-start
content-end
align-content: flex-end
content-center
align-content: center
content-between
align-content: space-between
content-around
align-content: space-around
content-evenly
align-content: space-evenly
content-stretch
align-content: stretch
self-auto
align-self: auto
self-start
align-self: flex-start
self-end
align-self: flex-end
self-center
align-self: center
self-stretch
align-self: stretch
self-baseline
align-self: baseline
justify-items-start
justify-items: start
justify-items-end
justify-items: end
justify-items-center
justify-items: center
justify-self-auto
justify-self: auto
justify-self-start
justify-self: start
justify-self-center
justify-self: center
order-first
order: -9999
order-last
order: 9999
order-none
order: 0
order-1
order: 1
order-2
order: 2
gap-0
gap: 0
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
gap-10
gap: 2.5rem
gap-12
gap: 3rem
gap-x-4
column-gap: 1rem
gap-y-4
row-gap: 1rem
⊞
Grid
53
grid-cols-1
grid-template-columns: repeat(1, minmax(0, 1fr))
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))
grid-cols-5
grid-template-columns: repeat(5, minmax(0, 1fr))
grid-cols-6
grid-template-columns: repeat(6, minmax(0, 1fr))
grid-cols-12
grid-template-columns: repeat(12, minmax(0, 1fr))
grid-cols-none
grid-template-columns: none
grid-cols-subgrid
v4
grid-template-columns: subgrid
grid-rows-1
grid-template-rows: repeat(1, minmax(0, 1fr))
grid-rows-2
grid-template-rows: repeat(2, minmax(0, 1fr))
grid-rows-3
grid-template-rows: repeat(3, minmax(0, 1fr))
grid-rows-4
grid-template-rows: repeat(4, minmax(0, 1fr))
grid-rows-6
grid-template-rows: repeat(6, minmax(0, 1fr))
grid-rows-subgrid
v4
grid-template-rows: subgrid
col-auto
grid-column: auto
col-span-1
grid-column: span 1 / span 1
col-span-2
grid-column: span 2 / span 2
col-span-3
grid-column: span 3 / span 3
col-span-4
grid-column: span 4 / span 4
col-span-6
grid-column: span 6 / span 6
col-span-full
grid-column: 1 / -1
col-start-1
grid-column-start: 1
col-start-auto
grid-column-start: auto
col-end-1
grid-column-end: 1
col-end-auto
grid-column-end: auto
row-auto
grid-row: auto
row-span-1
grid-row: span 1 / span 1
row-span-2
grid-row: span 2 / span 2
row-span-full
grid-row: 1 / -1
row-start-1
grid-row-start: 1
row-end-1
grid-row-end: 1
auto-cols-auto
grid-auto-columns: auto
auto-cols-fr
grid-auto-columns: minmax(0, 1fr)
auto-cols-min
grid-auto-columns: min-content
auto-cols-max
grid-auto-columns: max-content
auto-rows-auto
grid-auto-rows: auto
auto-rows-fr
grid-auto-rows: minmax(0, 1fr)
auto-rows-min
grid-auto-rows: min-content
grid-flow-row
grid-auto-flow: row
grid-flow-col
grid-auto-flow: column
grid-flow-dense
grid-auto-flow: dense
place-items-start
place-items: start
place-items-end
place-items: end
place-items-center
place-items: center
place-items-stretch
place-items: stretch
place-content-start
place-content: start
place-content-end
place-content: end
place-content-center
place-content: center
place-content-between
place-content: space-between
place-self-auto
place-self: auto
place-self-start
place-self: start
place-self-center
place-self: center
↕
Spacing
64
p-0
padding: 0
p-px
padding: 1px
p-0.5
padding: 0.125rem
p-1
padding: 0.25rem
p-1.5
padding: 0.375rem
p-2
padding: 0.5rem
p-2.5
padding: 0.625rem
p-3
padding: 0.75rem
p-4
padding: 1rem
p-5
padding: 1.25rem
p-6
padding: 1.5rem
p-7
padding: 1.75rem
p-8
padding: 2rem
p-10
padding: 2.5rem
p-12
padding: 3rem
p-16
padding: 4rem
px-0
padding-left+right: 0
px-2
padding-left+right: 0.5rem
px-4
padding-left+right: 1rem
px-6
padding-left+right: 1.5rem
py-0
padding-top+bottom: 0
py-2
padding-top+bottom: 0.5rem
py-4
padding-top+bottom: 1rem
py-6
padding-top+bottom: 1.5rem
pt-4
padding-top: 1rem
pr-4
padding-right: 1rem
pb-4
padding-bottom: 1rem
pl-4
padding-left: 1rem
ps-4
v3
padding-inline-start: 1rem
pe-4
v3
padding-inline-end: 1rem
m-0
margin: 0
m-px
margin: 1px
m-auto
margin: auto
m-1
margin: 0.25rem
m-2
margin: 0.5rem
m-4
margin: 1rem
m-6
margin: 1.5rem
m-8
margin: 2rem
-m-4
margin: -1rem
mx-auto
margin-left+right: auto
mx-4
margin-left+right: 1rem
my-4
margin-top+bottom: 1rem
mt-0
margin-top: 0
mt-2
margin-top: 0.5rem
mt-4
margin-top: 1rem
mt-6
margin-top: 1.5rem
mt-8
margin-top: 2rem
mr-4
margin-right: 1rem
mb-4
margin-bottom: 1rem
ml-4
margin-left: 1rem
ms-4
v3
margin-inline-start: 1rem
me-4
v3
margin-inline-end: 1rem
space-x-2
Horizontal space between children: 0.5rem
space-x-4
Horizontal space between children: 1rem
space-x-reverse
Reverse horizontal space direction
space-y-2
Vertical space between children: 0.5rem
space-y-4
Vertical space between children: 1rem
space-y-reverse
Reverse vertical space direction
indent-4
v3
text-indent: 1rem
indent-8
v3
text-indent: 2rem
scroll-m-4
v3
scroll-margin: 1rem
scroll-mt-4
v3
scroll-margin-top: 1rem
scroll-px-4
v3
scroll-padding-left+right: 1rem
scroll-py-4
v3
scroll-padding-top+bottom: 1rem
⤢
Sizing
81
w-0
width: 0
w-px
width: 1px
w-1
width: 0.25rem
w-2
width: 0.5rem
w-4
width: 1rem
w-8
width: 2rem
w-12
width: 3rem
w-16
width: 4rem
w-24
width: 6rem
w-32
width: 8rem
w-48
width: 12rem
w-64
width: 16rem
w-1/2
width: 50%
w-1/3
width: 33.333%
w-2/3
width: 66.666%
w-1/4
width: 25%
w-3/4
width: 75%
w-1/5
width: 20%
w-full
width: 100%
w-screen
width: 100vw
w-svw
v4
width: 100svw
w-dvw
v4
width: 100dvw
w-auto
width: auto
w-fit
width: fit-content
w-max
width: max-content
w-min
width: min-content
min-w-0
min-width: 0
min-w-full
min-width: 100%
min-w-min
min-width: min-content
min-w-max
min-width: max-content
max-w-none
max-width: none
max-w-xs
max-width: 20rem
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-3xl
max-width: 48rem
max-w-4xl
max-width: 56rem
max-w-5xl
max-width: 64rem
max-w-6xl
max-width: 72rem
max-w-7xl
max-width: 80rem
max-w-full
max-width: 100%
max-w-screen-sm
max-width: 640px
max-w-screen-md
max-width: 768px
max-w-screen-lg
max-width: 1024px
max-w-screen-xl
max-width: 1280px
h-0
height: 0
h-px
height: 1px
h-4
height: 1rem
h-8
height: 2rem
h-12
height: 3rem
h-16
height: 4rem
h-24
height: 6rem
h-32
height: 8rem
h-48
height: 12rem
h-64
height: 16rem
h-full
height: 100%
h-screen
height: 100vh
h-svh
v3
height: 100svh
h-dvh
v3
height: 100dvh
h-auto
height: auto
h-fit
height: fit-content
min-h-0
min-height: 0
min-h-full
min-height: 100%
min-h-screen
min-height: 100vh
min-h-svh
v3
min-height: 100svh
min-h-dvh
v3
min-height: 100dvh
max-h-full
max-height: 100%
max-h-screen
max-height: 100vh
max-h-none
max-height: none
size-0
v3
width+height: 0
size-px
v3
width+height: 1px
size-1
v3
width+height: 0.25rem
size-4
v3
width+height: 1rem
size-8
v3
width+height: 2rem
size-12
v3
width+height: 3rem
size-16
v3
width+height: 4rem
size-auto
v3
width+height: auto
size-full
v3
width+height: 100%
size-fit
v3
width+height: fit-content
T
Typography
98
font-sans
font-family: ui-sans-serif, system-ui, ...
font-serif
font-family: ui-serif, Georgia, ...
font-mono
font-family: ui-monospace, SFMono-Regular, ...
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-2xl
font-size: 1.5rem / line-height: 2rem
text-3xl
font-size: 1.875rem / line-height: 2.25rem
text-4xl
font-size: 2.25rem / line-height: 2.5rem
text-5xl
font-size: 3rem / line-height: 1
text-6xl
font-size: 3.75rem / line-height: 1
text-7xl
font-size: 4.5rem / line-height: 1
text-8xl
font-size: 6rem / line-height: 1
text-9xl
font-size: 8rem / line-height: 1
font-thin
font-weight: 100
font-extralight
font-weight: 200
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-extrabold
font-weight: 800
font-black
font-weight: 900
italic
font-style: italic
not-italic
font-style: normal
ordinal
v3
font-variant-numeric: ordinal
slashed-zero
v3
font-variant-numeric: slashed-zero
lining-nums
v3
font-variant-numeric: lining-nums
oldstyle-nums
v3
font-variant-numeric: oldstyle-nums
leading-none
line-height: 1
leading-tight
line-height: 1.25
leading-snug
line-height: 1.375
leading-normal
line-height: 1.5
leading-relaxed
line-height: 1.625
leading-loose
line-height: 2
leading-4
line-height: 1rem
leading-6
line-height: 1.5rem
tracking-tighter
letter-spacing: -0.05em
tracking-tight
letter-spacing: -0.025em
tracking-normal
letter-spacing: 0em
tracking-wide
letter-spacing: 0.025em
tracking-wider
letter-spacing: 0.05em
tracking-widest
letter-spacing: 0.1em
text-left
text-align: left
text-center
text-align: center
text-right
text-align: right
text-justify
text-align: justify
text-start
v3
text-align: start
text-end
v3
text-align: end
align-baseline
vertical-align: baseline
align-top
vertical-align: top
align-middle
vertical-align: middle
align-bottom
vertical-align: bottom
uppercase
text-transform: uppercase
lowercase
text-transform: lowercase
capitalize
text-transform: capitalize
normal-case
text-transform: none
underline
text-decoration-line: underline
overline
text-decoration-line: overline
line-through
text-decoration-line: line-through
no-underline
text-decoration-line: none
decoration-solid
v3
text-decoration-style: solid
decoration-dashed
v3
text-decoration-style: dashed
decoration-wavy
v3
text-decoration-style: wavy
decoration-1
v3
text-decoration-thickness: 1px
decoration-2
v3
text-decoration-thickness: 2px
underline-offset-2
v3
text-underline-offset: 2px
underline-offset-4
v3
text-underline-offset: 4px
antialiased
-webkit-font-smoothing: antialiased
subpixel-antialiased
-webkit-font-smoothing: auto
whitespace-normal
white-space: normal
whitespace-nowrap
white-space: nowrap
whitespace-pre
white-space: pre
whitespace-pre-line
white-space: pre-line
whitespace-pre-wrap
white-space: pre-wrap
whitespace-break-spaces
v3
white-space: break-spaces
break-normal
overflow-wrap: normal; word-break: normal
break-words
overflow-wrap: break-word
break-all
word-break: break-all
break-keep
v3
word-break: keep-all
hyphens-none
v3
hyphens: none
hyphens-auto
v3
hyphens: auto
text-wrap
v3
text-wrap: wrap
text-nowrap
v3
text-wrap: nowrap
text-balance
v3
text-wrap: balance
text-pretty
v4
text-wrap: pretty
line-clamp-1
v3
Clamp to 1 line
line-clamp-2
v3
Clamp to 2 lines
line-clamp-3
v3
Clamp to 3 lines
line-clamp-none
v3
Remove line clamp
list-none
list-style-type: none
list-disc
list-style-type: disc
list-decimal
list-style-type: decimal
list-inside
list-style-position: inside
list-outside
list-style-position: outside
content-none
v3
content: none
🎨
Colors
96
text-inherit
color: inherit
text-current
color: currentColor
text-transparent
color: transparent
text-black
color: #000
text-white
color: #fff
text-slate-50
color: #f8fafc
text-slate-500
color: #64748b
text-slate-900
color: #0f172a
text-gray-100
color: #f3f4f6
text-gray-300
color: #d1d5db
text-gray-500
color: #6b7280
text-gray-700
color: #374151
text-gray-900
color: #111827
text-red-400
color: #f87171
text-red-500
color: #ef4444
text-red-600
color: #dc2626
text-orange-500
color: #f97316
text-amber-400
color: #fbbf24
text-amber-500
color: #f59e0b
text-yellow-400
color: #facc15
text-yellow-500
color: #eab308
text-lime-500
color: #84cc16
text-green-400
color: #4ade80
text-green-500
color: #22c55e
text-green-600
color: #16a34a
text-emerald-500
color: #10b981
text-teal-500
color: #14b8a6
text-cyan-500
color: #06b6d4
text-sky-500
color: #0ea5e9
text-blue-400
color: #60a5fa
text-blue-500
color: #3b82f6
text-blue-600
color: #2563eb
text-indigo-500
color: #6366f1
text-violet-500
color: #8b5cf6
text-purple-500
color: #a855f7
text-fuchsia-500
color: #d946ef
text-pink-400
color: #f472b6
text-pink-500
color: #ec4899
text-rose-500
color: #f43f5e
bg-inherit
background-color: inherit
bg-transparent
background-color: transparent
bg-black
background-color: #000
bg-white
background-color: #fff
bg-slate-100
background-color: #f1f5f9
bg-slate-800
background-color: #1e293b
bg-slate-900
background-color: #0f172a
bg-gray-50
background-color: #f9fafb
bg-gray-100
background-color: #f3f4f6
bg-gray-200
background-color: #e5e7eb
bg-gray-800
background-color: #1f2937
bg-gray-900
background-color: #111827
bg-red-50
background-color: #fef2f2
bg-red-500
background-color: #ef4444
bg-red-600
background-color: #dc2626
bg-orange-500
background-color: #f97316
bg-amber-400
background-color: #fbbf24
bg-yellow-400
background-color: #facc15
bg-lime-500
background-color: #84cc16
bg-green-50
background-color: #f0fdf4
bg-green-500
background-color: #22c55e
bg-emerald-500
background-color: #10b981
bg-teal-500
background-color: #14b8a6
bg-cyan-500
background-color: #06b6d4
bg-sky-500
background-color: #0ea5e9
bg-blue-50
background-color: #eff6ff
bg-blue-500
background-color: #3b82f6
bg-blue-600
background-color: #2563eb
bg-indigo-500
background-color: #6366f1
bg-violet-500
background-color: #8b5cf6
bg-purple-500
background-color: #a855f7
bg-fuchsia-500
background-color: #d946ef
bg-pink-500
background-color: #ec4899
bg-rose-500
background-color: #f43f5e
opacity-0
opacity: 0
opacity-5
opacity: 0.05
opacity-10
opacity: 0.1
opacity-20
opacity: 0.2
opacity-25
opacity: 0.25
opacity-30
opacity: 0.3
opacity-40
opacity: 0.4
opacity-50
opacity: 0.5
opacity-60
opacity: 0.6
opacity-70
opacity: 0.7
opacity-75
opacity: 0.75
opacity-80
opacity: 0.8
opacity-90
opacity: 0.9
opacity-95
opacity: 0.95
opacity-100
opacity: 1
mix-blend-normal
v3
mix-blend-mode: normal
mix-blend-multiply
v3
mix-blend-mode: multiply
mix-blend-screen
v3
mix-blend-mode: screen
mix-blend-overlay
v3
mix-blend-mode: overlay
mix-blend-darken
v3
mix-blend-mode: darken
mix-blend-lighten
v3
mix-blend-mode: lighten
bg-blend-normal
v3
background-blend-mode: normal
bg-blend-multiply
v3
background-blend-mode: multiply
□
Borders
60
border-0
border-width: 0
border
border-width: 1px
border-2
border-width: 2px
border-4
border-width: 4px
border-8
border-width: 8px
border-t
border-top-width: 1px
border-t-2
border-top-width: 2px
border-r
border-right-width: 1px
border-b
border-bottom-width: 1px
border-b-2
border-bottom-width: 2px
border-l
border-left-width: 1px
border-l-2
border-left-width: 2px
border-x
border-left+right-width: 1px
border-y
border-top+bottom-width: 1px
border-s
v3
border-inline-start-width: 1px
border-e
v3
border-inline-end-width: 1px
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
border-transparent
border-color: transparent
border-black
border-color: #000
border-white
border-color: #fff
border-gray-200
border-color: #e5e7eb
border-gray-300
border-color: #d1d5db
border-slate-200
border-color: #e2e8f0
border-blue-500
border-color: #3b82f6
border-red-500
border-color: #ef4444
border-green-500
border-color: #22c55e
rounded-none
border-radius: 0
rounded-sm
border-radius: 0.125rem
rounded
border-radius: 0.25rem
rounded-md
border-radius: 0.375rem
rounded-lg
border-radius: 0.5rem
rounded-xl
border-radius: 0.75rem
rounded-2xl
border-radius: 1rem
rounded-3xl
border-radius: 1.5rem
rounded-full
border-radius: 9999px
rounded-t-lg
border-top-radius: 0.5rem
rounded-b-lg
border-bottom-radius: 0.5rem
rounded-l-lg
border-left-radius: 0.5rem
rounded-r-lg
border-right-radius: 0.5rem
divide-x
Border between horizontal children
divide-y
Border between vertical children
divide-x-2
2px border between horizontal children
divide-y-2
2px border between vertical children
divide-solid
divide-style: solid
divide-dashed
divide-style: dashed
divide-gray-200
Border color #e5e7eb
divide-gray-300
Border color #d1d5db
outline-none
outline: 2px solid transparent; outline-offset: 2px
outline
outline-style: solid
outline-dashed
outline-style: dashed
outline-dotted
outline-style: dotted
outline-1
outline-width: 1px
outline-2
outline-width: 2px
outline-4
outline-width: 4px
outline-offset-2
outline-offset: 2px
outline-offset-4
outline-offset: 4px
◯
Ring
17
ring-0
v3
box-shadow ring: 0px
ring-1
v3
box-shadow ring: 1px
ring-2
v3
box-shadow ring: 2px
ring
v3
box-shadow ring: 3px
ring-4
v3
box-shadow ring: 4px
ring-8
v3
box-shadow ring: 8px
ring-inset
v3
Apply ring as inset shadow
ring-transparent
v3
ring-color: transparent
ring-black
v3
ring-color: #000
ring-white
v3
ring-color: #fff
ring-blue-500
v3
ring-color: #3b82f6
ring-indigo-500
v3
ring-color: #6366f1
ring-offset-0
v3
ring-offset-width: 0px
ring-offset-1
v3
ring-offset-width: 1px
ring-offset-2
v3
ring-offset-width: 2px
ring-offset-4
v3
ring-offset-width: 4px
ring-offset-white
v3
ring-offset-color: #fff
☁
Shadows
23
shadow-none
box-shadow: none
shadow-sm
box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05)
shadow
box-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1)
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)
shadow-inner
box-shadow: inset 0 2px 4px 0 rgb(0 0 0 / 0.05)
drop-shadow-sm
filter: drop-shadow(0 1px 1px rgb(0 0 0/0.05))
drop-shadow
filter: drop-shadow(0 1px 2px rgb(0 0 0/0.1))
drop-shadow-md
filter: drop-shadow(0 4px 3px rgb(0 0 0/0.07))
drop-shadow-lg
filter: drop-shadow(0 10px 8px rgb(0 0 0/0.04))
drop-shadow-xl
filter: drop-shadow(0 20px 13px rgb(0 0 0/0.03))
drop-shadow-2xl
filter: drop-shadow(0 25px 25px rgb(0 0 0/0.15))
drop-shadow-none
filter: drop-shadow(0 0 #0000)
inset-shadow-sm
v4
box-shadow: inset 0 1px 1px
inset-shadow
v4
box-shadow: inset 0 2px 4px
inset-shadow-md
v4
box-shadow: inset 0 4px 6px
inset-shadow-lg
v4
box-shadow: inset 0 8px 15px
text-shadow-sm
v4
text-shadow: 0 1px 2px
text-shadow
v4
text-shadow: 0 1px 3px
text-shadow-lg
v4
text-shadow: 0 8px 16px
text-shadow-none
v4
text-shadow: none
🖼
Backgrounds
57
bg-fixed
background-attachment: fixed
bg-local
background-attachment: local
bg-scroll
background-attachment: scroll
bg-clip-border
background-clip: border-box
bg-clip-padding
background-clip: padding-box
bg-clip-content
background-clip: content-box
bg-clip-text
background-clip: text
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
bg-auto
background-size: auto
bg-cover
background-size: cover
bg-contain
background-size: contain
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-gradient-to-t
Gradient: bottom to top
bg-gradient-to-tr
Gradient: bottom-left to top-right
bg-gradient-to-r
Gradient: left to right
bg-gradient-to-br
Gradient: top-left to bottom-right
bg-gradient-to-b
Gradient: top to bottom
bg-gradient-to-bl
Gradient: top-right to bottom-left
bg-gradient-to-l
Gradient: right to left
from-transparent
Gradient from: transparent
from-white
Gradient from: white
from-black
Gradient from: black
from-blue-500
Gradient from: #3b82f6
from-purple-500
Gradient from: #a855f7
from-pink-500
Gradient from: #ec4899
via-transparent
Gradient via: transparent
via-white
Gradient via: white
via-blue-500
Gradient via: #3b82f6
via-purple-500
Gradient via: #a855f7
to-transparent
Gradient to: transparent
to-white
Gradient to: white
to-blue-500
Gradient to: #3b82f6
to-pink-500
Gradient to: #ec4899
bg-linear-to-r
v4
linear-gradient(to right, ...)
bg-radial
v4
radial-gradient(...)
bg-conic
v4
conic-gradient(...)
backdrop-blur-none
v3
backdrop-filter: blur(0)
backdrop-blur-sm
v3
backdrop-filter: blur(4px)
backdrop-blur
v3
backdrop-filter: blur(8px)
backdrop-blur-md
v3
backdrop-filter: blur(12px)
backdrop-blur-lg
v3
backdrop-filter: blur(16px)
backdrop-blur-xl
v3
backdrop-filter: blur(24px)
backdrop-blur-2xl
v3
backdrop-filter: blur(40px)
backdrop-brightness-50
v3
backdrop-filter: brightness(0.5)
backdrop-brightness-75
v3
backdrop-filter: brightness(0.75)
backdrop-brightness-90
v3
backdrop-filter: brightness(0.9)
backdrop-brightness-105
v3
backdrop-filter: brightness(1.05)
backdrop-contrast-125
v3
backdrop-filter: contrast(1.25)
backdrop-grayscale
v3
backdrop-filter: grayscale(100%)
backdrop-saturate-150
v3
backdrop-filter: saturate(1.5)
✨
Filters
44
blur-none
filter: blur(0)
blur-sm
filter: blur(4px)
blur
filter: blur(8px)
blur-md
filter: blur(12px)
blur-lg
filter: blur(16px)
blur-xl
filter: blur(24px)
blur-2xl
filter: blur(40px)
blur-3xl
filter: blur(64px)
brightness-0
filter: brightness(0)
brightness-50
filter: brightness(.5)
brightness-75
filter: brightness(.75)
brightness-90
filter: brightness(.9)
brightness-95
filter: brightness(.95)
brightness-100
filter: brightness(1)
brightness-105
filter: brightness(1.05)
brightness-110
filter: brightness(1.1)
brightness-125
filter: brightness(1.25)
brightness-150
filter: brightness(1.5)
brightness-200
filter: brightness(2)
contrast-0
filter: contrast(0)
contrast-50
filter: contrast(.5)
contrast-75
filter: contrast(.75)
contrast-100
filter: contrast(1)
contrast-125
filter: contrast(1.25)
contrast-150
filter: contrast(1.5)
contrast-200
filter: contrast(2)
grayscale-0
filter: grayscale(0)
grayscale
filter: grayscale(100%)
hue-rotate-0
filter: hue-rotate(0deg)
hue-rotate-15
filter: hue-rotate(15deg)
hue-rotate-30
filter: hue-rotate(30deg)
hue-rotate-60
filter: hue-rotate(60deg)
hue-rotate-90
filter: hue-rotate(90deg)
hue-rotate-180
filter: hue-rotate(180deg)
-hue-rotate-30
filter: hue-rotate(-30deg)
invert-0
filter: invert(0)
invert
filter: invert(100%)
saturate-0
filter: saturate(0)
saturate-50
filter: saturate(.5)
saturate-100
filter: saturate(1)
saturate-150
filter: saturate(1.5)
saturate-200
filter: saturate(2)
sepia-0
filter: sepia(0)
sepia
filter: sepia(100%)
⚡
Transitions
30
transition-none
transition-property: none
transition-all
transition-property: all
transition
transition: color, background-color, border-color, ...
transition-colors
transition: color, background-color, border-color, outline-color, ...
transition-opacity
transition-property: opacity
transition-shadow
transition-property: box-shadow
transition-transform
transition-property: transform
duration-0
transition-duration: 0ms
duration-75
transition-duration: 75ms
duration-100
transition-duration: 100ms
duration-150
transition-duration: 150ms
duration-200
transition-duration: 200ms
duration-300
transition-duration: 300ms
duration-500
transition-duration: 500ms
duration-700
transition-duration: 700ms
duration-1000
transition-duration: 1000ms
ease-linear
transition-timing-function: linear
ease-in
transition-timing-function: cubic-bezier(0.4, 0, 1, 1)
ease-out
transition-timing-function: cubic-bezier(0, 0, 0.2, 1)
ease-in-out
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1)
delay-0
transition-delay: 0ms
delay-75
transition-delay: 75ms
delay-150
transition-delay: 150ms
delay-300
transition-delay: 300ms
delay-500
transition-delay: 500ms
animate-none
animation: none
animate-spin
animation: spin 1s linear infinite
animate-ping
animation: ping 1s cubic-bezier(0,0,0.2,1) infinite
animate-pulse
animation: pulse 2s cubic-bezier(0.4,0,0.6,1) infinite
animate-bounce
animation: bounce 1s infinite
⟳
Transform
47
transform-none
transform: none
transform-gpu
Force GPU acceleration
scale-0
transform: scale(0)
scale-50
transform: scale(.5)
scale-75
transform: scale(.75)
scale-90
transform: scale(.9)
scale-95
transform: scale(.95)
scale-100
transform: scale(1)
scale-105
transform: scale(1.05)
scale-110
transform: scale(1.1)
scale-125
transform: scale(1.25)
scale-150
transform: scale(1.5)
scale-x-75
transform: scaleX(0.75)
scale-x-100
transform: scaleX(1)
-scale-x-100
transform: scaleX(-1) — flip horizontal
-scale-y-100
transform: scaleY(-1) — flip vertical
rotate-0
transform: rotate(0deg)
rotate-1
transform: rotate(1deg)
rotate-2
transform: rotate(2deg)
rotate-3
transform: rotate(3deg)
rotate-6
transform: rotate(6deg)
rotate-12
transform: rotate(12deg)
rotate-45
transform: rotate(45deg)
rotate-90
transform: rotate(90deg)
rotate-180
transform: rotate(180deg)
-rotate-45
transform: rotate(-45deg)
-rotate-90
transform: rotate(-90deg)
translate-x-0
transform: translateX(0)
translate-x-1
transform: translateX(0.25rem)
translate-x-4
transform: translateX(1rem)
translate-x-full
transform: translateX(100%)
-translate-x-full
transform: translateX(-100%)
translate-y-0
transform: translateY(0)
translate-y-1
transform: translateY(0.25rem)
-translate-y-1
transform: translateY(-0.25rem)
-translate-y-full
transform: translateY(-100%)
translate-y-full
transform: translateY(100%)
skew-x-0
transform: skewX(0deg)
skew-x-3
transform: skewX(3deg)
skew-x-6
transform: skewX(6deg)
skew-y-3
transform: skewY(3deg)
origin-center
transform-origin: center
origin-top
transform-origin: top
origin-right
transform-origin: right
origin-bottom
transform-origin: bottom
origin-left
transform-origin: left
origin-top-left
transform-origin: top left
🖱
Interactive
62
cursor-auto
cursor: auto
cursor-default
cursor: default
cursor-pointer
cursor: pointer
cursor-wait
cursor: wait
cursor-text
cursor: text
cursor-move
cursor: move
cursor-help
cursor: help
cursor-not-allowed
cursor: not-allowed
cursor-none
cursor: none
cursor-grab
cursor: grab
cursor-grabbing
cursor: grabbing
cursor-zoom-in
cursor: zoom-in
cursor-zoom-out
cursor: zoom-out
cursor-crosshair
cursor: crosshair
cursor-col-resize
cursor: col-resize
cursor-row-resize
cursor: row-resize
select-none
user-select: none
select-text
user-select: text
select-all
user-select: all
select-auto
user-select: auto
pointer-events-none
pointer-events: none
pointer-events-auto
pointer-events: auto
resize
resize: both
resize-none
resize: none
resize-x
resize: horizontal
resize-y
resize: vertical
appearance-none
appearance: none
appearance-auto
v3
appearance: auto
will-change-auto
v3
will-change: auto
will-change-scroll
v3
will-change: scroll-position
will-change-contents
v3
will-change: contents
will-change-transform
v3
will-change: transform
touch-auto
v3
touch-action: auto
touch-none
v3
touch-action: none
touch-pan-x
v3
touch-action: pan-x
touch-pan-y
v3
touch-action: pan-y
touch-manipulation
v3
touch-action: manipulation
scroll-auto
v3
scroll-behavior: auto
scroll-smooth
v3
scroll-behavior: smooth
snap-none
v3
scroll-snap-type: none
snap-x
v3
scroll-snap-type: x
snap-y
v3
scroll-snap-type: y
snap-mandatory
v3
scroll-snap-type: mandatory
snap-start
v3
scroll-snap-align: start
snap-end
v3
scroll-snap-align: end
snap-center
v3
scroll-snap-align: center
focus:outline-none
No outline on focus
focus:ring-2
Ring 2px on focus
hover:opacity-80
80% opacity on hover
hover:scale-105
Scale up 5% on hover
active:scale-95
Scale down 5% on active
disabled:opacity-50
50% opacity when disabled
disabled:cursor-not-allowed
not-allowed cursor when disabled
group-hover:opacity-100
Show on parent group hover
peer-focus:block
Show when sibling input focused
has-[:checked]:bg-blue-50
v4
Style based on descendant state
not-[:disabled]:hover:bg-blue-50
v4
Not-modifier for :not() selector
in-[.alert]:text-sm
v4
In-modifier for ancestor context
starting:opacity-0
v4
starting-style entry animation
field-sizing-content
v4
field-sizing: content (auto-resize textarea)
scheme-light
v4
color-scheme: light
scheme-dark
v4
color-scheme: dark
⊟
Tables
9
table-auto
table-layout: auto
table-fixed
table-layout: fixed
caption-top
caption-side: top
caption-bottom
caption-side: bottom
border-collapse
border-collapse: collapse
border-separate
border-collapse: separate
border-spacing-0
v3
border-spacing: 0
border-spacing-2
v3
border-spacing: 0.5rem
border-spacing-4
v3
border-spacing: 1rem
⬟
SVG
14
fill-none
fill: none
fill-inherit
fill: inherit
fill-current
fill: currentColor
fill-transparent
fill: transparent
fill-blue-500
fill: #3b82f6
fill-white
fill: white
fill-black
fill: black
stroke-none
stroke: none
stroke-current
stroke: currentColor
stroke-white
stroke: white
stroke-blue-500
stroke: #3b82f6
stroke-0
stroke-width: 0
stroke-1
stroke-width: 1
stroke-2
stroke-width: 2
♿
Accessibility
14
sr-only
Visually hidden but accessible to screen readers
not-sr-only
Undo sr-only
forced-color-adjust-auto
v3
forced-color-adjust: auto
forced-color-adjust-none
v3
forced-color-adjust: none
focus-visible:ring-2
Ring on keyboard focus only
motion-safe:animate-spin
Animate only if motion is allowed
motion-reduce:animate-none
Disable animation if prefers-reduce-motion
print:hidden
Hide element when printing
print:block
Show element only when printing
contrast-more:border-2
Increase border in high-contrast mode
dark:bg-gray-900
Style applied in dark mode
dark:text-white
Text white in dark mode
rtl:text-right
v3
RTL direction text alignment
ltr:text-left
v3
LTR direction text alignment
📱
Responsive
21
sm:hidden
Hide on sm+ screens (>=640px)
sm:block
Show on sm+ screens
sm:flex
Flex on sm+ screens
sm:grid
Grid on sm+ screens
sm:grid-cols-2
2 cols on sm+
md:hidden
Hide on md+ screens (>=768px)
md:block
Show on md+ screens
md:flex
Flex on md+ screens
md:grid-cols-3
3 cols on md+
lg:hidden
Hide on lg+ screens (>=1024px)
lg:flex
Flex on lg+ screens
lg:grid-cols-4
4 cols on lg+
xl:max-w-6xl
Max width 72rem on xl+
2xl:text-5xl
Text 3rem on 2xl+
max-sm:flex-col
v4
Flex column below sm (v4)
max-md:hidden
v4
Hide below md (v4)
max-lg:text-sm
v4
Small text below lg (v4)
@sm:grid-cols-2
v4
Container query sm breakpoint
@md:flex-row
v4
Container query md breakpoint
@lg:max-w-xl
v4
Container query lg breakpoint
@container
v4
Mark element as container query container
Feedback