Tailwind Cheat Sheet

Other Tools

Tailwind Cheat Sheet

Other Tools

Quick reference for Tailwind classes

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]