本文目录
什么是 Tailwind CSS，以及为何要转换它
Tailwind CSS 是一个功能类优先（utility-first）的 CSS 框架，它让开发者通过在 HTML 中直接套用小巧、单一用途的类来为元素设置样式。你无需编写自定义 CSS 规则，而是用 flex、p-4、text-blue-500、rounded-lg 这样的类名以内联方式组合样式。
尽管 Tailwind 加快了开发速度，但在某些情况下你会需要与之等价的纯 CSS。你可能正在从 Tailwind 迁移出去、调试某个特定样式、与不使用该框架的团队共享代码，或者想弄清楚每个功能类到底生成了什么。将 Tailwind 转换为原生 CSS 能立即弥合这一差距。
Tailwind 转 CSS 工具的工作原理
该工具接收 Tailwind 功能类，并输出与之等价的标准 CSS 属性和取值。
- 粘贴你的类名——输入任意 Tailwind 类字符串，例如 flex items-center gap-4 p-6 bg-white rounded-xl shadow-md
- 查看 CSS 输出——每个功能类都会被解析为其对应的 CSS 声明，并归入单个规则块，可在任何地方使用
- 处理响应式和状态变体——md:、hover:、dark: 等前缀会在输出中被转换为相应的媒体查询和伪选择器
- 复制或下载——获取纯 CSS，将其粘贴到你的样式表、组件，或任何要求标准 CSS 语法的设计工具中
免费试用 —— 无需注册
打开 Tailwind 转 CSS 工具 →何时使用 Tailwind 转 CSS
在若干常见的开发和设计场景中，将 Tailwind 功能类转换为标准 CSS 都很有用。
- 框架迁移——在将项目迁移到纯 CSS、Sass 或其他样式方案时，从 Tailwind 类中提取出确切的 CSS 规则
- 学习 CSS——查看每个 Tailwind 功能类在底层对应的内容，从而更深入地理解 CSS 规范
- 设计系统文档——从基于 Tailwind 的原型中导出标准 CSS，让设计师和不使用 Tailwind 的开发者能够参照确切的取值
常见问题
该工具能处理所有 Tailwind 类吗？
该工具支持核心 Tailwind CSS 功能类集，包括布局、间距、排版、颜色、边框、阴影、过渡和变换。在你的 tailwind.config 文件中定义或通过插件添加的自定义类无法被识别，因为该工具基于默认的 Tailwind 规范工作。
响应式断点会被转换吗？
会。sm:、md:、lg:、xl: 等响应式前缀会使用默认的 Tailwind 断点值转换为相应的 CSS 媒体查询。输出会将响应式样式包裹在结构正确的媒体查询块中。
我能把 CSS 反向转换回 Tailwind 吗？
本工具只做单向转换，即从 Tailwind 到 CSS。反向转换要困难得多，因为多种 CSS 属性组合可能映射到同一个 Tailwind 功能类，而且自定义取值可能没有确切的功能类对应项。若要将 CSS 转换为 Tailwind，通常需要专门的工具或手动映射。