Tailwind CSS Cheat Sheet

实用的 Tailwind CSS 常用类速查，覆盖布局、排版、颜色与交互状态，便于快速取用。

v4.x 新特性速览

• text-shadow-2xs～text-shadow-lg：新增文本阴影等级，快速做立体字
• mask-*：CSS mask 工具类，可用图片或渐变做不规则遮罩
• 主题色彩投影：drop-shadow-indigo-500 等彩色阴影
• 设备/脚本变体：pointer-coarse:、any-pointer-none:、noscript: 覆盖无 JS 场景
• CSS-first 配置：用 @theme 在 CSS 内扩展主题，多数场景无需单独 content 扫描配置
• 新引擎支持容器查询、P3 色彩、原生 CSS 变量，构建更快（Rust 重写）

布局与容器

• container mx-auto px-4：自适应容器 + 水平内边距
• flex items-center justify-between：水平排列，垂直居中，两端对齐
• grid grid-cols-3 gap-4：三列网格，统一间距
• hidden md:block：在中屏以上显示，在小屏隐藏
• w-full max-w-3xl：宽度 100%，最大宽度限制
• min-h-screen：最小高度占满视窗

间距与圆角

• p-4 / px-6 / py-2：内边距
• m-4 / mt-2 / mb-6：外边距
• space-y-3：同级纵向间距；space-x-2：横向间距
• gap-3：网格/弹性布局间距
• rounded / rounded-lg / rounded-full：圆角等级

文本与排版

• text-sm / text-base / text-xl / text-3xl：字号
• font-medium / font-semibold / font-bold：字重
• text-gray-500 / text-slate-700 / text-white：文本色
• leading-tight / tracking-wide：行高 / 字距
• text-center / text-left：对齐方式

颜色与背景

• bg-slate-900 text-white：深色背景 + 白字
• bg-white/80 backdrop-blur：半透明背景 + 毛玻璃
• bg-gradient-to-r from-indigo-500 via-sky-500 to-emerald-400：渐变背景
• border border-slate-200：细边框
• shadow / shadow-lg / shadow-xl：阴影强度

文本与视觉特效补充

• text-shadow-sm / text-shadow-md / text-shadow-lg：轻量到强烈的文字阴影
• drop-shadow-sm / drop-shadow-lg / drop-shadow-indigo-500：普通与彩色投影
• mask-[url('/mask.svg')] / mask-[radial-gradient(circle,white,transparent)]：图片或渐变遮罩
• mix-blend-multiply / bg-blend-screen：混合模式
• backdrop-blur-sm / backdrop-brightness-75：背景滤镜（玻璃态）

按钮与交互

• transition hover:-translate-y-0.5 hover:shadow-lg：悬停提升
• hover:bg-slate-900 hover:text-white：悬停色
• focus:outline-none focus:ring-2 focus:ring-sky-400：焦点态描边
• active:scale-95：按下缩放
• pointer-coarse:hover:bg-slate-100：仅在触屏等粗指针设备触发
• noscript:bg-amber-50 text-amber-900：无 JS 环境下的降级样式

尺寸与显示

• h-10 / h-12：固定高度
• aspect-square：正方形
• overflow-hidden：隐藏溢出
• object-cover：图片裁剪填充

定位

• relative / absolute / fixed / sticky top-0：定位模式
• inset-0：全覆盖
• z-10 / z-50：层级

Flex 与 Grid 快速模板

<!-- 水平分布 -->
<div class="flex items-center justify-between gap-4">
	<span>Logo</span>
	<div class="flex items-center gap-2">
		<button
			class="px-3 py-2 rounded-lg bg-slate-900 text-white hover:-translate-y-0.5 transition"
		>
			Action
		</button>
	</div>
</div>

<!-- 自适应网格 -->
<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4">
	<div class="p-4 rounded-xl border border-slate-200 shadow-sm">Card</div>
</div>

常用颜色参考

• 主色：sky-500、blue-600、emerald-500
• 中性色：slate-700、gray-500、zinc-200
• 背景：slate-900、white、white/70 + backdrop-blur

配置与技巧

• 自定义主题：在 tailwind.config.js 中扩展 colors、spacing、boxShadow
• JIT 提示：类名不生效时确认已在 content 路径中
• 响应式顺序：sm < md < lg < xl < 2xl
• 状态前缀：hover:、focus:、active:、disabled:、group-hover:
• CSS-first：在引入 Tailwind 的 CSS 内使用 @theme 编写主题令牌
• 容器查询：为需要响应父容器宽度的模块添加 @container / container-type: inline-size