CSS转Tailwind类名转换器_映射规则

使用方法

把 CSS 声明粘进输入框，支持两种写法：一整行用分号分隔，或者一行一条声明。默认示例是一整行的五条声明，改动内容立刻重算。
「任意值风格」默认勾选。勾选时落在刻度外的数值写成方括号形式，比如 p-[15px]；不勾选则如实标为无法映射，方便你判断这条该不该改设计稿。
结果区第一行是拼好的类名串，可以直接粘到 class 属性上；下面的清单给出逐行明细，每条声明后面跟着映射出的类名或「无法映射」。
末尾的汇总给出三件事：一共几条声明、映射成功几条、无法映射几条。无法映射的条数不为 0 时，说明这批样式里有一部分必须走自定义主题或任意值。
输入框支持 Ctrl+Enter（Mac 上 Cmd+Enter）触发转换；内容被清空时点转换会自动填回默认的五条声明，不会空着报错。
结果下面是 12 行的间距刻度速查表，随任意值开关变化，默认显示 6 行，点「加载更多」展开全部，点「导出 CSV」存成带字节序标记的表格文件。
「复制类名」只复制类名串；「复制对照表」复制正文那张 12 行属性映射表的 TSV，可直接粘进表格。
声明里写了非法语法、只有属性没有值、或者整个输入框是空的，都会给出针对该条的具体提示，不会拿上一次的结果冒充本次输出。

这个 CSS 转 Tailwind 转换器能解决什么问题

第一类是「老样式搬不进新项目」。一段写了三年的 CSS 要迁到 Tailwind 工程里，人工逐条查文档既慢又容易漏：gap 有对应 utility，padding 有，但 box-shadow 没有内置的、渐变也没有。本页先把能直接映射的挑出来，把剩下的单列成「无法映射」，让你知道工作量在哪。

第二类是「不确定这个数值上不上刻度」。Tailwind v3 的间距刻度是离散的，1 等于 0.25rem 也就是 4 px，所以 16 px 是 gap-4、24 px 是 p-6；但 15 px 不在刻度上，18 px 也不在。刻度判断是本页最容易出错也最值得机器做的一步，交给人眼数 4 的倍数迟早会错。

第三类是「同一句 CSS 有两种写法」。比如 margin:0 auto 在 Tailwind 里要拆成 mx-auto，因为 Tailwind 没有把上下和左右合并成一个类的语法；border:1px solid #e5e7eb 要拆成 border border-gray-200 两个类。本页在明细里直接给出拆完的形式。

第四类是「不知道该改设计稿还是该加任意值」。任意值语法能救急，但用多了就失去了 Tailwind 收敛设计变量的意义。把开关关掉再跑一遍，就能看清这批样式里有多少条是「设计稿没对齐刻度」——这类问题应该改设计稿，而不是靠方括号硬写。

这个工具在本站也叫「CSS转Tailwind转换器」，转换依据是 Tailwind v3 的默认主题刻度与内置 utility 清单，下面会讲清刻度是怎么折算的。

计算原理与变量说明

转换分两步：先按分号与换行把输入切成声明，每条声明以第一个冒号为界拆成属性与值；再对每条声明查三张表，命中就输出类名，没命中就标为无法映射。

第一张表是关键词表，按「属性:值」整体匹配，覆盖 display、position、flex-direction、justify-content、align-items、text-align、font-weight、overflow 这些离散取值。display:flex 命中 flex，display:none 命中 hidden，font-weight:700 命中 font-bold——注意这里匹配的是 700 这个数值而不是 bold 关键字，因为设计稿里几乎都写数值。

第二张表是间距刻度表，用于 padding、margin、gap 及其方向变体。折算规则是刻度 = px ÷ 4，因为 v3 的间距刻度基准是 1 = 0.25rem = 4 px。折算结果必须落在默认刻度集合里才算命中：整数刻度 0 到 12、14、16、20、24、28、32、36、40、44、48、52、56、60、64、72、80、96，加上 0.5、1.5、2.5、3.5 四个半档。所以 16 px 得 4、24 px 得 6、64 px 得 16，而 15 px 与 18 px 都落空，100 px 折算成 25 也不在集合里。

