Tailwind CSS cheat sheet
Tra cứu nhanh utility class Tailwind cho spacing, color, typography, flex/grid, hiệu ứng — tiết kiệm thời gian khi code daily.
AK
appkiro.com| 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 |
w-[200px],text-[#1da1f2],grid-cols-[1fr_2fr]The cheatsheet groups the most common Tailwind classes by purpose - layout, spacing, typography, effects, state variants, and more - and lists their underlying CSS so you can recall the right utility quickly. Use it as a reference while writing markup or for explaining classes to teammates.
md:grid-cols-2 next to the base class, showing how a prefix or breakpoint variant is composed.w-[200px], text-[#1da1f2], grid-cols-[1fr_2fr].hover:, focus:, dark:, group-hover:, and motion-reduce: with example syntax.The class names and CSS values follow the Tailwind v3/v4 utility lineup commonly used in modern projects. Most utilities are stable across versions; a handful (gradient stops, container queries) may differ if you are on a much older release.
Yes. Each row has a copy icon that places the utility class on your clipboard. The icon swaps to a checkmark for a moment so you know the copy succeeded.
Tailwind allows arbitrary values inside square brackets, for example w-[200px], text-[#1da1f2], or grid-cols-[1fr_2fr]. Use any base utility from the list and replace the value with your own.
Yes. The search input matches the class, the underlying CSS declaration, and the example column, so you can search by either side. Categories with no matches collapse out of the view.