Ctrl K
Tailwind 类名转换 · 使用说明
Tailwind 原子类与原始 CSS 双向互转：粘一串类名得到等价 CSS，或粘一段 CSS 反推出可用的类名。覆盖间距、圆角、字号、字重、行高、颜色、flex 与对齐、断点与状态变体等默认刻度，支持方括号任意值与多层变体前缀。反向转换不是拿数值除以 0.25 就完事：圆角、字号、行高各有独立的命名体系，工具按各自的对照表逐档反查，不会臆造出 Tailwind 里不存在的档位。转换在浏览器本地完成，类名不出设备。
示例
输入
md:flex flex-col gap-4 p-6 text-slate-700 rounded-lg
输出
@media (min-width:768px){.x{display:flex}}
.x{flex-direction:column;gap:1rem;padding:1.5rem;color:#334155;border-radius:.5rem}如何使用
- 在上方切换「类名 → CSS」或「CSS → 类名」两个方向
- 类名转 CSS 时直接粘空格分隔的类名，未识别的会单独列出而不是静默跳过
- CSS 转类名时粘贴一段样式声明，逐条反查对应类名
- 点「复制」拿走结果
小贴士
- 反向转换只覆盖高频声明，认不出的值会输出成 p-[13px] 这种任意值写法，而不是随便凑一个最近的刻度
- cssOf 只接受单个类名；整串类名请按空格粘贴，工具会逐个转换并分行输出
- 变体前缀支持断点、伪类、dark: 作用域与 prefers-reduced-motion，未知前缀会明确提示而不是静默通过
常见问题
为什么 border-radius: 0.5rem 转出来是 rounded-lg？
Tailwind 的圆角不是 0.25rem 步进，它有 sm .125 / md .375 / lg .5 / xl .75 / 2xl 1 / 3xl 1.5 这一套自己的档位。拿 0.5 除以 0.25 会得到 rounded-2，而 Tailwind 根本没有这一档，所以这里用独立的对照表查。
工具会上传我粘贴的类名吗？
不会。类名解析和 CSS 生成都在浏览器本地完成，没有网络请求，可以放心处理内部项目的样式片段。
支持 Tailwind v4 吗？
覆盖的是 v3 的默认刻度与变体。v4 的 CSS-first 写法（@theme、@utility）不在转换范围内，但原子类名本身大部分仍能识别。
转换结果能直接用吗？
作为起点没问题，但建议复核两点：一是反向转换只做模式匹配，不会理解选择器嵌套，同一段 CSS 里多个规则可能被合并成一份类名列表；二是任意值输出（方括号写法）需要你的构建环境支持。
和 <a class="faq-link" href="/tools/css-formatter/">CSS 格式化</a> 怎么配合？
先用本工具把样式反查成类名确认可维护性，再用 CSS 格式化整理原有文件，两个工具都纯本地，可以来回切换。