什么是CSS 转 Tailwind?
CSS 转 Tailwind 工具把常见声明映射为对应的工具类,数值型属性使用方括号任意值语法,无法映射的声明会单独列出提示手工处理。映射在浏览器本地完成。
怎么用CSS 转 Tailwind?
- 1粘贴一条或多条完整的 CSS 规则(含选择器与花括号)。
- 2查看每个选择器对应的 class 字符串。
- 3检查底部「未能映射」清单,逐条手工处理。
- 4把方括号任意值替换成项目设计令牌里的标准刻度。
常见问题
为什么生成的是 p-[16px] 而不是 p-4?+
因为映射到标准刻度需要知道你项目的 spacing 配置。工具选择保真而不是猜测:先给出等值的任意值写法,再由你替换成设计系统里的刻度,避免出现视觉偏差。
伪类、媒体查询和动画能转换吗?+
不能自动转换。伪类需要加 hover:、focus: 等前缀,媒体查询需要改成 sm:、md: 断点前缀,关键帧动画需要在配置里注册。这些都属于需要人工判断的结构性改写。
相关工具
全部工具JSON 转 YAML
JSON to YAML Converter
把 JSON 转成 YAML,保留嵌套层级
YAML 转 JSON
YAML to JSON Converter
把 YAML 转成 JSON,支持多文档
JSON 转 CSV
JSON to CSV Converter
JSON 对象数组转 CSV,嵌套字段自动扁平化
CSV 转 JSON
CSV to JSON Converter
CSV 转 JSON,自动识别表头与分隔符
JSON 转 TypeScript 类型
JSON to TypeScript
从 JSON 推导 TypeScript 类型定义
JSON 转 Go 结构体
JSON to Go Struct
JSON 转 Go 结构体,自动补 json tag