从 CSS 迁移到 Tailwind：实用指南

Tailwind CSS 已成为最流行的 CSS 框架之一，它提供了实用优先的方法，消除了对自定义类名和独立样式表文件的需求。如果你正在考虑将现有项目从传统 CSS 迁移到 Tailwind，本指南将帮助你完成这个过程。

使用我们的免费工具即时将 CSS 转换为 Tailwind 类 →

为什么要迁移到 Tailwind？

传统 CSS 往往随时间无限增长。每个新功能都会添加更多类，出现优先级冲突，死代码不断积累。Tailwind 解决了这些问题：

常见属性映射

以下是最常用的 CSS 属性及其 Tailwind 等价物：

/* Traditional CSS */
.card {
  display: flex;
  flex-direction: column;
  padding: 16px;
  margin: 0 auto;
  max-width: 640px;
  background-color: white;
  border-radius: 8px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

<!-- Tailwind equivalent -->
<div class="flex flex-col p-4 mx-auto max-w-2xl bg-white rounded-lg shadow-sm">
  ...
</div>

响应式设计

Tailwind 最大的优势之一是响应式设计变得非常直观。无需编写媒体查询，只需为工具类添加断点修饰符前缀：

/* Traditional CSS */
.container {
  padding: 8px;
  font-size: 14px;
}
@media (min-width: 768px) {
  .container {
    padding: 16px;
    font-size: 16px;
  }
}
@media (min-width: 1024px) {
  .container {
    padding: 24px;
    font-size: 18px;
  }
}

<!-- Tailwind equivalent -->
<div class="p-2 text-sm md:p-4 md:text-base lg:p-6 lg:text-lg">
  ...
</div>

Tailwind 采用移动优先策略。无前缀的工具类应用于所有屏幕尺寸。断点前缀（sm:、md:、lg:、xl:、2xl:）从该断点及以上生效。

颜色和间距

Tailwind 提供了开箱即用的一致间距刻度和颜色调色板：

间距刻度：Tailwind 使用 4px 基础单位。p-1 = 4px，p-2 = 8px，p-4 = 16px，p-8 = 32px。使用方括号设置任意值：p-[13px] 用于非标准值。

颜色：使用内置调色板（text-blue-500、bg-gray-100）或任意值（text-[#1a73e8]、bg-[rgb(255,0,0)]）。透明度修饰符可内联使用：bg-black/50 表示 50% 透明度。

/* CSS colors and spacing */
.alert {
  color: #dc2626;
  background-color: #fef2f2;
  padding: 12px 16px;
  border: 1px solid #fca5a5;
  border-radius: 6px;
}

<!-- Tailwind -->
<div class="text-red-600 bg-red-50 py-3 px-4 border border-red-300 rounded-md">
  ...
</div>

<!-- With arbitrary values when needed -->
<div class="text-[#dc2626] bg-[#fef2f2] p-[12px_16px] border border-[#fca5a5] rounded-[6px]">
  ...
</div>

Flexbox 和 Grid 转换

Flexbox 和 Grid 布局是 Tailwind 真正发光的地方。以下是常见布局模式的转换：

/* CSS: Centered flex container */
.center {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 16px;
}
<!-- Tailwind -->
<div class="flex justify-center items-center gap-4">

/* CSS: Space-between header */
.header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px 24px;
}
<!-- Tailwind -->
<header class="flex justify-between items-center py-4 px-6">

/* CSS: Responsive grid */
.grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 24px;
}
@media (min-width: 768px) {
  .grid { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1024px) {
  .grid { grid-template-columns: repeat(3, 1fr); }
}
<!-- Tailwind -->
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">

何时不应转换

Tailwind 很强大，但在某些情况下保留传统 CSS 更合理：

自动化转换

手动将 CSS 属性转换为 Tailwind 类非常耗时，特别是对于大型样式表。我们的 CSS to Tailwind 转换器可以即时将你的 CSS 映射为等效的 Tailwind 工具类，为你节省数小时的手动工作。

立即试用 CSS to Tailwind 转换器 →