将 CSS 属性转换为 Tailwind CSS 工具类，支持响应式和状态变体
CSS 工具
关于此工具
CSS 转 Tailwind 转换器可以将传统 CSS 属性转换为 Tailwind CSS 工具类等价形式。它处理间距、排版、颜色、弹性布局、定位、边框等，并为非标准值提供任意值语法支持。非常适合将现有项目迁移到 Tailwind 或学习实用优先框架的开发者。
主要功能
- 自动将 CSS 属性映射到 Tailwind 工具类
- 支持间距、排版、颜色和弹性布局转换
- 非标准 CSS 值的任意值语法处理
- 并排 CSS 输入和 Tailwind 输出编辑器
- 示例 CSS 模板，快速上手
- 一键复制和粘贴生成的类字符串
使用场景
- 将现有 CSS 代码库迁移到 Tailwind CSS
- 学习 CSS 属性对应的 Tailwind 工具类
- 将设计系统 CSS 转换为 Tailwind 配置
- 通过转换已知 CSS 值快速使用 Tailwind 原型化
- 衔接传统 CSS 和实用优先工作流之间的差距
css
tailwind
converter
常见问题
支持哪些 CSS 属性？
转换器支持 display、弹性布局、定位、间距、排版、颜色、边框、overflow、cursor 等众多 CSS 属性。它同时处理简写和完整属性。
是否支持任意值？
支持，当 CSS 值无法映射到标准 Tailwind 类时，转换器会使用方括号生成任意值语法，例如 w-[200px] 或 text-[#ff6600]。
可以一次转换整个 CSS 文件吗？
可以，您可以粘贴包含选择器的多条 CSS 规则，工具会将每个属性转换为 Tailwind 等价形式。无法识别的属性会以注释形式输出，方便查看。
颜色是如何转换的？
转换器将常见的十六进制颜色映射到 Tailwind 颜色名称，例如 #3b82f6 映射为 blue-500。不匹配标准 Tailwind 调色板的颜色会使用任意值语法输出，如 bg-[#ff6600]。
我的 CSS 代码会发送到服务器吗？
不会。所有转换都在浏览器本地进行。您的 CSS 代码不会被上传或传输到任何服务器，确保您的工作完全私密。