converting-css-to-tailwind

Compare original and translation side by side

🇺🇸

Original

English

🇨🇳

Translation

Chinese

Converting CSS to Tailwind

将CSS转换为Tailwind

Migrate plain CSS files to Tailwind utility classes applied directly in markup.

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

Workflow

转换流程

Read the CSS file and inventory every rule
Find the corresponding markup (HTML, JSX, TSX, Vue, Svelte) that references each selector
Convert each rule using the mapping below
Delete the CSS rule once all its properties are expressed as utilities
Remove the CSS file (or import) once it's empty
Verify the page looks identical — check for visual regressions

读取CSS文件并统计所有规则
找到对应标记（HTML、JSX、TSX、Vue、Svelte）中引用每个选择器的部分
使用下方映射表转换每条规则
当所有属性都用工具类表示后，删除该CSS规则
当CSS文件为空时，移除该文件（或其导入语句）
验证页面外观一致——检查是否存在视觉回归问题

Conversion Reference

转换参考表

Layout & Box Model

布局与盒模型

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
`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`

Typography

排版

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]` or a theme color
`letter-spacing: 0.05em`	`tracking-wide`

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`

Backgrounds & Borders

背景与边框

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

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`

Responsive — Media Queries

响应式——媒体查询

css

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

→

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

Map breakpoints:

sm:

(640),

md:

(768),

lg:

(1024),

xl:

(1280),

2xl:

(1536)

css

@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)

Pseudo-classes & States

伪类与状态

css

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

→

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

Prefixes:

hover:

focus:

active:

disabled:

first:

last:

odd:

even:

group-hover:

peer-checked:

css

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

→

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

前缀：

hover:

focus:

active:

disabled:

first:

last:

odd:

even:

group-hover:

peer-checked:

Animations & Transitions

动画与过渡

css

transition: all 0.2s ease-in-out;

→

transition-all duration-200 ease-in-out

css

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

→

animate-spin

(built-in) or define in

tailwind.config

css

transition: all 0.2s ease-in-out;

→

transition-all duration-200 ease-in-out

css

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

→

animate-spin

（内置类）或在

tailwind.config

中自定义

Custom Properties / Arbitrary Values

自定义属性 / 任意值

For anything without a direct utility, use arbitrary values:

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

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

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

Handling Remaining CSS

处理剩余CSS

Some things can't be expressed purely as utilities:

Complex selectors (
```
.parent > .child + .sibling
```
) — restructure the markup or use
```
@apply
```
as a last resort
@font-face
— keep in a global CSS file or
```
globals.css
```

Complex
@keyframes
— define in

tailwind.config.ts

under

theme.extend.keyframes

CSS variables — migrate to Tailwind theme values in
```
tailwind.config.ts
```

有些内容无法完全用工具类表示：

复杂选择器（
```
.parent > .child + .sibling
```
）——重构标记，或最后考虑使用
```
@apply
```
@font-face
——保留在全局CSS文件或
```
globals.css
```
中

复杂
@keyframes
——在

tailwind.config.ts

的

theme.extend.keyframes

中定义

CSS变量——迁移到
```
tailwind.config.ts
```
中的Tailwind主题值

Rules

转换规则

Prefer semantic Tailwind classes (
```
bg-primary
```
) over arbitrary hex values when a theme exists
Don't use
```
@apply
```
to recreate the same CSS you're migrating away from — that defeats the purpose
Group related utilities logically: layout → spacing → typography → colors → effects
If a component has 10+ utilities, consider extracting a reusable component rather than a CSS class

当存在主题时，优先使用语义化Tailwind类（
```
bg-primary
```
）而非任意十六进制值
不要使用
```
@apply
```
来重建你正在迁移的CSS——这违背了转换的初衷
按逻辑分组相关工具类：布局 → 间距 → 排版 → 颜色 → 效果
如果一个组件使用了10个以上的工具类，考虑提取为可复用组件而非CSS类