第三张表是颜色表，只认 #ffffff、#000000、transparent、currentColor 这几个内置名，分别映射成 text-white、bg-black 这类类名。其余十六进制值在开启任意值时写成 text-[#1d4ed8]，否则无法映射——因为 Tailwind 的默认调色板是按色名与色阶组织的，任意十六进制必须先注册进主题才有对应的类名。

v3 离散刻度与 v4 动态值的区别。v3 的间距是一张预先生成的离散刻度表，构建时就把所有用得到的类都生成好；v4 改成按需计算，可以直接写 p-[15px] 而不需要预先声明。本页按 v3 的刻度判定「能不能上刻度」，但任意值语法在 v3.1 之后的 JIT 引擎里同样可用，所以把它做成开关而不是固定行为。

为什么 margin:0 auto 要拆成 mx-auto。CSS 的简写属性把四个方向塞进一条声明，而 Tailwind 的类名一次只表达一个维度：mx 管左右、my 管上下、m 管四边。0 auto 上下为零左右自动，只有 mx-auto 能表达；写成 m-auto 会把上下也设成 auto，语义就变了。

变量一共两个：CSS 声明块与任意值开关。开关只影响「落空之后怎么办」，不影响刻度判定本身。

完整示例（数值仅作演示）

默认示例是 display:flex; gap:16px; padding:24px; background-color:#ffffff; border-radius:8px;，五条声明全部命中，输出类名串 flex gap-4 p-6 bg-white rounded-2。逐条看：display:flex 命中关键词表得 flex；gap:16px 折算 16 ÷ 4 = 4 得 gap-4；padding:24px 折算 24 ÷ 4 = 6 得 p-6；background-color:#ffffff 命中颜色表得 bg-white；border-radius:8px 折算 8 ÷ 4 = 2 得 rounded-2。

把 gap:16px 改成 gap:15px 再看：15 ÷ 4 = 3.75 不在刻度集合里。开启任意值时输出 gap-[15px]，关掉后这一条标为无法映射，类名串里不再出现它。同一份输入在两个开关下给出两个结果，正是这个开关存在的意义。

再看一条要拆分的：margin:0 auto。它对不上任何刻度，但匹配了简写规则，直接给出 mx-auto。反过来 margin:16px auto 就无法映射——Tailwind 没有一条类能同时表达「上下 16 px、左右自动」，必须写成 my-4 mx-auto 两个类，本页遇到这种混写会如实标为无法映射。

把整段换成 padding:15px; width:37%; box-shadow:0 4px 6px rgba(0,0,0,.1);，三条全部落空：15 不是 4 的倍数，百分比不在默认刻度，阴影需要自定义主题或 shadow-[...]。这时汇总会显示「无法映射 3 条」，提示这批样式不能靠纯 utility 落地。

映射规则对照表

下表是本页能直接命中的 12 个高频属性与值，覆盖布局、排版、间距与尺寸四类。

CSS 声明	Tailwind 类名
display:flex	flex
display:none	hidden
position:absolute	absolute
flex-direction:column	flex-col
text-align:center	text-center
font-weight:700	font-bold
overflow:hidden	overflow-hidden
padding:16px	p-4
margin:0 auto	mx-auto
gap:24px	gap-6
color:#ffffff	text-white
width:100%	w-full

下面这 8 条是常见但映射不了的，原因各不相同：有的不在刻度上，有的需要主题注册，有的压根没有内置 utility。

CSS 声明	为什么映射不了
padding:15px	15 不是 4 的倍数，刻度上没有
width:37%	百分比不在默认刻度
box-shadow:0 4px 6px rgba(0,0,0,.1)	阴影需 shadow-[...] 或自定义 theme
background:linear-gradient(...)	渐变无内置 utility
transform:rotate(3deg)	角度需 rotate-[3deg]
font-family:"Inter"	字体族要在 theme.fontFamily 里注册
animation:bounce 1s	动画需自定义 keyframes
z-index:999	z 轴默认只到 z-50

