appkiro.com

Other Tools

Tailwind CSS Cheat Sheet

Browse common Tailwind CSS utilities so you can find the right classes faster during daily design and development.

Tailwind CSS Cheat Sheet

Other Tools

Browse common Tailwind CSS utilities so you can find the right classes faster during daily design and development.

Class	CSS
`sm:`e.g. sm:flex	@media (min-width: 640px)
`md:`e.g. md:grid-cols-2	@media (min-width: 768px)
`lg:`e.g. lg:px-8	@media (min-width: 1024px)
`xl:`e.g. xl:max-w-6xl	@media (min-width: 1280px)
`2xl:`e.g. 2xl:text-lg	@media (min-width: 1536px)

Class	CSS
`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
`hidden`	display: none
`contents`	display: contents

Class	CSS
`static`	position: static
`fixed`	position: fixed
`absolute`	position: absolute
`relative`	position: relative
`sticky`	position: sticky
`inset-0`	inset: 0
`inset-x-0`	left: 0; right: 0
`inset-y-0`	top: 0; bottom: 0
`top-0`	top: 0
`right-0`	right: 0
`bottom-0`	bottom: 0
`left-0`	left: 0

Class	CSS
`flex-row`	flex-direction: row
`flex-col`	flex-direction: column
`flex-wrap`	flex-wrap: wrap
`flex-nowrap`	flex-wrap: nowrap
`flex-1`	flex: 1 1 0%
`flex-auto`	flex: 1 1 auto
`flex-none`	flex: none
`grow`	flex-grow: 1
`grow-0`	flex-grow: 0
`shrink`	flex-shrink: 1
`shrink-0`	flex-shrink: 0

Class	CSS
`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-12`	grid-template-columns: repeat(12, minmax(0, 1fr))
`col-span-1`	grid-column: span 1 / span 1
`col-span-2`	grid-column: span 2 / span 2
`col-span-full`	grid-column: 1 / -1
`grid-rows-1`	grid-template-rows: repeat(1, minmax(0, 1fr))
`grid-rows-2`	grid-template-rows: repeat(2, minmax(0, 1fr))

Class	CSS
`justify-start`	justify-content: flex-start
`justify-center`	justify-content: center
`justify-end`	justify-content: flex-end
`justify-between`	justify-content: space-between
`justify-around`	justify-content: space-around
`justify-evenly`	justify-content: space-evenly
`items-start`	align-items: flex-start
`items-center`	align-items: center
`items-end`	align-items: flex-end
`items-baseline`	align-items: baseline
`items-stretch`	align-items: stretch
`self-auto`	align-self: auto
`self-start`	align-self: flex-start
`self-center`	align-self: center
`self-end`	align-self: flex-end

Class	CSS
`p-0`	padding: 0
`p-1`	padding: 0.25rem (4px)
`p-2`	padding: 0.5rem (8px)
`p-4`	padding: 1rem (16px)
`p-6`	padding: 1.5rem (24px)
`p-8`	padding: 2rem (32px)
`px-*`	padding-left & padding-right
`py-*`	padding-top & padding-bottom
`pt/pr/pb/pl-*`	padding-[side]
`m-0`	margin: 0
`m-1`	margin: 0.25rem (4px)
`m-2`	margin: 0.5rem (8px)
`m-4`	margin: 1rem (16px)
`m-auto`	margin: auto
`-m-1`	margin: -0.25rem
`mx-auto`	margin-left: auto; margin-right: auto
`gap-0`	gap: 0
`gap-1`	gap: 0.25rem (4px)
`gap-2`	gap: 0.5rem (8px)
`gap-4`	gap: 1rem (16px)
`gap-x-*`	column-gap
`gap-y-*`	row-gap

Class	CSS
`w-0`	width: 0
`w-1`	width: 0.25rem (4px)
`w-4`	width: 1rem (16px)
`w-full`	width: 100%
`w-screen`	width: 100vw
`w-auto`	width: auto
`w-1/2`	width: 50%
`w-1/3`	width: 33.333%
`w-fit`	width: fit-content
`min-w-0`	min-width: 0
`min-w-full`	min-width: 100%
`max-w-sm`	max-width: 24rem (384px)
`max-w-md`	max-width: 28rem (448px)
`max-w-lg`	max-width: 32rem (512px)
`max-w-xl`	max-width: 36rem (576px)
`max-w-2xl`	max-width: 42rem (672px)
`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
`h-0`	height: 0
`h-4`	height: 1rem (16px)
`h-full`	height: 100%
`h-screen`	height: 100vh
`h-auto`	height: auto
`min-h-0`	min-height: 0
`min-h-full`	min-height: 100%
`min-h-screen`	min-height: 100vh
`size-4`	width: 1rem; height: 1rem
`size-6`	width: 1.5rem; height: 1.5rem
`size-full`	width: 100%; height: 100%

