CSS 转 Tailwind

CSS 声明映射为 Tailwind 类名

浏览器内运算CSS to Tailwind工具型02格式转换

什么是CSS 转 Tailwind

CSS 转 Tailwind 工具把常见声明映射为对应的工具类,数值型属性使用方括号任意值语法,无法映射的声明会单独列出提示手工处理。映射在浏览器本地完成。

怎么用CSS 转 Tailwind

  1. 1粘贴一条或多条完整的 CSS 规则(含选择器与花括号)。
  2. 2查看每个选择器对应的 class 字符串。
  3. 3检查底部「未能映射」清单,逐条手工处理。
  4. 4把方括号任意值替换成项目设计令牌里的标准刻度。

常见问题

为什么生成的是 p-[16px] 而不是 p-4?+

因为映射到标准刻度需要知道你项目的 spacing 配置。工具选择保真而不是猜测:先给出等值的任意值写法,再由你替换成设计系统里的刻度,避免出现视觉偏差。

伪类、媒体查询和动画能转换吗?+

不能自动转换。伪类需要加 hover:、focus: 等前缀,媒体查询需要改成 sm:、md: 断点前缀,关键帧动画需要在配置里注册。这些都属于需要人工判断的结构性改写。

相关工具

全部工具