TAILWIND CLASSES
Tailwind CSS 速查
全 class 索引
第一节
关于本工具
About在 Tailwind 项目里，记不清 `text-gray-500` 还是 `text-slate-500` 是常见卡顿——每次切文档查色阶或断点前缀，都会打断写样式的节奏。这个工具把全量 class 按类别（布局、间距、排版、颜色等）索引，输入关键词即时过滤，并附带实时 CSS 预览。页面所有计算在浏览器本地完成，class 数据不离开设备，适合频繁对照文档、刚迁移到原子化 CSS 的开发者使用。
使用场景
原型验收改色值
设计师交付的 Figma 原型标注了 #2563EB，但开发环境用的是 Tailwind 的 blue-600。前端在验收时发现主色调偏暗，想换 blue-500 又怕其他组件不一致。打开本工具直接搜「blue-500」，一秒看到色值 #3B82F6 和所有关联的 hover、border、bg 变体，当场确认替换后全局统一，不用翻文档逐条核对。
深夜搬砖调响应式
凌晨两点赶项目上线，导航栏在小屏上把 Logo 挤变形了。记得 Tailwind 有 `hidden md:flex` 这类断点组合，但记不清 `lg:` 和 `xl:` 哪个先生效。打开本工具输入「响应式断点」，直接看到 sm/md/lg/xl/2xl 的像素阈值和优先级顺序，对照着把 `md:flex lg:hidden` 写对，三分钟搞定布局。
接手旧项目查别名
接手的 Vue 项目里有人写了 `class="p-4.5"`，但 Tailwind 官方只有 `p-4` 和 `p-5`，怀疑是自定义配置。打开本工具搜「p-4」，显示标准间距 1rem（16px），再搜「p-5」是 1.25rem（20px），确认 4.5 不是原生值。用工具里的「间距对照表」定位到自定义配置里 `4.5: 1.125rem`，快速补齐文档注释。
UI 走查标颜色差异
测试反馈「按钮和卡片标题的灰色不一样」，开发坚持用的都是 `text-gray-500`。打开本工具输入「gray-500」，显示色值 #6B7280，再输「gray-600」是 #4B5563。截图对比发现标题实际是 gray-600，因为某个组件覆盖了默认色。工具实时预览色块，直接截给开发看，省去来回截图标注的沟通成本。
写文档查变体速记
写组件库文档时需要列出 `hover:bg-blue-100` 和 `focus:ring-2` 的完整写法，但 `group-hover`、`peer-focus` 这类复合变体总记混。打开本工具搜「伪类变体」，看到按「交互状态」「子元素」「兄弟元素」分组的完整列表，直接复制 `group-hover:opacity-75` 到文档里，不用切回项目试错。
第二节
使用指南
Getting Started使用步骤
- 1在搜索框输入 Tailwind class 名称（如 `flex` 或 `mt-4`），下方列表即时过滤匹配的 class，无需回车
- 2点击任一 class 行，右侧预览区同步渲染该 class 的样式效果（如边距、颜色、布局变化）
- 3将鼠标悬停在 class 行上，弹出工具提示显示其完整的 CSS 属性值（如 `margin-top: 1rem`）
- 4点击 class 行末尾的复制图标，该 class 名称自动写入剪贴板，可直接粘贴到项目代码中
输入输出示例
| 输入 | 输出 | 说明 |
|---|---|---|
| bg-red-500 | background-color: #ef4444; | 常规：最常用的颜色类，验证基础颜色映射是否准确 |
| text-center | text-align: center; | 常规：常用文本对齐类，验证布局类输出完整性 |
| p-4 | padding: 1rem; | 常规：间距类典型值，验证 rem 换算是否正确 |
| w-0.5 | width: 0.125rem; | 边界：小数宽度值，验证非整数 rem 计算精度 |
| z-50 | z-index: 50; | 边界：z-index 最大值，验证层级类范围覆盖 |
| opacity-0 | opacity: 0; | 边界：零透明度，验证边界值是否被正确映射（非空或错误） |
| hidden | display: none; | 易错：无数字后缀的类名，验证纯单词类是否被索引 |
| grid-cols-3 | grid-template-columns: repeat(3, minmax(0, 1fr)); | 易错：带函数的复杂值，验证输出是否完整包含 repeat/minmax 等函数 |
常见错误对照
1.类名拼写少连字符，导致样式不生效
✗ 错误
flexcol✓ 修复
flex-colTailwind 用连字符分隔属性和值，flex-col 是 flex-direction: column 的简写，去掉连字符变成 flexcol 会被当作自定义类名，除非在配置里显式定义，否则无样式。
2.响应式前缀顺序写反，断点不匹配
✗ 错误
lg:md:text-center✓ 修复
md:lg:text-center 或只用 md:text-center lg:text-centerTailwind 响应式前缀是单一断点，不能叠加。lg:md: 会被解析为 lg 断点下的 md: 类，实际只应用 lg 断点，md 断点被忽略。正确做法是每个断点单独写一个类。
3.颜色值用驼峰写法，未被识别
✗ 错误
bg-blueGray-500✓ 修复
bg-slate-500 或 bg-gray-500（取决于 Tailwind 版本）Tailwind 3.x 将 blueGray 等旧颜色名改为 slate/gray/zinc/neutral/stone，驼峰写法 blueGray 在 v3 中不存在。应使用官方色板中的连字符命名，如 slate-500。
4.间距单位误用 px 而非 rem，导致响应失效
✗ 错误
p-16px✓ 修复
p-4Tailwind 间距类使用 rem 单位（1 = 0.25rem ≈ 4px），p-4 等于 padding: 1rem。p-16px 不是合法类名，会被忽略。若需固定 px，应使用任意值语法 p-[16px]。
5.伪类变体写错位置，放在类名中间
✗ 错误
hover:bg-blue-500 focus:ring✓ 修复
hover:bg-blue-500 focus:ring-2变体前缀必须写在类名最前面，且每个变体对应一个完整类。hover:bg-blue-500 正确，但 hover:bg-blue-500 focus:ring 中 focus:ring 缺少值（ring 需要 ring-width），应写 focus:ring-2。
6.暗黑模式类名用 dark: 但未启用 darkMode
✗ 错误
dark:bg-black✓ 修复
dark:bg-black（需在 tailwind.config.js 设置 darkMode: 'class' 或 'media'）dark: 变体默认不生效，必须在配置中显式启用 darkMode。若不配置，dark:bg-black 会被 Tailwind 忽略，不会生成任何 CSS。
7.自定义类名与 Tailwind 内置类名冲突
✗ 错误
class="text-center my-custom"✓ 修复
class="text-center my-custom-style"Tailwind 内置 text-center 是有效类，但若自定义 CSS 里也定义了 .text-center，会覆盖 Tailwind 样式。应避免使用与内置类同名的自定义类，或用前缀区分。
8.任意值语法漏写方括号，变成字符串
✗ 错误
w-100px✓ 修复
w-[100px]Tailwind 任意值语法必须用方括号包裹，w-[100px] 生成 width: 100px。w-100px 会被当作不存在的类名忽略，因为 Tailwind 没有 w-100px 这个预设类。
第三节
工作原理
How It Works核心公式
class = 属性名-值
变量说明
属性名CSS 属性缩写，如 m(margin)值数值+单位缩写，如 4(1rem)
示例
要设置 margin-left: 1rem，对应 class 为 ml-4：属性名 ml 表示 margin-left，值 4 表示 1rem（Tailwind 默认 1 单位 = 0.25rem）。
用户交互
本地索引处理
匹配输出
第五节
常见问题
Q & A问这个速查表是离线就能用吗？我断网了还能查 class 吗？＋
答
可以。本工具纯前端实现，所有 class 索引和预览逻辑都在浏览器本地运行，首次加载后断网也能正常搜索和预览。不需要联网请求后端接口，所以访问速度和你的网络无关，完全离线可用。
问我只记得一个 class 大概叫 `flex` 开头但后面忘了，能模糊搜吗？＋
答
支持模糊搜索。在搜索框输入部分关键词（如 `flex` 或 `flex-c`）即可实时匹配所有包含该片段的 class，并高亮显示匹配位置。不用拼写完整类名，也不用记全称。
问为什么我搜 `bg-red-500` 出来的预览颜色和我实际页面上不一样？＋
答
预览区颜色基于 Tailwind 官方默认色板，`bg-red-500` 对应的十六进制值是 `#ef4444`。如果你项目中自定义了主题色（如 `tailwind.config.js` 里改过 `red` 色阶），实际渲染颜色就会不同。本工具显示的是默认色板，不是你的自定义配置。
问这个速查表包含 Tailwind v4 的 class 吗？我项目升到 v4 了有些类名找不到了。＋
答
当前版本索引的是 Tailwind CSS v3.x 的完整 class 列表。v4 做了大幅简化（如移除了 `space-x-*`、`divide-x-*` 等），部分类名和写法有变更。如果你用 v4，建议直接查官方文档，本工具暂未更新 v4 语法。
问我搜 `shadow` 出来一堆结果，怎么快速找到带 `lg` 的那个？＋
答
搜索框支持精确匹配。在关键词前后加双引号（如 `"shadow-lg"`）即可只显示完全匹配的 class，过滤掉 `shadow-sm`、`shadow-md` 等。另外也可以先输入 `shadow`，再在结果列表里按字母顺序或尺寸大小排序（点击表头即可）。
问这个工具和 Tailwind 官方文档的速查表有什么区别？＋
答
官方文档的速查表是按分类（Flexbox、Grid、Spacing 等）分页展示，且需要滚动浏览。本工具把所有 class 放在一个页面，支持实时搜索和预览，不用切页面。另外本工具每个 class 都附带一个预览小方块，能直接看到颜色、阴影、圆角等视觉效果，官方文档需要点进详情页才能看到。
问我搜 `p-4` 出来预览是个灰色方块，但实际页面上是透明背景，为什么预览有底色？＋
答
预览区域为了展示 `padding` 效果，默认给了一个浅灰色背景（`bg-gray-100`），这样 `p-4` 的白色内边距区域才能和背景区分开。实际项目里 `p-4` 本身不设背景色，预览的灰色只是辅助视觉参考，不影响 class 实际行为。
问搜索结果里有些 class 带 `hover:` 或 `dark:` 前缀，预览能看效果吗？＋
答
目前预览只展示基础状态（无伪类或媒体查询）。带 `hover:`、`focus:`、`dark:` 等前缀的 class，预览区会显示其基础值（即 `hover:bg-blue-500` 会显示 `bg-blue-500` 的颜色）。要查看交互态效果，需要在实际项目中测试。
问我复制了一个 class 名，但粘贴到编辑器里发现少了个冒号，怎么回事？＋
答
本工具的复制按钮会直接复制完整的 class 字符串（如 `md:flex-row`），不会丢失冒号。如果你手动选中文本复制时漏了冒号，建议点击 class 右侧的「复制」图标按钮，它会自动复制正确的完整类名，避免手选遗漏。
问搜 `transition` 出来的 class 太多，我只想看有 `duration` 的，能筛选吗？＋
答
当前版本不支持按 CSS 属性（如 `duration`、`delay`）筛选，但你可以组合搜索。比如搜 `transition duration`，工具会同时匹配包含这两个关键词的 class，结果会显著减少。如果你需要更精细的筛选，建议结合分类标签（如「Animation」）和关键词一起使用。
隐私保证所有计算与处理均在你的浏览器本地完成，输入数据不会上传服务器，也不会保存或共享。