📐 布局 Layout
| 类别 |
常用类 |
说明 |
| 容器 |
container mx-auto px-4 |
居中容器 |
| 显示 |
block inline inline-block hidden flex grid table |
显示模式 |
| 定位 |
static relative absolute fixed sticky |
定位方式 |
| 层级 |
z-0 ~ z-50 |
z-index |
📊 Flexbox 弹性布局
| 属性 |
类名 |
示例 |
| 方向 |
flex-row flex-col flex-row-reverse |
主轴方向 |
| 换行 |
flex-wrap flex-nowrap flex-wrap-reverse |
是否换行 |
| 主轴对齐 |
justify-start center end between around evenly |
justify-content |
| 交叉轴对齐 |
items-start center end stretch baseline |
align-items |
| 自身对齐 |
self-auto self-start self-center self-end |
align-self |
| 伸缩 |
flex-1 flex-auto flex-initial flex-none |
flex属性 |
| 增长 |
grow grow-0 |
flex-grow |
| 收缩 |
shrink shrink-0 |
flex-shrink |
🔲 Grid 网格布局
| 属性 |
类名 |
示例 |
| 列数 |
grid-cols-1 ~ grid-cols-12 |
1-12列 |
| 行数 |
grid-rows-1 ~ grid-rows-6 |
1-6行 |
| 列宽 |
col-span-1 ~ col-span-full |
跨列 |
| 行高 |
row-span-1 ~ row-span-full |
跨行 |
| 起始列 |
col-start-1 ~ col-start-13 |
列起始线 |
| 起始行 |
row-start-1 ~ row-start-7 |
行起始线 |
| 间距 |
gap-0 ~ gap-96 gap-x-4 gap-y-2 |
网格间距 |
| 自动流 |
grid-flow-row grid-flow-col grid-flow-dense |
自动排列 |
📏 间距 Spacing
| 数值 |
尺寸 |
常用类 |
0 |
0px |
p-0 m-0 |
1 |
4px (0.25rem) |
p-1 m-1 gap-1 |
2 |
8px (0.5rem) |
p-2 m-2 |
4 |
16px (1rem) |
p-4 m-4 |
6 |
24px (1.5rem) |
p-6 m-6 |
8 |
32px (2rem) |
p-8 m-8 |
12 |
48px (3rem) |
p-12 |
16 |
64px (4rem) |
p-16 |
方向修饰：pt- pr- pb- pl- px- py-（padding 同理 margin: mt mr mb ml mx my）
📐 尺寸 Sizing
| 属性 |
类名 |
示例 |
| 宽度 |
w-0~w-96 w-full w-screen w-fit w-min w-max w-1/2 w-1/3 w-1/4 |
宽度 |
| 高度 |
h-0~h-96 h-full h-screen h-fit h-min h-max h-1/2 |
高度 |
| 最小宽 |
min-w-0 min-w-full min-w-fit min-w-min min-w-max |
min-width |
| 最大宽 |
max-w-0~max-w-7xl max-w-full max-w-none max-w-prose |
max-width |
| 最小高 |
min-h-0 min-h-full min-h-screen min-h-fit |
min-height |
| 最大高 |
max-h-0~max-h-96 max-h-full max-h-screen max-h-none |
max-height |
🎨 背景 Background
| 属性 |
类名 |
示例 |
| 颜色 |
bg-white bg-black bg-gray-500 bg-blue-600 bg-red-500 |
背景色 |
| 透明度 |
bg-opacity-0~bg-opacity-100 |
背景透明度 |
| 渐变 |
bg-gradient-to-t to-r to-b to-l to-tr to-tl to-br to-bl |
渐变方向 |
| 渐变色 |
from-blue-500 via-purple-500 to-pink-500 |
渐变色值 |
| 图片 |
bg-[url('/img.png')] |
背景图 |
| 大小 |
bg-auto bg-cover bg-contain |
背景尺寸 |
| 位置 |
bg-center bg-top bg-bottom bg-left bg-right |
背景位置 |
| 重复 |
bg-repeat bg-no-repeat bg-repeat-x bg-repeat-y |
背景重复 |
✏️ 文字 Typography
| 属性 |
类名 |
示例 |
| 大小 |
text-xs text-sm text-base text-lg text-xl text-2xl~text-9xl |
字体大小 |
| 字重 |
font-thin font-light font-normal font-medium font-semibold font-bold font-black |
粗细 |
| 颜色 |
text-white text-black text-gray-500 text-blue-600 |
文字颜色 |
| 对齐 |
text-left text-center text-right text-justify |
对齐方式 |
| 行高 |
leading-3~leading-10 leading-none leading-tight leading-snug leading-normal leading-relaxed leading-loose |
行高 |
| 字间距 |
tracking-tighter tracking-tight tracking-normal tracking-wide tracking-wider tracking-widest |
字间距 |
| 装饰 |
underline line-through no-underline |
装饰线 |
| 转换 |
uppercase lowercase capitalize normal-case |
大小写 |
| 截断 |
truncate text-ellipsis text-clip |
溢出处理 |
| 换行 |
break-normal break-words break-all break-keep |
换行方式 |
🎯 边框 Border
| 属性 |
类名 |
示例 |
| 宽度 |
border-0 border-2 border-4 border-8 border |
边框宽度 |
| 颜色 |
border-white border-gray-300 border-blue-500 |
边框颜色 |
| 样式 |
border-solid border-dashed border-dotted border-double border-none |
边框样式 |
| 圆角 |
rounded-none rounded-sm rounded rounded-md rounded-lg rounded-xl rounded-2xl rounded-3xl rounded-full |
圆角大小 |
| 单边圆角 |
rounded-t-lg rounded-r-lg rounded-b-lg rounded-l-lg rounded-tl-lg rounded-tr-lg rounded-bl-lg rounded-br-lg |
单边圆角 |
💫 效果 Effects
| 属性 |
类名 |
示例 |
| 阴影 |
shadow-sm shadow shadow-md shadow-lg shadow-xl shadow-2xl shadow-none shadow-inner |
盒子阴影 |
| 透明度 |
opacity-0~opacity-100 |
透明度 |
| 混合模式 |
mix-blend-normal multiply screen overlay darken lighten color-dodge color-burn hard-light soft-light difference exclusion hue saturation color luminosity |
混合模式 |
| 滤镜 |
blur-none blur-sm blur blur-md blur-lg blur-xl blur-2xl blur-3xl |
模糊 |
| 亮度 |
brightness-0~brightness-200 |
亮度 |
| 对比度 |
contrast-0~contrast-200 |
对比度 |
| 灰度 |
grayscale grayscale-0 |
灰度 |
| 色相旋转 |
hue-rotate-0~hue-rotate-180 |
色相旋转 |
| 反色 |
invert invert-0 |
反色 |
| 饱和度 |
saturate-0~saturate-200 |
饱和度 |
| 深褐色 |
sepia sepia-0 |
深褐色 |
| 属性 |
类名 |
示例 |
| 启用 |
transform transform-cpu transform-gpu transform-none |
启用变换 |
| 缩放 |
scale-0~scale-150 scale-x-50 scale-y-150 |
缩放 |
| 旋转 |
rotate-0~rotate-180 rotate-45 rotate-90 -rotate-45 |
旋转 |
| 平移 |
translate-x-0~translate-x-full translate-y-4 -translate-x-2 |
平移 |
| 倾斜 |
skew-x-0~skew-x-12 skew-y-6 -skew-x-3 |
倾斜 |
| 原点 |
origin-center origin-top origin-top-right origin-right origin-bottom-right origin-bottom origin-bottom-left origin-left origin-top-left |
变换原点 |
🎬 过渡与动画
| 属性 |
类名 |
示例 |
| 过渡 |
transition-none transition-all transition-colors transition-opacity transition-shadow transition-transform |
过渡属性 |
| 时长 |
duration-0~duration-1000 duration-75 duration-100 duration-150 duration-200 duration-300 duration-500 duration-700 |
过渡时长 |
| 缓动 |
ease-linear ease-in ease-out ease-in-out |
缓动函数 |
| 延迟 |
delay-0~delay-1000 delay-75 delay-100 delay-150 delay-200 delay-300 delay-500 delay-700 |
延迟时间 |
| 动画 |
animate-none animate-spin animate-ping animate-pulse animate-bounce |
预设动画 |
📱 响应式断点
| 断点 |
前缀 |
宽度 |
CSS |
| 默认 |
无 |
< 640px |
- |
| sm |
sm: |
≥ 640px |
@media (min-width: 640px) |
| md |
md: |
≥ 768px |
@media (min-width: 768px) |
| lg |
lg: |
≥ 1024px |
@media (min-width: 1024px) |
| xl |
xl: |
≥ 1280px |
@media (min-width: 1280px) |
| 2xl |
2xl: |
≥ 1536px |
@media (min-width: 1536px) |
用法示例：md:flex lg:grid-cols-4 xl:text-xl
🎨 颜色体系
Tailwind 提供 22种颜色，每种颜色 11个色阶（50-950）：
| 颜色名 |
示例 |
| 灰度 |
slate gray zinc neutral stone |
| 彩色 |
red orange amber yellow lime green emerald teal cyan sky blue indigo violet purple fuchsia pink rose |
色阶：50 100 200 300 400 500 600 700 800 900 950
示例：bg-blue-500 text-red-600 border-green-400
🛠️ 状态修饰符
| 修饰符 |
说明 |
示例 |
hover: |
鼠标悬停 |
hover:bg-blue-600 |
focus: |
获得焦点 |
focus:ring-2 |
active: |
激活状态 |
active:bg-blue-700 |
disabled: |
禁用状态 |
disabled:opacity-50 |
first: |
第一个子元素 |
first:mt-0 |
last: |
最后一个子元素 |
last:mb-0 |
odd: |
奇数项 |
odd:bg-gray-100 |
even: |
偶数项 |
even:bg-white |
group-hover: |
父元素悬停 |
group-hover:visible |
peer-focus: |
兄弟元素焦点 |
peer-focus:ring-2 |
🔧 实用工具
| 类别 |
类名 |
说明 |
| 光标 |
cursor-auto default pointer wait text move not-allowed |
鼠标样式 |
| 选择 |
select-none text all auto |
文本选择 |
| 指针事件 |
pointer-events-none auto |
指针事件 |
| 可见性 |
visible invisible collapse |
可见性 |
| 溢出 |
overflow-auto hidden visible scroll overflow-x-auto overflow-y-hidden |
溢出处理 |
| 滚动行为 |
scroll-auto scroll-smooth |
滚动行为 |
| 调整大小 |
resize-none resize resize-y resize-x |
调整大小 |
| 外观 |
appearance-none |
移除默认样式 |
📋 快速记忆口诀
布局：container flex grid relative absolute
尺寸：w-full h-screen min-w-0 max-w-7xl
间距：p-4 m-2 px-6 my-8 gap-4
颜色：bg-blue-500 text-white border-gray-300
文字：text-lg font-bold text-center leading-relaxed
边框：rounded-lg border-2 border-solid
效果：shadow-lg opacity-75 blur-md
变换：scale-110 rotate-45 translate-x-4
动画：transition duration-300 ease-in-out hover:scale-105
响应：sm: md: lg: xl: 2xl:
如需 PDF 版本 或 特定分类的详细展开，告诉我！