converting-css-to-tailwind

将 CSS 转换为 Tailwind

将纯 CSS 文件迁移为直接应用于标记中的 Tailwind 工具类。

工作流

1. 阅读 CSS 文件并列出每条规则
2. 找到对应的标记（HTML、JSX、TSX、Vue、Svelte），查看哪些标记引用了每个选择器
3. 使用下方的映射转换每条规则
4. 所有属性都已用工具类表示后，删除 CSS 规则
5. CSS 文件为空后，移除该文件（或导入语句）
6. 验证页面外观是否完全一致，并检查是否存在视觉回归

转换参考

布局与盒模型

CSS	Tailwind
display: flex	flex
display: grid	grid
display: none	hidden
position: relative	relative
position: absolute	absolute
justify-content: center	justify-center
align-items: center	items-center
gap: 16px	gap-4
width: 100%	w-full
max-width: 768px	max-w-3xl
margin: 0 auto	mx-auto
padding: 16px	p-4
overflow: hidden	overflow-hidden

排版

CSS	Tailwind
font-size: 14px	text-sm
font-weight: 700	font-bold
line-height: 1.5	leading-normal
text-align: center	text-center
text-transform: uppercase	uppercase
color: #333	text-[#333] 或主题颜色
letter-spacing: 0.05em	tracking-wide

背景与边框

CSS	Tailwind
background-color: #f5f5f5	bg-[#f5f5f5] 或 bg-neutral-100
border: 1px solid #e5e7eb	border border-gray-200
border-radius: 8px	rounded-lg
box-shadow: 0 1px 3px ...	shadow-sm

响应式 — 媒体查询

@media (min-width: 768px) { .card { flex-direction: row; } }

→ <div class="flex-col md:flex-row">

断点映射：sm:（640）、md:（768）、lg:（1024）、xl:（1280）、2xl:（1536）

伪类与状态

.btn:hover { background-color: #1d4ed8; }

→ <button class="hover:bg-blue-700">

前缀：hover:、focus:、active:、disabled:、first:、last:、odd:、even:、group-hover:、peer-checked:

动画与过渡

transition: all 0.2s ease-in-out;

→ transition-all duration-200 ease-in-out

@keyframes spin { ... }
animation: spin 1s linear infinite;

→ animate-spin（内置），或在 tailwind.config 中定义

自定义属性／任意值

对于没有对应工具类的属性，请使用任意值：

• w-[calc(100%-2rem)]
• grid-cols-[200px_1fr_1fr]
• text-[clamp(1rem,2vw,1.5rem)]

处理剩余 CSS

有些内容无法仅通过工具类表达：

• 复杂选择器（.parent > .child + .sibling）——调整标记结构，或将 @apply 作为最后手段
• @font-face——保留在全局 CSS 文件或 globals.css 中
• 复杂的 @keyframes——在 tailwind.config.ts 的 theme.extend.keyframes 下定义
• CSS 变量——迁移为 tailwind.config.ts 中的 Tailwind 主题值

规则

• 存在主题时，优先使用语义化 Tailwind 类（bg-primary），而不是任意十六进制值
• 不要用 @apply 重建正在迁移的相同 CSS——这就失去了迁移的意义
• 按逻辑对相关工具类分组：布局 → 间距 → 排版 → 颜色 → 效果
• 如果一个组件有 10 个以上的工具类，请考虑提取为可复用组件，而不是 CSS 类