🎨 前端开发
Tailwind CSS
Tailwind CSS Cheat Sheet - 快速参考指南，收录常用语法、命令与实践。
📂 分类 · 前端开发🧭 Markdown 速查🏷️ 2 个标签
#tailwind#css
向下滚动查看内容
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 快速模板
HTML
滚动查看更多
<!-- 水平分布 -->
<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