Tailwind CSS 第一个样式

传统 CSS 写法

先回忆一下传统方式。你给元素一个 class，再在样式表里写规则：

<div class="card">这是一张卡片</div>

.card {
  padding: 1rem;
  background: #ecfdf5;
  color: #047857;
  font-weight: 700;
}

样式在另一个文件里，改样式要跳来跳去。

工具类写法

同样的效果，用 Tailwind 直接写在 class 上：

<div class="p-4 bg-emerald-100 text-emerald-700 font-bold">
  这是一张卡片
</div>

p-4 是内边距，bg-emerald-100 是浅绿背景，text-emerald-700 是深绿文字，font-bold 是加粗。一眼就能看出这个元素长什么样。

一个最小可运行页面

下面是一份最小 HTML 页面，已经接入 Tailwind。把它存成 index.html，用 Vite 之类跑起来，改 class 就能立刻看到变化。

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>第一个 Tailwind 页面</title>
  <link rel="stylesheet" href="/style.css">
</head>
<body>
  <h1 class="text-3xl font-bold text-blue-600 p-4">
    你好，Tailwind
  </h1>
  <p class="text-gray-700 p-4">
    改一改上面的 class，刷新看看效果。
  </p>
  <button class="bg-blue-600 text-white px-4 py-2 rounded m-4">
    点我
  </button>
</body>
</html>

配套的 style.css：

@import "tailwindcss";

所见即所得的思维

工具类带来的最大变化，是「写样式」和「写结构」合在一处：

• 你不需要想「这个块叫什么名字」，直接用 p-4、bg-...。
• 改样式就是改 class，删元素就是删样式，不会留下无用的 CSS。
• 团队读代码时，元素长什么样，看 HTML 就够了。

刚开始可能觉得 class 很长，写顺手后就回不去了。下一篇我们系统讲文字和颜色工具类。