#响应式断点
| 类 | CSS | 说明 | |
|---|---|---|---|
sm: | @media (min-width: 640px) | 小屏幕及以上 | |
md: | @media (min-width: 768px) | 中等屏幕及以上 | |
lg: | @media (min-width: 1024px) | 大屏幕及以上 | |
xl: | @media (min-width: 1280px) | 超大屏幕及以上 | |
2xl: | @media (min-width: 1536px) | 超超大屏幕及以上 |
#状态（变体）
| 类 | CSS | 说明 | |
|---|---|---|---|
hover: | :hover | 鼠标悬停时 | |
focus: | :focus | 聚焦时 | |
active: | :active | 点击/按下时 | |
disabled: | :disabled | 禁用时 | |
first: | :first-child | 第一个子元素 | |
last: | :last-child | 最后一个子元素 | |
odd: | :nth-child(odd) | 奇数子元素 | |
even: | :nth-child(even) | 偶数子元素 | |
group-hover: | .group:hover & | 父组悬停时 | |
dark: | @media (prefers-color-scheme: dark) | 深色模式 |
#间距
| 类 | CSS | 说明 | |
|---|---|---|---|
p-{size} | padding | 全部内边距 | |
px-{size} | padding-left/right | 水平内边距 | |
py-{size} | padding-top/bottom | 垂直内边距 | |
pt/pr/pb/pl-{size} | padding-top/right/bottom/left | 单方向内边距 | |
m-{size} | margin | 全部外边距 | |
mx-{size} | margin-left/right | 水平外边距 | |
my-{size} | margin-top/bottom | 垂直外边距 | |
mt/mr/mb/ml-{size} | margin-top/right/bottom/left | 单方向外边距 | |
mx-auto | margin: 0 auto | 水平居中 | |
gap-{size} | gap | Flex/Grid间隙 | |
gap-x-{size} | column-gap | 水平间隙 | |
gap-y-{size} | row-gap | 垂直间隙 | |
space-x-{size} | > * + * { margin-left } | 子元素水平间距 | |
space-y-{size} | > * + * { margin-top } | 子元素垂直间距 |
#尺寸
| 类 | CSS | 说明 | |
|---|---|---|---|
w-{size} | width | 宽度 | |
w-full | width: 100% | 全宽 | |
w-screen | width: 100vw | 屏幕宽度 | |
w-auto | width: auto | 自动宽度 | |
w-fit | width: fit-content | 适应内容 | |
min-w-0 | min-width: 0 | 最小宽度0 | |
min-w-full | min-width: 100% | 最小宽度100% | |
max-w-{size} | max-width | 最大宽度 | |
max-w-screen-{bp} | max-width: breakpoint | 断点最大宽度 | |
h-{size} | height | 高度 | |
h-full | height: 100% | 全高 | |
h-screen | height: 100vh | 屏幕高度 | |
min-h-screen | min-height: 100vh | 最小屏幕高度 | |
max-h-{size} | max-height | 最大高度 | |
size-{size} | width + height | 同时设置宽高 |
#显示
| 类 | CSS | 说明 | |
|---|---|---|---|
block | display: block | 块级元素 | |
inline-block | display: inline-block | 行内块 | |
inline | display: inline | 行内元素 | |
flex | display: flex | Flex容器 | |
inline-flex | display: inline-flex | 行内Flex | |
grid | display: grid | Grid容器 | |
inline-grid | display: inline-grid | 行内Grid | |
hidden | display: none | 隐藏 | |
contents | display: contents | 仅内容 |
#Flexbox
| 类 | CSS | 说明 | |
|---|---|---|---|
flex-row | flex-direction: row | 水平方向 | |
flex-col | flex-direction: column | 垂直方向 | |
flex-row-reverse | flex-direction: row-reverse | 水平反向 | |
flex-col-reverse | flex-direction: column-reverse | 垂直反向 | |
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 | 禁止收缩 |
#对齐
| 类 | 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 | 自身终点 |
#Grid网格
| 类 | CSS | 说明 | |
|---|---|---|---|
grid-cols-{n} | grid-template-columns: repeat(n, 1fr) | n列 | |
grid-rows-{n} | grid-template-rows: repeat(n, 1fr) | n行 | |
col-span-{n} | grid-column: span n | 跨n列 | |
col-start-{n} | grid-column-start: n | 从第n列开始 | |
col-end-{n} | grid-column-end: n | 在第n列结束 | |
row-span-{n} | grid-row: span n | 跨n行 | |
row-start-{n} | grid-row-start: n | 从第n行开始 | |
row-end-{n} | grid-row-end: n | 在第n行结束 | |
auto-cols-auto | grid-auto-columns: auto | 自动列宽 | |
auto-cols-fr | grid-auto-columns: 1fr | 自动列1fr | |
auto-rows-auto | grid-auto-rows: auto | 自动行高 |
#定位
| 类 | CSS | 说明 | |
|---|---|---|---|
static | position: static | 静态定位 | |
relative | position: relative | 相对定位 | |
absolute | position: absolute | 绝对定位 | |
fixed | position: fixed | 固定定位 | |
sticky | position: sticky | 粘性定位 | |
top-{size} | top | 顶部偏移 | |
right-{size} | right | 右侧偏移 | |
bottom-{size} | bottom | 底部偏移 | |
left-{size} | left | 左侧偏移 | |
inset-{size} | top/right/bottom/left | 全方向偏移 | |
inset-x-{size} | left/right | 水平偏移 | |
inset-y-{size} | top/bottom | 垂直偏移 | |
z-{n} | z-index | Z轴顺序 | |
z-auto | z-index: auto | Z轴自动 |
#排版
| 类 | CSS | 说明 | |
|---|---|---|---|
font-sans | font-family: sans-serif | 无衬线字体 | |
font-serif | font-family: serif | 衬线字体 | |
font-mono | font-family: monospace | 等宽字体 | |
text-xs | font-size: 0.75rem | 超小文字 | |
text-sm | font-size: 0.875rem | 小文字 | |
text-base | font-size: 1rem | 基础文字 | |
text-lg | font-size: 1.125rem | 大文字 | |
text-xl | font-size: 1.25rem | 超大文字 | |
text-2xl ~ 9xl | font-size: 1.5rem ~ 8rem | 更大文字尺寸 | |
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 | 粗体 | |
italic | font-style: italic | 斜体 | |
not-italic | font-style: normal | 非斜体 | |
leading-{size} | line-height | 行高 | |
tracking-{size} | letter-spacing | 字间距 |
#文本对齐与装饰
| 类 | CSS | 说明 | |
|---|---|---|---|
text-left | text-align: left | 左对齐 | |
text-center | text-align: center | 居中对齐 | |
text-right | text-align: right | 右对齐 | |
text-justify | text-align: justify | 两端对齐 | |
underline | text-decoration: underline | 下划线 | |
line-through | text-decoration: line-through | 删除线 | |
no-underline | text-decoration: none | 无装饰 | |
uppercase | text-transform: uppercase | 大写 | |
lowercase | text-transform: lowercase | 小写 | |
capitalize | text-transform: capitalize | 首字母大写 | |
truncate | overflow: hidden; text-overflow: ellipsis | 省略号截断 | |
line-clamp-{n} | -webkit-line-clamp: n | 限制n行 | |
whitespace-nowrap | white-space: nowrap | 不换行 | |
break-words | word-wrap: break-word | 断词换行 |
#颜色
| 类 | CSS | 说明 | |
|---|---|---|---|
text-{color}-{shade} | color | 文字颜色 | |
bg-{color}-{shade} | background-color | 背景颜色 | |
bg-gradient-to-{dir} | background-image: linear-gradient | 渐变方向 | |
from-{color} | from color | 渐变起始色 | |
via-{color} | via color | 渐变中间色 | |
to-{color} | to color | 渐变结束色 | |
text-transparent | color: transparent | 透明文字 | |
bg-transparent | background-color: transparent | 透明背景 | |
text-current | color: currentColor | 继承当前颜色 |
#边框
| 类 | CSS | 说明 | |
|---|---|---|---|
border | border-width: 1px | 1px边框 | |
border-{n} | border-width: npx | n像素边框 | |
border-t/r/b/l-{n} | border-top/right/bottom/left-width | 单方向边框 | |
border-{color} | border-color | 边框颜色 | |
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 | 微圆角 | |
rounded-md | border-radius: 0.375rem | 中等圆角 | |
rounded-lg | border-radius: 0.5rem | 大圆角 | |
rounded-xl | border-radius: 0.75rem | 超大圆角 | |
rounded-full | border-radius: 9999px | 完全圆形 | |
rounded-none | border-radius: 0 | 无圆角 | |
rounded-t/r/b/l-{size} | border-radius (corners) | 特定圆角 |
#效果
| 类 | CSS | 说明 | |
|---|---|---|---|
shadow-sm | box-shadow: small | 小阴影 | |
shadow | box-shadow: default | 默认阴影 | |
shadow-md | box-shadow: medium | 中等阴影 | |
shadow-lg | box-shadow: large | 大阴影 | |
shadow-xl | box-shadow: extra large | 超大阴影 | |
shadow-2xl | box-shadow: 2x large | 最大阴影 | |
shadow-inner | box-shadow: inset | 内阴影 | |
shadow-none | box-shadow: none | 无阴影 | |
opacity-{n} | opacity: n% | 透明度（0-100） | |
blur | filter: blur(8px) | 模糊 | |
blur-{size} | filter: blur(size) | 模糊程度 | |
brightness-{n} | filter: brightness(n%) | 亮度 | |
contrast-{n} | filter: contrast(n%) | 对比度 | |
grayscale | filter: grayscale(100%) | 灰度 | |
invert | filter: invert(100%) | 反转 |
#过渡与动画
| 类 | CSS | 说明 | |
|---|---|---|---|
transition | transition-property: all | 默认过渡 | |
transition-all | transition-property: all | 全部属性过渡 | |
transition-colors | transition-property: colors | 颜色过渡 | |
transition-opacity | transition-property: opacity | 透明度过渡 | |
transition-transform | transition-property: transform | 变换过渡 | |
duration-{ms} | transition-duration: ms | 持续时间 | |
ease-linear | transition-timing: linear | 线性缓动 | |
ease-in | transition-timing: ease-in | 缓入 | |
ease-out | transition-timing: ease-out | 缓出 | |
ease-in-out | transition-timing: ease-in-out | 缓入缓出 | |
delay-{ms} | transition-delay: ms | 延迟 | |
animate-spin | animation: spin | 旋转动画 | |
animate-ping | animation: ping | 脉冲动画 | |
animate-pulse | animation: pulse | 呼吸动画 | |
animate-bounce | animation: bounce | 弹跳动画 |
#变换
| 类 | CSS | 说明 | |
|---|---|---|---|
scale-{n} | transform: scale(n) | 缩放 | |
scale-x-{n} | transform: scaleX(n) | 水平缩放 | |
scale-y-{n} | transform: scaleY(n) | 垂直缩放 | |
rotate-{deg} | transform: rotate(deg) | 旋转 | |
translate-x-{size} | transform: translateX | 水平移动 | |
translate-y-{size} | transform: translateY | 垂直移动 | |
skew-x-{deg} | transform: skewX(deg) | 水平倾斜 | |
skew-y-{deg} | transform: skewY(deg) | 垂直倾斜 | |
origin-center | transform-origin: center | 变换原点居中 | |
origin-top | transform-origin: top | 变换原点顶部 | |
origin-bottom | transform-origin: bottom | 变换原点底部 |
#溢出与其他
| 类 | CSS | 说明 | |
|---|---|---|---|
overflow-auto | overflow: auto | 必要时滚动 | |
overflow-hidden | overflow: hidden | 隐藏溢出 | |
overflow-scroll | overflow: scroll | 始终滚动 | |
overflow-visible | overflow: visible | 显示溢出 | |
overflow-x-{value} | overflow-x | 水平溢出 | |
overflow-y-{value} | overflow-y | 垂直溢出 | |
cursor-pointer | cursor: pointer | 指针光标 | |
cursor-not-allowed | cursor: not-allowed | 禁止光标 | |
pointer-events-none | pointer-events: none | 禁用指针事件 | |
select-none | user-select: none | 禁止选择 | |
select-text | user-select: text | 允许文本选择 | |
select-all | user-select: all | 点击全选 | |
sr-only | screen reader only | 仅屏幕阅读器 |
#颜色调色板
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}
#尺寸比例参考
| 类 | 值 | 类 | 值 |
|---|---|---|---|
| 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) |
#常见问题 (FAQ)
이 포스팅은 쿠팡 파트너스 활동의 일환으로, 이에 따른 일정액의 수수료를 제공받습니다.