Box alignment

Flex
Direction Justify content Family

Typography
.flex-{row row-inverse} .justify-{ start end center .font-sans

Tailwindcss
.flex-{col col-inverse} between around evenly } .font-serif
.font-mono
Wrap Justify items
.flex-{no-wrap wrap wrap-reverse} .justify—items-{ auto start end Size
.text-{ xs }
Align Items center stretch }
.items-{ stretch } Justify self xs
sm
start .justify—self-{ auto start end base
center lg
Layout

Container end
center stretch }
xl
.container
baseline Align content 2xl
3xl
Box Sizing Align Content
.content-{ start end center 4xl
5xl
.box-border | .box-content between around evenly } 6xl
.content-{ start } 7xl
Display center Align items 8xl
.content-{ start end center 9xl
.block .table end
.inline-block .table-caption between baseline stretch }
Smoothing
.inline .table-row around Align self .antialiased
.flex .table-cell
Align Self .self-{ auto start end .subpixel-antialiased
.inline-flex .table-column-group center stretch }
.self-{ auto }
.hidden .table-footer-group Style
.flow-root .table-header-group
start Place content .italic
center .place—content-{ start end center
.grid .table-row-group .not-italic
end between around evenly stretch }
.inline-grid
stretch Weight
.contents Place items .font-{ thin extralight normal
Justify Content
Float .justify-{ start }
.place—items-{ auto start end medium semibold bold
center stretch } extrabold black. }
.float-{ right left none }
center
Clear end Place self Variant Numeric
.place—self-{ auto start end .normal-nums
.clear-{ left, right, both, none } between
center stretch } .ordinal
around
Object fit .slashed-zero
.object-{ contain, cover, Flex .lining-nums
none, scale-down } .flex-{initial 1 auto none} Padding
Spacing
.oldstyle-nums
Position Flex Grow .p{ t r b l x y }-{ size } .proportional-nums
.bg-{side} .flex-{grow grow-0} .p-{ size } .tabular-nums

Overflow Flex Shrink Margin .diagonal-fractions

.stacked-fractions
.overflow-{type|special} .flex-{shrink shrink-0} .m{ t r b l x y }-{ size }
.overflow-{side}-{type}
Order
.m-{ size } Letter Spacing
type: auto,hidden,scroll,visible .order-{first last none 1…12} Space between .tracking-{ tighter tight normal
special: touch,auto wide wider widest }
.space-{ x y }-{ size }
side: x,y .space-{ x y }-reverse Line Height
Grid

Overscroll Behavior Grid Template Columns .—space-{ x y }-{ size } .leading-{ none tight snug normal
.overscroll-{type} .grid-cols-{1.$12 none} .—space-{ x y }-reverse relaxed loose 3…10 }
.overscroll-{side}-{type} Grid Column Start / End List Style Type
Sizing

type: auto contain none .col-auto Width / Height .list-{ none disc decimal }
side: x,y .col-span-{1…12 full} .w-{ size | portions }
List Style Position
Position .col-start-{1…13 auto} .h-{ size | portions }
.list-{ inside outside }
.col-end-{1…13 auto}
portions

.static 1/2
.fixed Grid Template Rows 1/3 2/3 Placeholder Color
.placeholder-{color}
.absolute .col-rows-{1…6 none} 1/4 2/4 3/4
.relative
Grid Row Start / End
1/5 2/5 2/5 4/5 Placeholder Opacity
.sticky 1/6 2/6 3/6 4/6 5/6 .placeholder-{ 0 5 10 20 25 30 40 50
.row-auto
1…11/12
Top / Right .row-span-{1…6 full}
60 70 75 80 90 95 100 }
auto px full screen min max
Bottom / Left .row-start-{1…7 auto} Alignment
.{side}-{size} .row-end-{1…7 auto} Min-Width .text-{ left center right justify }
.min-w-{0 full min max}
.—{side}-{size} Grid Auto Flow Color
.{side}—{x y}-{size} .grid-flow-{ row col row-dense Max-Width .text-{color}
.—{side}-{x y}-{size} .max-w-{ size }
col-dense }
z: 0,10,20,30,40,50,auto Text Opacity
size

0 none xs sm md lg xl 2xl 3xl

Grid Auto Columns .text-{ 0 5 10 20 25 30 40 50
Visibility .grid-cols-{auto min max fr}
4xl 5xl 6xl 7xl full min max
60 70 75 80 90 95 100 }
.visible prose screen-{sm sd lg xl 2xl}
Grid Auto Rows Decoration
.invisible
.grid-rows-{auto min max fr}
Min-Height .underline
Z-Index .min-h-{ 0 full screen }
.line-through
Gap
.z-{z}
.gap-{size}
Max-Height .no-underline
z: 0,10,20,30,40,50,auto .max-h-{ full screen }
.gap-{x y}-{size} Transform
.uppercase
screen:
Screen

Vertical Alignment
Typography

Variants .lowercase
Pseudo class

