A listed class does not work
verify the declared Tailwind version, content scanning/build setup and project theme.
Tailwind CSS Cheat Sheet
Search utility classes and inspect their CSS meaning with a clearly declared Tailwind version and update date.
Developer & Text ToolsDirect answer
No. Use this page only with disposable test data. Create production wallet secrets in a reviewed offline workflow, and verify every backup without exposing the phrase or key. Searchable utility-class reference. Category filters for faster discovery. Class-name and generated-CSS display.
| 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]How to use it
Enter the source data: Search by a utility name, CSS property or concept such as spacing, grid, typography, color or responsive state.
Choose the relevant settings: Filter by category and inspect the class-to-CSS mapping. Keep variants such as responsive breakpoints, hover/focus and dark mode in their proper context.
Review and verify the result: Confirm the class in the documentation for the declared Tailwind version and your project configuration before copying it into production.
Key capabilities
- Searchable utility-class reference.
- Category filters for faster discovery.
- Class-name and generated-CSS display.
- Coverage of responsive and state concepts when included.
- Version/update metadata required for trustworthy maintenance.
Best use cases
- Recall a utility name while coding.
- Translate a CSS declaration into a likely Tailwind utility.
- Review unfamiliar classes in an existing codebase using the same declared version.
Limits and safety notes
- A cheat sheet cannot represent every plugin, arbitrary value, theme token or project customization. Generated CSS can differ by Tailwind version and configuration. The audit-time entry count is not a completeness guarantee.
- This reference page does not require user secrets. Search terms should still not be sent to third parties unless disclosed.
Troubleshooting
CSS output differs
check whether the project uses v3 or v4, custom tokens, plugins or arbitrary values.
Search misses a utility
normalize aliases and include CSS-property keywords, but do not claim complete coverage until the dataset is tested.
Frequently asked questions
Which Tailwind version does this cheat sheet cover?
This build uses Tailwind CSS 4.3.3. The cheatsheet is a searchable reference, so confirm version-sensitive utilities against the Tailwind version installed in your own project.
Is the class list complete?
No completeness claim should be made from the audit-time count alone. Tailwind supports arbitrary values, configuration, variants and plugins beyond a static list.
Can I copy the shown CSS directly?
Use it as an explanation of the utility, not necessarily as the exact build output for every project. Confirm against your version and configuration.
Is it safe and private?
Short answer: This reference page does not require user secrets. Search terms should still not be sent to third parties unless disclosed.
Does it work on mobile?
The layout adapts to narrow screens. File selection, camera access, clipboard actions and downloads still depend on the permissions and capabilities of the mobile browser.
Related tools
Use the tool
Find the class, inspect the CSS meaning, then confirm it against the Tailwind version and configuration used by your project.