CSS 转 Tailwind 完整指南：属性映射、迁移策略与实战案例

从自定义 CSS 迁移到 Tailwind CSS 是现代前端开发中最常见的重构任务之一。无论是改造遗留样式表、将 Figma 设计稿转换为代码，还是引入第三方组件，掌握 CSS 属性到 Tailwind 工具类的映射关系能节省大量时间。

Tailwind CSS 的工作原理

Tailwind 是一个”工具优先”的 CSS 框架。与传统的 .card、.hero-section 这类语义化类名不同，Tailwind 让你直接在 HTML 中组合单一用途的工具类：

<!-- 传统 CSS 方式 -->
<div class="card">...</div>

<!-- Tailwind 方式 -->
<div class="rounded-lg shadow-md p-6 bg-white border border-gray-200">...</div>

每个工具类对应一条（或少数几条）CSS 声明。Tailwind 的构建过程会扫描你的代码，只生成实际用到的 CSS，最终产物非常精简。

核心 CSS 属性映射

间距（margin、padding）

Tailwind 使用数字刻度，默认 1 = 4px（0.25rem）：

CSS	Tailwind
`margin: 0`	`m-0`
`margin: 1rem`	`m-4`
`margin: 2rem`	`m-8`
`margin-top: 1.5rem`	`mt-6`
`margin-left: auto`	`ml-auto`
`padding: 0.5rem`	`p-2`
`padding: 1.25rem`	`p-5`
`padding-left: 2rem`	`pl-8`
`padding-top: 0; padding-bottom: 0`	`py-0`
`padding-left: 1rem; padding-right: 1rem`	`px-4`

规律：m = margin，p = padding，t/r/b/l = 上/右/下/左，x = 水平，y = 垂直。

尺寸（width、height）

CSS	Tailwind
`width: 100%`	`w-full`
`width: 50%`	`w-1/2`
`width: 100vw`	`w-screen`
`width: auto`	`w-auto`
`width: 2rem`	`w-8`
`max-width: 64rem`	`max-w-4xl`
`height: 100%`	`h-full`
`height: 100vh`	`h-screen`
`min-height: 100vh`	`min-h-screen`

排版

CSS	Tailwind
`font-size: 0.875rem`	`text-sm`
`font-size: 1rem`	`text-base`
`font-size: 1.25rem`	`text-xl`
`font-size: 2.25rem`	`text-4xl`
`font-weight: 400`	`font-normal`
`font-weight: 600`	`font-semibold`
`font-weight: 700`	`font-bold`
`line-height: 1.5`	`leading-normal`
`line-height: 2`	`leading-loose`
`text-align: center`	`text-center`
`text-decoration: underline`	`underline`
`text-transform: uppercase`	`uppercase`
`letter-spacing: 0.05em`	`tracking-wide`
`color: #6b7280`	`text-gray-500`

颜色

Tailwind 内置了色板，每种颜色有从 50（最浅）到 950（最深）的色阶：

/* CSS */
color: #3b82f6;
background-color: #f3f4f6;
border-color: #e5e7eb;

<!-- Tailwind -->
<div class="text-blue-500 bg-gray-100 border-gray-200">...</div>

常用颜色对照：

CSS 值	Tailwind 类
`#ffffff`	`bg-white` / `text-white`
`#000000`	`bg-black` / `text-black`
`#3b82f6`	`text-blue-500`
`#ef4444`	`text-red-500`
`#22c55e`	`text-green-500`
`#f59e0b`	`text-amber-500`
`#8b5cf6`	`text-violet-500`
`transparent`	`bg-transparent`

显示与定位

CSS	Tailwind
`display: block`	`block`
`display: inline`	`inline`
`display: inline-block`	`inline-block`
`display: flex`	`flex`
`display: inline-flex`	`inline-flex`
`display: grid`	`grid`
`display: none`	`hidden`
`position: relative`	`relative`
`position: absolute`	`absolute`
`position: fixed`	`fixed`
`position: sticky`	`sticky`
`top: 0`	`top-0`
`z-index: 10`	`z-10`
`overflow: hidden`	`overflow-hidden`
`overflow: auto`	`overflow-auto`