Class	CSS
`text-xs`	font-size: 0.75rem (12px)
`text-sm`	font-size: 0.875rem (14px)
`text-base`	font-size: 1rem (16px)
`text-lg`	font-size: 1.125rem (18px)
`text-xl`	font-size: 1.25rem (20px)
`text-2xl`	font-size: 1.5rem (24px)
`text-3xl`	font-size: 1.875rem (30px)
`text-4xl`	font-size: 2.25rem (36px)
`font-thin`	font-weight: 100
`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-sans`	font-family: ui-sans-serif, system-ui, sans-serif
`font-serif`	font-family: ui-serif, Georgia, serif
`font-mono`	font-family: ui-monospace, monospace
`italic`	font-style: italic
`not-italic`	font-style: normal
`leading-none`	line-height: 1
`leading-tight`	line-height: 1.25
`leading-normal`	line-height: 1.5
`leading-relaxed`	line-height: 1.625
`leading-loose`	line-height: 2
`tracking-tight`	letter-spacing: -0.025em
`tracking-normal`	letter-spacing: 0
`tracking-wide`	letter-spacing: 0.025em

Class	CSS
`text-left`	text-align: left
`text-center`	text-align: center
`text-right`	text-align: right
`text-justify`	text-align: justify
`uppercase`	text-transform: uppercase
`lowercase`	text-transform: lowercase
`capitalize`	text-transform: capitalize
`normal-case`	text-transform: none
`underline`	text-decoration: underline
`line-through`	text-decoration: line-through
`no-underline`	text-decoration: none
`truncate`	overflow: hidden; text-overflow: ellipsis; white-space: nowrap
`text-ellipsis`	text-overflow: ellipsis
`text-clip`	text-overflow: clip
`whitespace-normal`	white-space: normal
`whitespace-nowrap`	white-space: nowrap
`whitespace-pre`	white-space: pre
`break-normal`	word-break: normal
`break-words`	word-break: break-word
`break-all`	word-break: break-all
`line-clamp-1`	-webkit-line-clamp: 1
`line-clamp-2`	-webkit-line-clamp: 2
`line-clamp-3`	-webkit-line-clamp: 3

