🎨 前端开发

Tailwind CSS

Tailwind CSS Cheat Sheet - 快速参考指南，收录常用语法、命令与实践。

📂 分类 · 前端开发🧭 Markdown 速查🏷️ 2 个标签

#tailwind#css

向下滚动查看内容

返回全部 Cheat Sheets

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

相关 Cheat Sheets

1v1免费职业咨询

We Accept

Top Categories

Web全栈班 DevOps项目班数据工程全栈班数据分析项目班编程入门班 Business Analyst实习算法集训营

求职就业

BA和产品经理实习数据科学实习数据分析实习 Marketing实习简历修改面试指导导师指导VIP

地址

Level 10b, 144 Edward Street, Brisbane CBD(Headquarter)

Level 2, 171 La Trobe St, Melbourne VIC 3000

四川省成都市武侯区桂溪街道天府大道中段500号D5东方希望天祥广场B座45A13号

Business Hub, 155 Waymouth St, Adelaide SA 5000

联系方式

hello@jiangren.com.au 0421-672-555

Disclaimer

JR Academy acknowledges Traditional Owners of Country throughout Australia and recognises the continuing connection to lands, waters and communities. We pay our respect to Aboriginal and Torres Strait Islander cultures; and to Elders past and present. Aboriginal and Torres Strait Islander peoples should be aware that this website may contain images or names of people who have since passed away.

ABN 26621887572