CSS
padding-left: 32px;
Tailwind
pl-8
设计配色
CSS 转 Tailwind - 声明映射工具
将单块 CSS 声明尽量映射为 Tailwind 工具类，常见布局、间距与颜色可匹配到标准类，复杂值会退回任意值写法，适合把样例样式迁到 utility-first。
CSSTailwind转换
设计配色
CSS 转 Tailwind
1. 粘贴对象 / 类 CSS 0 条声明
2. Tailwind 类名
映射能力边界
用正则启发式匹配 CSS 键值到最接近的 Tailwind 工具类。复杂规则（如 `calc()`、多层背景）会回退为任意值（如 `bg-[url(...)]`）或标记为未映射。适合简单布局声明。
使用场景
- 把示例 CSS 改成 Tailwind 类
- 整理设计稿导出的声明式样式
- 查看无法映射而落到任意值的规则
如何使用
- 粘贴 CSS 声明列表
- 查看生成的类名与未映射项
- 复制生成的类名结果
示例输入输出
FAQ
支持 @media 吗？
侧重单层声明转换，不完整处理媒体查询与复杂选择器嵌套。
找不到对应类会怎样？
会尽量写成任意值形式，例如 bg-[#ff0000]，并在跳过列表中提示。
工具列表
相关推荐
你可以从这里继续打开相近场景的工具，减少重复搜索。
HTML 转 JSX
HTML 转 JSX - React 属性转换工具
在线将 HTML 转为 React JSX，自动把 class、for 改为 className、htmlFor，补齐自闭合标签，并尽量把内联 style 转为对象写法，转换在浏览器本地完成。
HTML JSX React
Tailwind 50-950 全色谱
无需文档的大局级颜色搜索板
一张表看完！极其丝滑宏大的 Tailwind CSS 全线色彩面板（由 Slate 一直到 Rose，含 950 黑阶）。不再每次都需要跑回官网查 "emerald-400 的对撞色是多少"。
Design Tailwind CSS
Tailwind 网格
Tailwind 网格布局 - class 生成工具
按列数、间距与项目数量生成 Tailwind Grid class 并实时预览，适合快速搭建卡片网格、原型布局与响应式列数实验。
Tailwind Grid 布局