最后这张是「手写了但 Tailwind 里要换思路」的 12 条，左边是 CSS 习惯写法，右边是对应的类名。

CSS 写法	Tailwind 写法
margin:0 auto	mx-auto
display:flex; justify-content:center; align-items:center	flex justify-center items-center
list-style:none	list-none
text-decoration:none	no-underline
white-space:nowrap	whitespace-nowrap
cursor:pointer	cursor-pointer
user-select:none	select-none
visibility:hidden	invisible
border:1px solid #e5e7eb	border border-gray-200
box-sizing:border-box	默认已全局开启，无需类名
outline:none	focus:outline-none（注意无障碍影响）
transition:all .2s	transition duration-200

结果边界、舍入与适用说明

输入框为空时提示请粘贴至少一条 CSS 声明，不会拿上一次的结果冒充本次输出。
某条声明只有属性没有冒号时，报出该条内容与行号，提示写成「属性:值」的形式。
数值带单位但不是 px（如 rem、em、%）时，除 width 与 height 走任意值外一律标为无法映射，不做单位换算。
负值的 padding 与 margin 标为无法映射；Tailwind 的负间距写法是 -m-4，与 CSS 的 margin:-16px 不是一回事。
刻度折算不做四舍五入：15 px 不会被近似成 16 px 去凑 gap-4，因为那样改了设计稿的原始尺寸。
本页不读取主题配置文件，也不知道你项目里注册了哪些自定义色与自定义间距；已在主题里注册的值在这里仍会显示为无法映射。
类名串按输入顺序拼接，不做去重与排序；同一属性重复出现时照实输出两次。
页面不联网、不写本地存储，粘贴的 CSS 只用于本次转换。

常见问题

为什么 16 px 是 gap-4，而不是 gap-16？

因为 Tailwind v3 的间距刻度基准是 1 = 0.25rem = 4 px，类名里的数字是刻度而不是像素。16 ÷ 4 = 4，所以是 gap-4；写成 gap-16 得到的是 64 px。同样地 24 px 是 p-6、32 px 是 p-8。

15 px 为什么不能四舍五入到 16 px 凑一个类名？

因为那会改掉设计稿的原始尺寸。15 px 折算成 3.75 个刻度，不在默认刻度集合里，本页会如实标为无法映射或给出 p-[15px]，不替你改数值。要落到刻度上，应该回到设计稿确认能不能改成 16 px。

margin:0 auto 为什么变成 mx-auto 而不是 m-auto？

Tailwind 的类名一次只表达一个维度：m 管四边、mx 管左右、my 管上下。0 auto 表示上下为零、左右自动，只有 mx-auto 能表达；写成 m-auto 会把上下也设成 auto，语义与 CSS 原意不同。

任意值语法用多了有什么问题？

方括号任意值能绕过刻度，但用多了就失去了 Tailwind 收敛设计变量的初衷：同一个间距在十个地方写成十个不同的数值，最后没人知道设计稿的标准是多少。把开关关掉再跑一遍，看看有多少条落空，那些才是该改设计稿的地方。

box-shadow 和 linear-gradient 为什么一律无法映射？

这两类没有内置 utility。阴影要写 shadow-[...] 或在 theme.boxShadow 里注册，渐变要靠 bg-[linear-gradient(...)] 或自定义背景图。它们的值本身是复合结构，没法套用一条固定的类名规则。

我在主题里注册过自定义色，这里为什么还显示无法映射？

本页不读取项目的配置文件，只知道 Tailwind 的默认主题。已注册进 theme 的自定义色名与自定义间距在这里仍会标为无法映射，需要你按项目里的实际命名手动替换。

这个工具免费吗？

免费，无需注册即可使用。

输入的数据安全吗？

安全。转换在当前浏览器本地完成，不会上传输入内容。

CSS 转 Tailwind 转换器