Cheat Sheet Tailwind CSS

Tìm utility class nhanh và xem ý nghĩa CSS, với phiên bản Tailwind cùng ngày review hiển thị rõ.

Công cụ lập trình & văn bản

Trả lời trực tiếp

Không. Chỉ dùng trang này với dữ liệu kiểm thử có thể hủy. Hãy tạo secret ví production bằng quy trình offline đã được rà soát và kiểm tra mọi bản sao lưu mà không làm lộ cụm từ hoặc khóa.

Tìm utility Tailwind Kiểm tra phiên bản

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

Mẹo: Dùng giá trị tùy ý trong dấu ngoặc vuông:w-[200px],text-[#1da1f2],grid-cols-[1fr_2fr]

Cách sử dụng

Nhập dữ liệu nguồn: Tìm theo utility, CSS property hoặc khái niệm như spacing, grid, typography, color hay state.
Chọn thiết lập phù hợp: Lọc category rồi đọc class-to-CSS; đặt responsive breakpoint, hover/focus và dark mode đúng ngữ cảnh.
Kiểm tra và xác minh kết quả: Đối chiếu class với tài liệu của đúng Tailwind version và config dự án trước khi dùng production.

Khả năng chính

Tra cứu utility class bằng search.
Filter theo category.
Hiển thị class name và CSS tương ứng.
Giải thích responsive/state khi dataset có.
Bắt buộc có version/update metadata.

Trường hợp nên dùng

Nhớ nhanh tên utility khi code.
Từ một CSS declaration tìm utility Tailwind phù hợp.
Đọc class lạ trong codebase cùng version.

Giới hạn và lưu ý an toàn

Cheat sheet tĩnh không thể bao phủ mọi plugin, arbitrary value, theme token hoặc custom config. CSS sinh ra có thể khác theo version. Con số 304 tại ngày audit không phải cam kết completeness.
Trang tra cứu này không cần secret của người dùng. Tuy vậy, từ khóa tìm kiếm cũng không nên gửi cho bên thứ ba nếu chưa thông báo.

Khắc phục sự cố

Class không chạy

kiểm tra Tailwind version, content scanning/build và theme.

CSS khác bảng

đối chiếu v3/v4, custom token, plugin và arbitrary value.

Search không thấy

bổ sung alias/CSS property nhưng không gọi dataset là complete nếu chưa test.

Câu hỏi thường gặp

Cheat sheet này dùng Tailwind phiên bản nào?

Bản build này dùng Tailwind CSS 4.3.3. Cheatsheet là tài liệu tra cứu có tìm kiếm; hãy đối chiếu utility phụ thuộc phiên bản với bản Tailwind trong dự án của bạn.

Danh sách class có đầy đủ không?

Không nên claim đầy đủ chỉ từ số lượng audit. Tailwind còn arbitrary value, config, variants và plugin.

Có thể copy CSS hiển thị trực tiếp không?

Hãy coi đây là giải thích utility; output build chính xác còn phụ thuộc version và config dự án.

Công cụ có an toàn và riêng tư không?

Trả lời ngắn gọn: Trang tra cứu này không cần secret của người dùng. Tuy vậy, từ khóa tìm kiếm cũng không nên gửi cho bên thứ ba nếu chưa thông báo.

Công cụ có dùng được trên điện thoại không?

Bố cục thích ứng với màn hình hẹp. Việc chọn tệp, dùng camera, thao tác clipboard và tải xuống vẫn phụ thuộc quyền cùng khả năng của trình duyệt di động.

Trình tạo Meta Tag Trình kiểm thử Regex JavaScript Text Scratchpad

Bắt đầu sử dụng

Tìm class, xem ý nghĩa CSS rồi xác nhận trong tài liệu đúng version/config của dự án.