Tailwind 类名速查器
输入想要的效果（如 间距、圆角、居中），即时看到每个 Tailwind 原子类 的真实渲染示例、对应像素值与任意值写法，点类名即可复制。
没有匹配的类名，换个关键词试试，例如「padding」「渐变」「截断」。
任意值（Arbitrary Values）写法
预设刻度不够用时，用 方括号 [ ] 直接写任意 CSS 值，Tailwind 编译时原样生成：
| 写法 | 等价 CSS | 说明 |
|---|---|---|
w-[350px] | width: 350px | 任意宽度，超出预设刻度 |
text-[13px] | font-size: 13px | 任意字号 |
bg-[#123456] | background: #123456 | 任意颜色，色值里不要有空格 |
mt-[2.125rem] | margin-top: 2.125rem | 任意间距 |
top-[-20px] | top: -20px | 负值加方括号，不用写 -top-20 |
grid-cols-[1fr_200px] | grid-template-columns: 1fr 200px | 空格用下划线 _ 代替 |
响应式前缀怎么用
前缀表示「达到该断点宽度时生效」，默认移动优先，从左往右逐级覆盖。下面示例在窗口宽度 ≥768px 时自动变为横向排列：
| 前缀 | 断点 | 最小宽度 |
|---|---|---|
sm: | Small | 640px |
md: | Medium | 768px |
lg: | Large | 1024px |
xl: | Extra Large | 1280px |
2xl: | 2X Large | 1536px |
flex-col（默认竖排）md:flex-row（≥768px 横排）
间距刻度尺（自绘 SVG）
Tailwind 间距刻度以 0.25rem 为一档，下图按像素等比例绘制：条形右侧是实际像素值，左侧是类名后缀（如 p-4 取后缀 4）。
※ 特殊值：p-px = 1px、p-0 = 0；3.5 = 14px、2.5 = 10px，其余按 4px 递增。
收藏与对比
收藏 0 个点卡片右上角 ☆ 收藏（保存在本机浏览器，刷新不丢）；点「对比」把类加入下方对比栏，最多 3 个，逐项对照 CSS 等价写法。
还没有加入对比的类名。搜索后在卡片上点「对比」。
方案管理 · 数值对比 · 导出
调好的参数可存成方案随时载入，也能生成可分享链接；结果里的数值列会自动画成对比图，并支持导出 CSV / JSON。
还没有留言，来抢沙发吧！