Class	CSS
`bg-transparent`	background-color: transparent
`bg-current`	background-color: currentColor
`bg-white`	background-color: #fff
`bg-black`	background-color: #000
`bg-slate-500`	background-color: #64748b
`bg-[#hex]`e.g. bg-[#1da1f2]	background-color: #hex
`bg-cover`	background-size: cover
`bg-contain`	background-size: contain
`bg-center`	background-position: center
`bg-no-repeat`	background-repeat: no-repeat
`bg-repeat`	background-repeat: repeat
`bg-fixed`	background-attachment: fixed
`bg-gradient-to-r`	background-image: linear-gradient(to right, ...)
`bg-gradient-to-b`	background-image: linear-gradient(to bottom, ...)
`from-blue-500`	gradient start color
`via-purple-500`	gradient middle color
`to-pink-500`	gradient end color

Class	CSS
`border`	border-width: 1px
`border-0`	border-width: 0
`border-2`	border-width: 2px
`border-4`	border-width: 4px
`border-t`	border-top-width: 1px
`border-r`	border-right-width: 1px
`border-b`	border-bottom-width: 1px
`border-l`	border-left-width: 1px
`border-solid`	border-style: solid
`border-dashed`	border-style: dashed
`border-dotted`	border-style: dotted
`border-none`	border-style: none
`rounded`	border-radius: 0.25rem (4px)
`rounded-md`	border-radius: 0.375rem (6px)
`rounded-lg`	border-radius: 0.5rem (8px)
`rounded-xl`	border-radius: 0.75rem (12px)
`rounded-2xl`	border-radius: 1rem (16px)
`rounded-full`	border-radius: 9999px
`rounded-none`	border-radius: 0
`rounded-t-lg`	border-top-left/right-radius: 0.5rem
`divide-x`	border between horizontal children
`divide-y`	border between vertical children

Class	CSS
`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)
`shadow-none`	box-shadow: none
`opacity-0`	opacity: 0
`opacity-50`	opacity: 0.5
`opacity-100`	opacity: 1
`blur`	filter: blur(8px)
`blur-sm`	filter: blur(4px)
`blur-lg`	filter: blur(16px)
`blur-none`	filter: blur(0)
`backdrop-blur`	backdrop-filter: blur(8px)
`backdrop-blur-sm`	backdrop-filter: blur(4px)

Class	CSS
`transition`	transition: all 150ms ease
`transition-none`	transition: none
`transition-colors`	transition: color, background-color, border-color
`transition-opacity`	transition: opacity 150ms
`transition-transform`	transition: transform 150ms
`duration-75`	transition-duration: 75ms
`duration-150`	transition-duration: 150ms
`duration-300`	transition-duration: 300ms
`duration-500`	transition-duration: 500ms
`ease-linear`	transition-timing-function: linear
`ease-in`	transition-timing-function: ease-in
`ease-out`	transition-timing-function: ease-out
`ease-in-out`	transition-timing-function: ease-in-out
`delay-150`	transition-delay: 150ms
`delay-300`	transition-delay: 300ms
`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

Class	CSS
`scale-0`	transform: scale(0)
`scale-50`	transform: scale(0.5)
`scale-100`	transform: scale(1)
`scale-150`	transform: scale(1.5)
`rotate-0`	transform: rotate(0deg)
`rotate-45`	transform: rotate(45deg)
`rotate-90`	transform: rotate(90deg)
`rotate-180`	transform: rotate(180deg)
`-rotate-45`	transform: rotate(-45deg)
`translate-x-0`	transform: translateX(0)
`translate-x-4`	transform: translateX(1rem)
`translate-x-full`	transform: translateX(100%)
`-translate-x-4`	transform: translateX(-1rem)
`translate-y-4`	transform: translateY(1rem)
`skew-x-3`	transform: skewX(3deg)
`skew-y-3`	transform: skewY(3deg)
`origin-center`	transform-origin: center
`origin-top`	transform-origin: top

Class	CSS
`cursor-pointer`	cursor: pointer
`cursor-default`	cursor: default
`cursor-not-allowed`	cursor: not-allowed
`cursor-wait`	cursor: wait
`cursor-grab`	cursor: grab
`pointer-events-none`	pointer-events: none
`pointer-events-auto`	pointer-events: auto
`select-none`	user-select: none
`select-text`	user-select: text
`select-all`	user-select: all
`resize`	resize: both
`resize-none`	resize: none
`resize-x`	resize: horizontal
`resize-y`	resize: vertical
`scroll-smooth`	scroll-behavior: smooth
`scroll-auto`	scroll-behavior: auto

Class	CSS
`hover:`e.g. hover:bg-blue-600	on mouse hover
`focus:`e.g. focus:ring-2	on focus
`focus-visible:`e.g. focus-visible:outline-none	on keyboard focus
`active:`e.g. active:bg-blue-700	on active/pressed
`disabled:`e.g. disabled:opacity-50	when disabled
`first:`e.g. first:mt-0	first child
`last:`e.g. last:mb-0	last child
`odd:`e.g. odd:bg-gray-100	odd children
`even:`e.g. even:bg-white	even children
`group-hover:`e.g. group-hover:visible	when parent .group is hovered
`peer-focus:`e.g. peer-focus:ring	when sibling .peer is focused
`dark:`e.g. dark:bg-gray-900	dark mode
`motion-safe:`e.g. motion-safe:animate-spin	if user allows motion
`motion-reduce:`e.g. motion-reduce:animate-none	if user prefers reduced motion

Class	CSS
`overflow-auto`	overflow: auto
`overflow-hidden`	overflow: hidden
`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
`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
`-z-10`	z-index: -10

Tip: Use arbitrary values with square brackets:w-[200px],text-[#1da1f2],grid-cols-[1fr_2fr]

Class

CSS

sm:e.g. sm:flex

@media (min-width: 640px)

md:e.g. md:grid-cols-2

@media (min-width: 768px)

lg:e.g. lg:px-8

@media (min-width: 1024px)

xl:e.g. xl:max-w-6xl

@media (min-width: 1280px)

2xl:e.g. 2xl:text-lg

@media (min-width: 1536px)

Class

CSS

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

hidden

display: none

contents

display: contents

Class

CSS

static

position: static

fixed

position: fixed

absolute

position: absolute

relative

position: relative

sticky

position: sticky

inset-0

inset: 0

inset-x-0

left: 0; right: 0

inset-y-0

top: 0; bottom: 0

top-0

top: 0

right-0

right: 0

bottom-0

bottom: 0

left-0

left: 0

Class

CSS

flex-row

flex-direction: row

flex-col

flex-direction: column

flex-wrap

flex-wrap: wrap

flex-nowrap

flex-wrap: nowrap

flex-1

flex: 1 1 0%

flex-auto

flex: 1 1 auto

flex-none

flex: none

grow

flex-grow: 1

grow-0

flex-grow: 0

shrink

flex-shrink: 1

shrink-0

flex-shrink: 0

Class

CSS

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-12

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

col-span-1

grid-column: span 1 / span 1

col-span-2

grid-column: span 2 / span 2

col-span-full

grid-column: 1 / -1

grid-rows-1

grid-template-rows: repeat(1, minmax(0, 1fr))

grid-rows-2

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

Class

CSS

justify-start

justify-content: flex-start

justify-center

justify-content: center

justify-end

justify-content: flex-end

justify-between

justify-content: space-between

justify-around

justify-content: space-around

justify-evenly

justify-content: space-evenly

items-start

align-items: flex-start

items-center

align-items: center

items-end

align-items: flex-end

items-baseline

align-items: baseline

items-stretch

align-items: stretch

self-auto

align-self: auto

self-start

align-self: flex-start

self-center

align-self: center

self-end

align-self: flex-end

Class

CSS

p-0

padding: 0

p-1

padding: 0.25rem (4px)

p-2

padding: 0.5rem (8px)

p-4

padding: 1rem (16px)

p-6

padding: 1.5rem (24px)

p-8

padding: 2rem (32px)

px-*

padding-left & padding-right

py-*

padding-top & padding-bottom

pt/pr/pb/pl-*

padding-[side]

m-0

margin: 0

m-1

margin: 0.25rem (4px)

m-2

margin: 0.5rem (8px)

m-4

margin: 1rem (16px)

m-auto

margin: auto

-m-1

margin: -0.25rem

mx-auto

margin-left: auto; margin-right: auto

gap-0

gap: 0

gap-1

gap: 0.25rem (4px)

gap-2

gap: 0.5rem (8px)

gap-4

gap: 1rem (16px)

gap-x-*

column-gap

gap-y-*

row-gap

Class

CSS

w-0

width: 0

w-1

width: 0.25rem (4px)

w-4

width: 1rem (16px)

w-full

width: 100%

w-screen

width: 100vw

w-auto

width: auto

w-1/2

width: 50%

w-1/3

width: 33.333%

w-fit

width: fit-content

min-w-0

min-width: 0

min-w-full

min-width: 100%

max-w-sm

max-width: 24rem (384px)

max-w-md

max-width: 28rem (448px)

max-w-lg

max-width: 32rem (512px)

max-w-xl

max-width: 36rem (576px)

max-w-2xl

max-width: 42rem (672px)

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

h-0

height: 0

h-4

height: 1rem (16px)

h-full

height: 100%

h-screen

height: 100vh

h-auto

height: auto

min-h-0

min-height: 0

min-h-full

min-height: 100%

min-h-screen

min-height: 100vh

size-4

width: 1rem; height: 1rem

size-6

width: 1.5rem; height: 1.5rem

size-full

width: 100%; height: 100%

Class

CSS

text-xs

font-size: 0.75rem (12px)

text-sm

font-size: 0.875rem (14px)

text-base

font-size: 1rem (16px)

text-lg

font-size: 1.125rem (18px)

text-xl

font-size: 1.25rem (20px)

text-2xl

font-size: 1.5rem (24px)

text-3xl

font-size: 1.875rem (30px)

text-4xl

font-size: 2.25rem (36px)

font-thin

font-weight: 100

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-sans

font-family: ui-sans-serif, system-ui, sans-serif

font-serif

font-family: ui-serif, Georgia, serif

font-mono

font-family: ui-monospace, monospace

italic

font-style: italic

not-italic

font-style: normal

leading-none

line-height: 1

leading-tight

line-height: 1.25

leading-normal

line-height: 1.5

leading-relaxed

line-height: 1.625

leading-loose

line-height: 2

tracking-tight

letter-spacing: -0.025em

tracking-normal

letter-spacing: 0

tracking-wide

letter-spacing: 0.025em

Class

CSS

text-left

text-align: left

text-center

text-align: center

text-right

text-align: right

text-justify

text-align: justify

uppercase

text-transform: uppercase

lowercase

text-transform: lowercase

capitalize

text-transform: capitalize

normal-case

text-transform: none

underline

text-decoration: underline

line-through

text-decoration: line-through

no-underline

text-decoration: none

truncate

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

text-ellipsis

text-overflow: ellipsis

text-clip

text-overflow: clip

whitespace-normal

white-space: normal

whitespace-nowrap

white-space: nowrap

whitespace-pre

white-space: pre

break-normal

word-break: normal

break-words

word-break: break-word

break-all

word-break: break-all

line-clamp-1

-webkit-line-clamp: 1

line-clamp-2

-webkit-line-clamp: 2

line-clamp-3

-webkit-line-clamp: 3

Class

CSS

bg-transparent

background-color: transparent

bg-current

background-color: currentColor

bg-white

background-color: #fff

bg-black

background-color: #000

bg-slate-500

background-color: #64748b

bg-[#hex]e.g. bg-[#1da1f2]

background-color: #hex

bg-cover

background-size: cover

bg-contain

background-size: contain

bg-center

background-position: center

bg-no-repeat

background-repeat: no-repeat

bg-repeat

background-repeat: repeat

bg-fixed

background-attachment: fixed

bg-gradient-to-r

background-image: linear-gradient(to right, ...)

bg-gradient-to-b

background-image: linear-gradient(to bottom, ...)

from-blue-500

gradient start color

via-purple-500

gradient middle color

to-pink-500

gradient end color

Class

CSS

border

border-width: 1px

border-0

border-width: 0

border-2

border-width: 2px

border-4

border-width: 4px

border-t

border-top-width: 1px

border-r

border-right-width: 1px

border-b

border-bottom-width: 1px

border-l

border-left-width: 1px

border-solid

border-style: solid

border-dashed

border-style: dashed

border-dotted

border-style: dotted

border-none

border-style: none

rounded

border-radius: 0.25rem (4px)

rounded-md

border-radius: 0.375rem (6px)

rounded-lg

border-radius: 0.5rem (8px)

rounded-xl

border-radius: 0.75rem (12px)

rounded-2xl

border-radius: 1rem (16px)

rounded-full

border-radius: 9999px

rounded-none

border-radius: 0

rounded-t-lg

border-top-left/right-radius: 0.5rem

divide-x

border between horizontal children

divide-y

border between vertical children

Class

CSS

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)

shadow-none

box-shadow: none

opacity-0

opacity: 0

opacity-50

opacity: 0.5

opacity-100

opacity: 1

blur

filter: blur(8px)

blur-sm

filter: blur(4px)

blur-lg

filter: blur(16px)

blur-none

filter: blur(0)

backdrop-blur

backdrop-filter: blur(8px)

backdrop-blur-sm

backdrop-filter: blur(4px)

Class

CSS

transition

transition: all 150ms ease

transition-none

transition: none

transition-colors

transition: color, background-color, border-color

transition-opacity

transition: opacity 150ms

transition-transform

transition: transform 150ms

duration-75

transition-duration: 75ms

duration-150

transition-duration: 150ms

duration-300

transition-duration: 300ms

duration-500

transition-duration: 500ms

ease-linear

transition-timing-function: linear

ease-in

transition-timing-function: ease-in

ease-out

transition-timing-function: ease-out

ease-in-out

transition-timing-function: ease-in-out

delay-150

transition-delay: 150ms

delay-300

transition-delay: 300ms

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

Class

CSS

scale-0

transform: scale(0)

scale-50

transform: scale(0.5)

scale-100

transform: scale(1)

scale-150

transform: scale(1.5)

rotate-0

transform: rotate(0deg)

rotate-45

transform: rotate(45deg)

rotate-90

transform: rotate(90deg)

rotate-180

transform: rotate(180deg)

-rotate-45

transform: rotate(-45deg)

translate-x-0

transform: translateX(0)

translate-x-4

transform: translateX(1rem)

translate-x-full

transform: translateX(100%)

-translate-x-4

transform: translateX(-1rem)

translate-y-4

transform: translateY(1rem)

skew-x-3

transform: skewX(3deg)

skew-y-3

transform: skewY(3deg)

origin-center

transform-origin: center

origin-top

transform-origin: top

Class

CSS

cursor-pointer

cursor: pointer

cursor-default

cursor: default

cursor-not-allowed

cursor: not-allowed

cursor-wait

cursor: wait

cursor-grab

cursor: grab

pointer-events-none

pointer-events: none

pointer-events-auto

pointer-events: auto

select-none

user-select: none

select-text

user-select: text

select-all

user-select: all

resize

resize: both

resize-none

resize: none

resize-x

resize: horizontal

resize-y

resize: vertical

scroll-smooth

scroll-behavior: smooth

scroll-auto

scroll-behavior: auto

Class

CSS

hover:e.g. hover:bg-blue-600

on mouse hover

focus:e.g. focus:ring-2

on focus

focus-visible:e.g. focus-visible:outline-none

on keyboard focus

active:e.g. active:bg-blue-700

on active/pressed

disabled:e.g. disabled:opacity-50

when disabled

first:e.g. first:mt-0

first child

last:e.g. last:mb-0

last child

odd:e.g. odd:bg-gray-100

odd children

even:e.g. even:bg-white

even children

group-hover:e.g. group-hover:visible

when parent .group is hovered

peer-focus:e.g. peer-focus:ring

when sibling .peer is focused

dark:e.g. dark:bg-gray-900

dark mode

motion-safe:e.g. motion-safe:animate-spin

if user allows motion

motion-reduce:e.g. motion-reduce:animate-none

if user prefers reduced motion

Class

CSS

overflow-auto

overflow: auto

overflow-hidden

overflow: hidden

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

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

-z-10

z-index: -10