类名
flex items-center gap-2 p-4
CSS
display:flex; align-items:center; ...
开发工具
Tailwind 转 CSS - 类名对照原生样式
将 Tailwind CSS 类名转换为对应的原生 CSS 声明，覆盖布局、间距、文字与颜色等常用工具类，适合样式迁移与理解类名含义。
TailwindCSS转换
开发工具
类名转 CSS
使用场景
- 从 Tailwind 项目迁移到原生 CSS
- 快速查看类名对应属性
- 代码审查时核对实际样式
如何使用
- 输入一行或多行 Tailwind 类名
- 查看生成的 CSS 属性
- 复制需要的样式代码
示例输入输出
FAQ
自定义主题色也能转换吗？
内置默认主题映射更完整；深度自定义配置可能需对照你项目的 tailwind.config。
和 css-to-tailwind 有何关系？
本工具是类名到 CSS；另一个是反向，从 CSS 推断可能的 Tailwind 写法。
工具列表
相关推荐
你可以从这里继续打开相近场景的工具，减少重复搜索。
CSS 转 Tailwind
CSS 转 Tailwind - 声明映射工具
将单块 CSS 声明尽量映射为 Tailwind 工具类，常见布局、间距与颜色可匹配到标准类，复杂值会退回任意值写法，适合把样例样式迁到 utility-first。
CSS Tailwind 转换
CSS 单位转换
CSS 单位转换 - px rem em vw 工具
在 px、rem、em、pt、vw、vh、% 之间换算，可自定义根字号、父元素字号与视口宽高，适合响应式与设计稿转代码。
CSS 单位 换算
Tailwind 50-950 全色谱
无需文档的大局级颜色搜索板
一张表看完！极其丝滑宏大的 Tailwind CSS 全线色彩面板（由 Slate 一直到 Rose，含 950 黑阶）。不再每次都需要跑回官网查 "emerald-400 的对撞色是多少"。
Design Tailwind CSS