all all
.align-{ baseline top middle .capitalize
responsive focus
text-top text-bottom } .normal-case
sm 640px dark focus-visible
motion-safe active Word Break Text Overflow
md 768px motion-reduce disabled .truncate
.break-normal
first visited .overflow-ellipsis
.break-words
lg 1024px last checked .overflow-clip
.break-all
odd group-hover
xl 1280px even group-focus Whitespace
hover focus-within .whitespace-{ normal nowrap pre
2xl 1536px
pre-line pre-wrap }
 Borders

Transforms
Backgrounds Attachment Radius Transform Sizes
.bg-{ fixed local scroll } .rounded .transform

Clip .rounded-{ sizes } .transform-{ gpu none } 0 0

.bg-clip-{ border padding
.rounded-{ sides }-{ sizes }
Origin px 1
content text }
.rounded-{ sides }
.origin-{
0.5 2
top-left top right-top
1 4
Color : sizes { none sm lg xl 2xl 3xl full } 1.5 6
left center right
.bg-{ current color } : sides { 2 8
left-bottom bottom right-bottom
Opacity tl t tr
}
2.5 10
.bg—opacity-{ 0 5 10 20 25 30 40 50 l r 3 12
60 70 75 80 90 95 100 } bl b br Scale 3.5 14
} .scale-{ scale } 4 16
Position .scale-{ x y }-{ scale } 5 20
.bg-{
Width
.border
scale: 6 24
top-left top right-top { 0 50 75 90 95 100 105 110 125 150 } 7 28
.border-{ width }
left center right 8 32
left-bottom bottom right-bottom
.rounded-{ side }-{ sizes } Rotate
.rounded-{ side } .rotate-{ 0 1 2 3 6 12 45 90 180 } 9 36
} 10 40
.—rotate-{ 0 1 2 3 6 12 45 90 180 }
Repeat : width { 0 2 4 8 } 11 44
.bg-{ repeat no-repeat x y
Translate 12 48
: side {
.translate-{ size prop } 14 56
repeat-round repeat-space } t
.translate-{ x y }-{ size prop } 16 64
Size l r
20 80
b
.bg-{ auto cover contain } prop { 1/2 1/3 2/3 1/4 2/4 3/4 full }
} 24 96
Size Skew 28 112
.bg-none Color .skew-{ x y }-{0 1 2 3 6 12} 32 128
.border-current 36 144
.bg-gradient-to-{ .—skew-{ x y }-{0 1 2 3 6 12}
.border-{ color } 40 160
tl t tr
l r Opacity Divide Style 44 176
bl b br .border—opacity-{ 0 5 10 20 25 .divide-{style} 48 192
} 30 40 50 60 70 solid 52 208
dashed 56 224
Gradient color stops 75 80 90 95 100 }
dotted 60 240
.from-current Style double 64 256
.to-current .border-{style} none 72 288
.via-current solid 80 320
.from-{ color } dashed 96 384
Transition and animation

.via-{ color } dotted

Transition
.transition-{ none all _ colors
.to-{ color } double
opacity shadow transform }
none
Duration
Effects

Box Shadow Divide Width

Color
black
.shadow .duration-{ 75 100 150 200 300
.divide-{ x y } white
.shadow-{md lg xl 2xl inner none} 500 700 1000 }
.divide-{ x y }-{ 0 2 4 8 } gray
Opacity .divide-{ x y }-reverse Timing function red
.ease-{ linear in out in-out } orange
.opacity-{0 25 50 75 100} Divide Color
yellow
.divide-{ color } Delay
green
Border Collapse
Tables

.delay-{ 75 100 150 200 300

Divide Opacity teal
.border-collapse 500 700 1000 }
.divide—opacity-{ 0 5 10 20 25 blue
.border-separate 30 40 50 60 70 Animation indigo
Table layout 75 80 90 95 100 } .animate-{ none spin ping pulse } purple
.table-auto pink
Ring

Interactivity

.table-fixed Ring width Appearance transparent

.ring-{ 0 1 2 4 8 _ inset } .appearance-none
Backgrounds

Attachment Ring Color Cursor

.bg-fixed .ring-{ color } .cursor-{ auto default pointer wait
.bg-local text move help npt-allowed }
.bg-scroll Ring Opacity
.ring—opacity-{ 0 5 10 20 25 30 40 Outline
Color 50 60 70 75 80 90 95 100 } .outline-none
.bg-{color}
Ring Offset Width Pointer Events
Position .ring-offset-{ 0 1 2 4 8 } .pointer-events-{ none auto }
.bg-{side}
Ring Offset Color User Select
Repeat .ring-offset-{ color } .select-{ none text all auto }
.bg-repeat
.bg-no-repeat
SVG

.bg-repeat-x Fill
.bg-repeat-y .fill-current
.bg-repeat-round Stroke
.bg-repeat-space .stroke-current
Size Stroke Width
.bg-auto .stroke-{0 1 2}
.bg-cover
.bg-contain
A11y

Screen readers
.sr-only
.not-sr-only