Flexbox

CSS	Tailwind
`flex-direction: row`	`flex-row`
`flex-direction: column`	`flex-col`
`justify-content: center`	`justify-center`
`justify-content: space-between`	`justify-between`
`justify-content: flex-end`	`justify-end`
`align-items: center`	`items-center`
`align-items: flex-start`	`items-start`
`flex-wrap: wrap`	`flex-wrap`
`gap: 1rem`	`gap-4`
`flex: 1`	`flex-1`
`flex: none`	`flex-none`

Grid

CSS	Tailwind
`grid-template-columns: repeat(3, 1fr)`	`grid-cols-3`
`grid-template-columns: repeat(12, 1fr)`	`grid-cols-12`
`grid-column: span 2`	`col-span-2`
`grid-column: 1 / -1`	`col-span-full`
`gap: 1.5rem`	`gap-6`
`row-gap: 1rem`	`gap-y-4`
`column-gap: 2rem`	`gap-x-8`

边框与圆角

CSS	Tailwind
`border: 1px solid`	`border`
`border: 2px solid`	`border-2`
`border-top: 1px solid`	`border-t`
`border-color: #e5e7eb`	`border-gray-200`
`border-radius: 0.25rem`	`rounded`
`border-radius: 0.5rem`	`rounded-lg`
`border-radius: 9999px`	`rounded-full`
`border-radius: 0`	`rounded-none`

阴影与透明度

CSS	Tailwind
`box-shadow: 0 1px 3px rgba(0,0,0,0.12)`	`shadow-sm`
`box-shadow: 0 4px 6px rgba(0,0,0,0.1)`	`shadow-md`
`box-shadow: 0 10px 15px rgba(0,0,0,0.1)`	`shadow-lg`
`box-shadow: none`	`shadow-none`
`opacity: 0.5`	`opacity-50`
`opacity: 0.75`	`opacity-75`

任意值（Arbitrary Values）

当设计稿中有不在 Tailwind 默认刻度内的值时，使用方括号语法：

