design / 可用工具

陈旧样式向 Utility Class 原则转换器

复制一段别人的远古 `.class { display: flex; margin-top: 16px; }`，它将会使用正则探针嗅探尽量匹配还原成 Tailwind 的 `flex mt-4` 紧凑类。

快速切换 → Tailwind 50-950 全色谱

DesignTailwindConverter

快速切换： Tailwind 50-950 全色谱

收藏工具

当前还没有选择收藏模式。

快捷操作

返回设计配色浏览全部工具

你可以复制当前工具页链接，或者在支持的设备上直接调用系统分享。

设计与布局

CSS 单块转 Tailwind 类

1. Paste Object / Class CSS

2. Tailwind Classes

flex justify-center items-center mt-4

Mapping Engine Limits

This acts as a heuristic quick-dictionary using regex parsing to match pure CSS Key-Value pairs to their closest Tailwind equivalents natively via standard utilities. Highly complex compound rules (`calc()`, layered backgrounds) will fall back to arbitrary values (`bg-[url(...)]`) or be flagged as unmapped. Works best on simple layout strings.

使用场景

由于设计稿生成的代码是臃肿的基础 CSS，通过此工具缩水为简练的 Tailwind 工具类附于 JSX 上。

如何使用

1. 这只是一个探索性工具，复杂层叠将退回到 Arbitrary values（如 `bg-[#ff0000]`）。

示例输入输出

CSS

padding-left: 32px;

pl-8

FAQ

支持媒体查询 @media 吗

该工具侧重针对单层的 Element Object Rule 内联直白转换。

工具列表