Responsive BreakpointsStates (Variants)SpacingSizingDisplayFlexboxAlignmentGridPositionTypographyText Alignment & DecorationColorsBordersEffectsTransitions & AnimationTransformsOverflow & MiscColor Palette
#Responsive Breakpoints
| Class | CSS | Description | |
|---|---|---|---|
sm: | @media (min-width: 640px) | Small screens and up | |
md: | @media (min-width: 768px) | Medium screens and up | |
lg: | @media (min-width: 1024px) | Large screens and up | |
xl: | @media (min-width: 1280px) | Extra large screens and up | |
2xl: | @media (min-width: 1536px) | 2x Extra large screens and up |
#States (Variants)
| Class | CSS | Description | |
|---|---|---|---|
hover: | :hover | On mouse hover | |
focus: | :focus | On focus | |
active: | :active | While being clicked | |
disabled: | :disabled | When disabled | |
first: | :first-child | First child | |
last: | :last-child | Last child | |
odd: | :nth-child(odd) | Odd children | |
even: | :nth-child(even) | Even children | |
group-hover: | .group:hover & | When parent group is hovered | |
dark: | @media (prefers-color-scheme: dark) | Dark mode |
#Spacing
| Class | CSS | Description | |
|---|---|---|---|
p-{size} | padding | Padding all sides | |
px-{size} | padding-left/right | Horizontal padding | |
py-{size} | padding-top/bottom | Vertical padding | |
pt/pr/pb/pl-{size} | padding-top/right/bottom/left | Single side padding | |
m-{size} | margin | Margin all sides | |
mx-{size} | margin-left/right | Horizontal margin | |
my-{size} | margin-top/bottom | Vertical margin | |
mt/mr/mb/ml-{size} | margin-top/right/bottom/left | Single side margin | |
mx-auto | margin: 0 auto | Center horizontally | |
gap-{size} | gap | Flex/Grid gap | |
gap-x-{size} | column-gap | Horizontal gap | |
gap-y-{size} | row-gap | Vertical gap | |
space-x-{size} | > * + * { margin-left } | Horizontal space between children | |
space-y-{size} | > * + * { margin-top } | Vertical space between children |
#Sizing
| Class | CSS | Description | |
|---|---|---|---|
w-{size} | width | Width | |
w-full | width: 100% | Full width | |
w-screen | width: 100vw | Screen width | |
w-auto | width: auto | Auto width | |
w-fit | width: fit-content | Fit content | |
min-w-0 | min-width: 0 | Minimum width 0 | |
min-w-full | min-width: 100% | Minimum width 100% | |
max-w-{size} | max-width | Maximum width | |
max-w-screen-{bp} | max-width: breakpoint | Breakpoint max width | |
h-{size} | height | Height | |
h-full | height: 100% | Full height | |
h-screen | height: 100vh | Screen height | |
min-h-screen | min-height: 100vh | Min screen height | |
max-h-{size} | max-height | Maximum height | |
size-{size} | width + height | Width and height together |
#Display
| Class | CSS | Description | |
|---|---|---|---|
block | display: block | Block element | |
inline-block | display: inline-block | Inline block | |
inline | display: inline | Inline element | |
flex | display: flex | Flex container | |
inline-flex | display: inline-flex | Inline flex | |
grid | display: grid | Grid container | |
inline-grid | display: inline-grid | Inline grid | |
hidden | display: none | Hidden | |
contents | display: contents | Contents only |
#Flexbox
| Class | CSS | Description | |
|---|---|---|---|
flex-row | flex-direction: row | Horizontal direction | |
flex-col | flex-direction: column | Vertical direction | |
flex-row-reverse | flex-direction: row-reverse | Reverse horizontal | |
flex-col-reverse | flex-direction: column-reverse | Reverse vertical | |
flex-wrap | flex-wrap: wrap | Allow wrapping | |
flex-nowrap | flex-wrap: nowrap | No wrapping | |
flex-1 | flex: 1 1 0% | Fill remaining space | |
flex-auto | flex: 1 1 auto | Auto sizing | |
flex-none | flex: none | Fixed size | |
grow | flex-grow: 1 | Allow grow | |
grow-0 | flex-grow: 0 | Prevent grow | |
shrink | flex-shrink: 1 | Allow shrink | |
shrink-0 | flex-shrink: 0 | Prevent shrink |
#Alignment
| Class | CSS | Description | |
|---|---|---|---|
justify-start | justify-content: flex-start | Main axis start | |
justify-center | justify-content: center | Main axis center | |
justify-end | justify-content: flex-end | Main axis end | |
justify-between | justify-content: space-between | Space between | |
justify-around | justify-content: space-around | Space around | |
justify-evenly | justify-content: space-evenly | Space evenly | |
items-start | align-items: flex-start | Cross axis start | |
items-center | align-items: center | Cross axis center | |
items-end | align-items: flex-end | Cross axis end | |
items-baseline | align-items: baseline | Cross axis baseline | |
items-stretch | align-items: stretch | Stretch to fill | |
self-auto | align-self: auto | Self auto | |
self-start | align-self: flex-start | Self start | |
self-center | align-self: center | Self center | |
self-end | align-self: flex-end | Self end |
#Grid
| Class | CSS | Description | |
|---|---|---|---|
grid-cols-{n} | grid-template-columns: repeat(n, 1fr) | n columns | |
grid-rows-{n} | grid-template-rows: repeat(n, 1fr) | n rows | |
col-span-{n} | grid-column: span n | Span n columns | |
col-start-{n} | grid-column-start: n | Start at column n | |
col-end-{n} | grid-column-end: n | End at column n | |
row-span-{n} | grid-row: span n | Span n rows | |
row-start-{n} | grid-row-start: n | Start at row n | |
row-end-{n} | grid-row-end: n | End at row n | |
auto-cols-auto | grid-auto-columns: auto | Auto column size | |
auto-cols-fr | grid-auto-columns: 1fr | Auto column 1fr | |
auto-rows-auto | grid-auto-rows: auto | Auto row size |
#Position
| Class | CSS | Description | |
|---|---|---|---|
static | position: static | Static position | |
relative | position: relative | Relative position | |
absolute | position: absolute | Absolute position | |
fixed | position: fixed | Fixed position | |
sticky | position: sticky | Sticky position | |
top-{size} | top | Top offset | |
right-{size} | right | Right offset | |
bottom-{size} | bottom | Bottom offset | |
left-{size} | left | Left offset | |
inset-{size} | top/right/bottom/left | All directions offset | |
inset-x-{size} | left/right | Horizontal offset | |
inset-y-{size} | top/bottom | Vertical offset | |
z-{n} | z-index | Z-index | |
z-auto | z-index: auto | Auto z-index |
#Typography
| Class | CSS | Description | |
|---|---|---|---|
font-sans | font-family: sans-serif | Sans-serif font | |
font-serif | font-family: serif | Serif font | |
font-mono | font-family: monospace | Monospace font | |
text-xs | font-size: 0.75rem | Extra small text | |
text-sm | font-size: 0.875rem | Small text | |
text-base | font-size: 1rem | Base text | |
text-lg | font-size: 1.125rem | Large text | |
text-xl | font-size: 1.25rem | Extra large text | |
text-2xl ~ 9xl | font-size: 1.5rem ~ 8rem | Larger text sizes | |
font-thin | font-weight: 100 | Thin weight | |
font-light | font-weight: 300 | Light weight | |
font-normal | font-weight: 400 | Normal weight | |
font-medium | font-weight: 500 | Medium weight | |
font-semibold | font-weight: 600 | Semi bold | |
font-bold | font-weight: 700 | Bold | |
italic | font-style: italic | Italic | |
not-italic | font-style: normal | Not italic | |
leading-{size} | line-height | Line height | |
tracking-{size} | letter-spacing | Letter spacing |
#Text Alignment & Decoration
| Class | CSS | Description | |
|---|---|---|---|
text-left | text-align: left | Left align | |
text-center | text-align: center | Center align | |
text-right | text-align: right | Right align | |
text-justify | text-align: justify | Justify | |
underline | text-decoration: underline | Underline | |
line-through | text-decoration: line-through | Line through | |
no-underline | text-decoration: none | No decoration | |
uppercase | text-transform: uppercase | Uppercase | |
lowercase | text-transform: lowercase | Lowercase | |
capitalize | text-transform: capitalize | Capitalize | |
truncate | overflow: hidden; text-overflow: ellipsis | Truncate with ellipsis | |
line-clamp-{n} | -webkit-line-clamp: n | Clamp to n lines | |
whitespace-nowrap | white-space: nowrap | No wrap | |
break-words | word-wrap: break-word | Break words |
#Colors
| Class | CSS | Description | |
|---|---|---|---|
text-{color}-{shade} | color | Text color | |
bg-{color}-{shade} | background-color | Background color | |
bg-gradient-to-{dir} | background-image: linear-gradient | Gradient direction | |
from-{color} | from color | Gradient from | |
via-{color} | via color | Gradient via | |
to-{color} | to color | Gradient to | |
text-transparent | color: transparent | Transparent text | |
bg-transparent | background-color: transparent | Transparent background | |
text-current | color: currentColor | Inherit current color |
#Borders
| Class | CSS | Description | |
|---|---|---|---|
border | border-width: 1px | 1px border | |
border-{n} | border-width: npx | n pixel border | |
border-t/r/b/l-{n} | border-top/right/bottom/left-width | Directional border | |
border-{color} | border-color | Border color | |
border-solid | border-style: solid | Solid border | |
border-dashed | border-style: dashed | Dashed border | |
border-dotted | border-style: dotted | Dotted border | |
border-none | border-style: none | No border | |
rounded | border-radius: 0.25rem | Slightly rounded | |
rounded-md | border-radius: 0.375rem | Medium rounded | |
rounded-lg | border-radius: 0.5rem | Large rounded | |
rounded-xl | border-radius: 0.75rem | Extra large rounded | |
rounded-full | border-radius: 9999px | Full circle | |
rounded-none | border-radius: 0 | No rounding | |
rounded-t/r/b/l-{size} | border-radius (corners) | Specific corners |
#Effects
| Class | CSS | Description | |
|---|---|---|---|
shadow-sm | box-shadow: small | Small shadow | |
shadow | box-shadow: default | Default shadow | |
shadow-md | box-shadow: medium | Medium shadow | |
shadow-lg | box-shadow: large | Large shadow | |
shadow-xl | box-shadow: extra large | Extra large shadow | |
shadow-2xl | box-shadow: 2x large | 2x large shadow | |
shadow-inner | box-shadow: inset | Inner shadow | |
shadow-none | box-shadow: none | No shadow | |
opacity-{n} | opacity: n% | Opacity (0-100) | |
blur | filter: blur(8px) | Blur | |
blur-{size} | filter: blur(size) | Blur amount | |
brightness-{n} | filter: brightness(n%) | Brightness | |
contrast-{n} | filter: contrast(n%) | Contrast | |
grayscale | filter: grayscale(100%) | Grayscale | |
invert | filter: invert(100%) | Invert |
#Transitions & Animation
| Class | CSS | Description | |
|---|---|---|---|
transition | transition-property: all | Default transition | |
transition-all | transition-property: all | Transition all | |
transition-colors | transition-property: colors | Color transition | |
transition-opacity | transition-property: opacity | Opacity transition | |
transition-transform | transition-property: transform | Transform transition | |
duration-{ms} | transition-duration: ms | Duration | |
ease-linear | transition-timing: linear | Linear easing | |
ease-in | transition-timing: ease-in | Ease in | |
ease-out | transition-timing: ease-out | Ease out | |
ease-in-out | transition-timing: ease-in-out | Ease in out | |
delay-{ms} | transition-delay: ms | Delay | |
animate-spin | animation: spin | Spin animation | |
animate-ping | animation: ping | Ping animation | |
animate-pulse | animation: pulse | Pulse animation | |
animate-bounce | animation: bounce | Bounce animation |
#Transforms
| Class | CSS | Description | |
|---|---|---|---|
scale-{n} | transform: scale(n) | Scale | |
scale-x-{n} | transform: scaleX(n) | Scale X | |
scale-y-{n} | transform: scaleY(n) | Scale Y | |
rotate-{deg} | transform: rotate(deg) | Rotate | |
translate-x-{size} | transform: translateX | Translate X | |
translate-y-{size} | transform: translateY | Translate Y | |
skew-x-{deg} | transform: skewX(deg) | Skew X | |
skew-y-{deg} | transform: skewY(deg) | Skew Y | |
origin-center | transform-origin: center | Origin center | |
origin-top | transform-origin: top | Origin top | |
origin-bottom | transform-origin: bottom | Origin bottom |
#Overflow & Misc
| Class | CSS | Description | |
|---|---|---|---|
overflow-auto | overflow: auto | Scroll if needed | |
overflow-hidden | overflow: hidden | Hide overflow | |
overflow-scroll | overflow: scroll | Always scroll | |
overflow-visible | overflow: visible | Show overflow | |
overflow-x-{value} | overflow-x | Horizontal overflow | |
overflow-y-{value} | overflow-y | Vertical overflow | |
cursor-pointer | cursor: pointer | Pointer cursor | |
cursor-not-allowed | cursor: not-allowed | Not allowed cursor | |
pointer-events-none | pointer-events: none | Disable pointer events | |
select-none | user-select: none | Prevent selection | |
select-text | user-select: text | Allow text selection | |
select-all | user-select: all | Select all on click | |
sr-only | screen reader only | Screen reader only |
#Color Palette
slate
gray
zinc
red
orange
amber
yellow
lime
green
emerald
teal
cyan
sky
blue
indigo
violet
purple
fuchsia
pink
rose
💡 Click a color block to copy the class name (e.g., blue-500)
Usage: text-{color}-{shade}, bg-{color}-{shade}, border-{color}-{shade}
#Size Scale Reference
| Class | Value | Class | Value |
|---|---|---|---|
| 0 | 0px | px | 1px |
| 0.5 | 0.125rem (2px) | 1 | 0.25rem (4px) |
| 2 | 0.5rem (8px) | 3 | 0.75rem (12px) |
| 4 | 1rem (16px) | 5 | 1.25rem (20px) |
| 6 | 1.5rem (24px) | 8 | 2rem (32px) |
| 10 | 2.5rem (40px) | 12 | 3rem (48px) |
| 16 | 4rem (64px) | 20 | 5rem (80px) |
| 24 | 6rem (96px) | 32 | 8rem (128px) |
#Frequently Asked Questions
이 포스팅은 쿠팡 파트너스 활동의 일환으로, 이에 따른 일정액의 수수료를 제공받습니다.