/* CSS */
width: 327px;
padding-top: 22px;
color: #1a2b3c;
background: linear-gradient(135deg, #667eea, #764ba2);

<!-- Tailwind 任意值 -->
<div class="w-[327px] pt-[22px] text-[#1a2b3c] bg-[linear-gradient(135deg,#667eea,#764ba2)]">

任意值适用于所有工具类：h-[calc(100vh-4rem)]、grid-cols-[1fr_2fr_1fr]、translate-x-[-50%]。

响应式设计

Tailwind 采用移动端优先的断点前缀：

断点	等同于 CSS	前缀
移动端（默认）	所有宽度	（无）
SM	`@media (min-width: 640px)`	`sm:`
MD	`@media (min-width: 768px)`	`md:`
LG	`@media (min-width: 1024px)`	`lg:`
XL	`@media (min-width: 1280px)`	`xl:`

Tailwind v4 说明： 默认断点值不变。自定义断点改为在 CSS 的 @theme 块中定义（--breakpoint-3xl: 1920px;），不再使用 tailwind.config.js。

/* CSS 媒体查询 */
.hero { font-size: 1.5rem; }
@media (min-width: 768px) { .hero { font-size: 2.25rem; } }
@media (min-width: 1024px) { .hero { font-size: 3rem; } }

<!-- Tailwind 响应式类 -->
<h1 class="text-2xl md:text-4xl lg:text-5xl">主标题</h1>

状态变体

Tailwind 用前缀处理伪类：

/* CSS */
.btn:hover { background-color: #2563eb; }
.input:focus { outline: 2px solid #3b82f6; }

<!-- Tailwind -->
<button class="bg-blue-600 hover:bg-blue-700 transition-colors">按钮</button>
<input class="focus:ring-2 focus:ring-blue-500 focus:outline-none">

实战转换案例：卡片组件

/* 转换前：自定义 CSS */
.card {
  background-color: #ffffff;
  border-radius: 0.75rem;
  padding: 1.5rem;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.07);
  border: 1px solid #f3f4f6;
}

.card-title {
  font-size: 1.125rem;
  font-weight: 600;
  color: #111827;
  margin-bottom: 0.5rem;
}

.card-body {
  font-size: 0.875rem;
  color: #6b7280;
  line-height: 1.625;
}

<!-- 转换后：Tailwind -->
<div class="bg-white rounded-xl p-6 shadow-md border border-gray-100">
  <h3 class="text-lg font-semibold text-gray-900 mb-2">标题</h3>
  <p class="text-sm text-gray-500 leading-relaxed">正文内容。</p>
</div>

现有项目迁移策略

从组件开始，不要从页面开始：一次转换一个组件，而不是重写整个样式表。这样风险最低，项目始终保持可构建状态。

用 @apply 过渡：如果你偏好语义化类名但想用 Tailwind 的工具类，@apply 可以在 CSS 类中组合工具类：

.btn-primary {
  @apply inline-flex items-center px-4 py-2 bg-blue-600 text-white
         font-medium rounded-lg hover:bg-blue-700 transition-colors;
}

在 tailwind.config.js 中扩展主题：对于反复出现的自定义值，不要到处用任意值，而是在配置中统一定义：

module.exports = {
  theme: {
    extend: {
      colors: {
        brand: {
          500: '#1a73e8',
          600: '#1557b0',
        },
      },
      spacing: {
        18: '4.5rem',
        22: '5.5rem',
      },
    },
  },
};

保留原有 CSS 文件：迁移期间不要删除原始 CSS，使用 CSS Modules 或命名空间隔离新旧样式，待迁移完成后再清理。

CSS 转 Tailwind v4：有哪些变化，怎么调整

Tailwind v4 于 2025 年初发布，引入了重新设计的引擎和配置模型。如果你正在使用 v4 项目，或者需要将 CSS 转换为 v4 的工具类，以下是与 v3 的关键差异。

不再使用 `tailwind.config.js`

v4 将配置从 JavaScript 文件迁移到 CSS：

/* v3：tailwind.config.js */
module.exports = {
  theme: {
    extend: {
      colors: { brand: '#1a73e8' },
      spacing: { 18: '4.5rem' },
    },
  },
};

/* v4：主 CSS 文件 */
@import "tailwindcss";

@theme {
  --color-brand: #1a73e8;
  --spacing-18: 4.5rem;
}

原来的三条 @tailwind 指令（base、components、utilities）统一替换为一行 @import "tailwindcss"。

CSS 变量设计令牌

v4 中所有主题值（颜色、间距、字号等）都是 CSS 自定义属性，可以直接在自定义样式中引用，无需查找配置文件：

.custom-element {
  background-color: var(--color-blue-500);
  padding: var(--spacing-4);
}

v4 类名变化

部分工具类的默认值发生了偏移——原来的”无后缀”默认变体变得更细微，后缀也随之调整：

v3 类名	v4 等效类名	变化说明
`shadow`	`shadow-sm`	默认阴影变浅，用 `shadow-sm` 还原 v3 效果
`ring`	`ring-3`	默认描边宽度从 3px 降至 1px，用 `ring-3` 还原
`blur`	`blur-sm`	与阴影一致，默认模糊程度更轻
`drop-shadow`	`drop-shadow-sm`	同上

使用官方升级工具迁移

npx @tailwindcss/upgrade

该工具会自动将 tailwind.config.js 转换为 @theme 块，重命名 HTML/JSX 中的废弃类名，并更新 @tailwind 指令。先跑一遍升级工具，再用 CSS 转 Tailwind 工具处理剩余的自定义 CSS 片段。

在线转换工具

ZeroTool 的 CSS 转 Tailwind 工具可以实时将 CSS 属性块转换为对应的 Tailwind 工具类，直接粘贴 CSS 即可获取结果，无需安装任何工具。

立即使用 CSS 转 Tailwind 工具 →