CSS 转 Tailwind 转换器

在线将 CSS 转换为 Tailwind CSS 工具类。映射常见 CSS 属性到 Tailwind 类。免费迁移工具。

CSS

Tailwind Classes

关于 CSS 转 Tailwind

Tailwind CSS 是一个工具优先的 CSS 框架，使用预定义类替代自定义 CSS。从传统 CSS 迁移到 Tailwind 涉及将 CSS 属性映射到等效的工具类。本工具自动转换常见 CSS 属性，包括 display、position、flexbox、grid、间距、排版、颜色、边框等。对于没有精确 Tailwind 等效项的属性，它使用 Tailwind 的方括号表示法生成任意值类。转换器处理单个声明和带选择器的完整 CSS 规则集。

𝕏 Twitter in LinkedIn

评价此工具

4.3 / 5 · 229 人评价

保持更新

获取每周开发技巧和新工具通知。

无垃圾邮件，随时退订。

Enjoy these free tools?

☕Buy Me a Coffee

使用方法

粘贴 CSS 代码（带或不带选择器）
点击转换生成 Tailwind 类
检查已转换的类和未转换的属性
将 Tailwind 类复制到 HTML 元素中

常见用例

将现有 CSS 项目迁移到 Tailwind CSS
将设计工具的 CSS 转换为 Tailwind 类
学习 CSS 属性的 Tailwind 等效项
从 CSS 模型快速搭建 Tailwind 布局

常见问题

所有 CSS 都能转换为 Tailwind 吗？

不是所有 CSS 都有直接的 Tailwind 等效项。工具转换常见属性如 display、flexbox、排版和间距。复杂或不常见的 CSS 会标记为“未转换”以便手动处理。

如何处理自定义颜色？

自定义颜色使用 Tailwind 的任意值语法转换：color: #ff5733 变为 text-[#ff5733]。

支持响应式断点吗？

工具转换每个规则中的 CSS 属性。响应式类（sm:、md:、lg:）需要根据媒体查询断点手动添加。

可以粘贴带选择器的 CSS 吗？

可以。工具解析带选择器的 CSS 规则集并显示每个选择器的 Tailwind 类。也可以粘贴不带选择器的原始声明。