CSS to Tailwind

CSS 转 Tailwind 转换器将标准 CSS 样式规则转换为对应的 Tailwind CSS 类名组合。工具解析输入的 CSS 属性和值，通过 CSS 属性到 Tailwind 类名的映射表查找最佳匹配。支持的转换包括：布局（display、flex、grid、position）、间距（margin、padding、gap）、尺寸（width、height）、排版（font-size、font-weight、text-align、line-height、letter-spacing）、颜色（color、background-color、border-color）、边框（border、border-radius）、阴影、透明度等。对于无法直接映射的复杂 CSS（如动画 keyframes），工具会保留原始值并添加备注。

CSS 转 Tailwind 在迁移项目时非常实用。将现有网站或组件库从传统 CSS 迁移到 Tailwind CSS 时，手动逐行转换非常耗时，此工具可以批量自动转换大部分样式规则。在阅读带有大量内联样式的 HTML（如邮件模板或设计工具导出代码）时，转换器可以快速给出 Tailwind 等效类名。团队从 CSS Modules 或 styled-components 迁移到 Tailwind 时，转换器加速了迁移过程并帮助团队成员学习 Tailwind 的类名命名规则。

与 HTML 转 JSX 配合使用可以同时处理模板结构和样式迁移，或使用 CSS 格式化器 先规范化 CSS 代码再转换。

转换基于 Tailwind 的默认设计系统和间距标度：

• 颜色系统：CSS 颜色值映射到 Tailwind 的语义颜色（red-500、blue-700）或任意值语法（bg-[#123456]）。HEX 颜色通过最近邻算法匹配到 Tailwind 调色盘中最接近的色调。
• 间距标度：margin: 16px → m-4（基于 4px = 1 单位的标度）。非标度值使用方括号任意值语法（m-[14px]）。
• 字体大小：font-size: 14px → text-sm，基于 Tailwind 的类型标度（xs、sm、base、lg、xl 等）。
• 响应式前缀：工具暂不支持直接生成响应式前缀（sm:、md:、lg:），用户需要在转换结果上手动添加。

• 无法完美匹配：Tailwind 使用固定的设计标度，自定义 CSS 值可能没有精确的类名对应，会生成任意值语法 [value]。
• 样式优先级：转换后多个类名可能产生样式冲突（如多个 margin 类），可能需要手动调整。
• 伪类和伪元素：hover:、focus: 等状态变体需要在转换后手动添加到生成的类名前。
• 自定义配置：如果项目扩展了 Tailwind 主题（如自定义颜色或间距），标准映射关系可能不适用。

在项目迁移、学习 Tailwind 类名、或快速原型转换时使用此工具。对于需要持续维护的转换需求（如设计系统），推荐使用 Tailwind 官方插件 @tailwindcss/typography 和自定义组件类来减少重复样式，而不是依赖自动转换。