| Class | CSS | 说明 |
|---|---|---|
block |
display: block; |
块级元素 |
inline |
display: inline; |
行内元素 |
flex |
display: flex; |
弹性盒布局 |
inline-flex |
display: inline-flex; |
行内弹性盒 |
grid |
display: grid; |
网格布局 |
hidden |
display: none; |
隐藏元素 |
flex-col |
flex-direction: column; |
主轴垂直 |
items-center |
align-items: center; |
交叉轴居中 |
justify-between |
justify-content: space-between; |
主轴两端对齐 |
gap-4 |
gap: 1rem; |
子元素间距 |
h-screen |
height: 100vh; |
高度为视口高度 |
min-h-screen |
min-height: 100vh; |
最小高度为视口高度 |
w-full |
width: 100%; |
宽度 100% |
max-w-screen-lg |
max-width: breakpoint; |
最大宽度（lg 断点） |
overflow-hidden |
overflow: hidden; |
隐藏溢出内容 |
overflow-x-auto |
overflow-x: auto; |
横向滚动 |
scroll-smooth |
scroll-behavior: smooth; |
平滑滚动 |
sticky + top-0 |
position: sticky; top: 0; |
吸顶元素 |
z-50 |
z-index: 50; |
层级提升 |
| Class | CSS | 说明 |
|---|---|---|
p-4 |
padding: 1rem; |
内边距 |
px-6 |
padding-left/right: 1.5rem; |
水平内边距 |
py-2 |
padding-top/bottom: 0.5rem; |
垂直内边距 |
m-4 |
margin: 1rem; |
外边距 |
-mx-2 |
margin-left/right: -0.5rem; |
负外边距 |
space-y-2 |
margin-top: 0.5rem; between children |
垂直子元素间距 |
container |
max-width + padding |
响应式容器 |
mx-auto |
margin-left/right: auto; |
水平居中 |
| Class | CSS | 说明 |
|---|---|---|
w-full |
width: 100%; |
占满父元素宽度 |
w-[200px] |
width: 200px; |
自定义宽度 |
h-[50vh] |
height: 50vh; |
自定义视口高度 |
max-w-screen-md |
max-width: 768px; |
最大宽度（md 断点） |
aspect-square |
aspect-ratio: 1/1; |
正方形 |
aspect-video |
aspect-ratio: 16/9; |
视频比例 |
| Class | CSS | 说明 |
|---|---|---|
text-sm |
font-size: 0.875rem; |
小号文本 |
text-xl |
font-size: 1.25rem; |
大号文本 |
text-4xl |
font-size: 2.25rem; |
特大号标题 |
font-bold |
font-weight: 700; |
加粗 |
tracking-tight |
letter-spacing: -0.015em; |
紧字距 |
leading-snug |
line-height: 1.375; |
行高适中 |
truncate |
overflow: hidden; text-overflow: ellipsis; white-space: nowrap; |
单行省略 |
line-clamp-3 |
display: -webkit-box; + 限高 |
多行省略（需插件） |
| Class | CSS | 说明 |
|---|---|---|
bg-white |
background-color: white; |
背景白 |
text-black |
color: black; |
文本黑 |
bg-gray-100 |
background-color: #f5f5f5; |
浅灰背景 |
text-blue-600 |
color: #2563eb; |
蓝色文本 |
hover:bg-red-600 |
on hover | 悬停时背景变红 |
dark:bg-black |
dark mode 时背景黑 |
夜间模式支持 |
dark:hover:bg-gray-900 |
dark + hover | 夜间悬停变色 |
| Class | CSS | 说明 |
|---|---|---|
rounded |
border-radius: 0.25rem; |
默认圆角 |
rounded-lg |
border-radius: 0.5rem; |
大圆角 |
rounded-full |
border-radius: 9999px; |
完全圆角 |
border |
border-width: 1px; |
默认边框 |
border-2 |
border-width: 2px; |
粗边框 |
border-t-4 |
border-top-width: 4px; |
顶部边框加粗 |
border-gray-300 |
border-color: #d1d5db; |
浅灰边框 |
shadow |
box-shadow: sm |
默认阴影 |
shadow-md |
box-shadow: md |
中等阴影 |
shadow-lg |
box-shadow: lg |
大阴影 |
| 类名前缀 | 含义 | 示例 |
|---|---|---|
sm: |
≥640px | sm:flex |
md: |
≥768px | md:grid |
lg: |
≥1024px | lg:block |
xl: |
≥1280px | xl:hidden |
2xl: |
≥1536px | 2xl:text-lg |
hover: |
悬停状态 | hover:text-blue-600 |
focus: |
聚焦状态 | focus:ring-2 |
active: |
激活状态 | active:opacity-80 |
dark: |
夜间模式 | dark:bg-black |
md:dark: |
响应式 + 夜间模式组合 | md:dark:text-white |
hover:dark: |
悬停 + 夜间模式组合 | hover:dark:bg-neutral-800 |
| 写法 | CSS 示例 | 说明 |
|---|---|---|
w-[40%] |
width: 40%; |
百分比宽度 |
h-[calc(100vh-64px)] |
height: calc(...) |
计算高度 |
bg-[rgb(0,0,0)] |
background-color: rgb(...) |
自定义颜色 |
text-[length:13px] |
font-size: 13px; |
精确字号 |
[disabled]:opacity-50 |
disabled 状态下透明度 |
属性变体支持 |
[aria-current="page"]:text-blue-600 |
当前项高亮 | ARIA 属性变体 |
| --- | --- | --- |
| --- | --- | --- |