Tailwind CSS 从入门到进阶：用工具类构建现代前端界面

Yung原创2026/7/20大约 6 分钟

Tailwind CSS 从入门到进阶：用工具类构建现代前端界面

Tailwind CSS 是一个 utility-first CSS 框架。它不提供预设的按钮、卡片、导航栏组件，而是提供大量低层级工具类，让你直接在 HTML 或组件模板中组合出界面。

例如传统 CSS 可能这样写：

<button class="primary-button">保存</button>

.primary-button {
  padding: 8px 16px;
  border-radius: 6px;
  background: #2563eb;
  color: white;
  font-weight: 600;
}

Tailwind 写法：

<button class="rounded-md bg-blue-600 px-4 py-2 font-semibold text-white hover:bg-blue-700">
  保存
</button>

初看会觉得类名很多，但它的优势是：样式和结构在同一个组件里，改动直接、约束统一、响应式和状态样式表达清晰。

Tailwind 解决什么问题

传统 CSS 项目常见问题：

类名越来越多，命名困难。
CSS 文件持续膨胀。
删除页面后不知道哪些 CSS 还能删。
团队里颜色、间距、字号不统一。
修改样式需要在 HTML 和 CSS 文件之间来回跳。
组件库样式覆盖困难。

Tailwind 的思路是把常见 CSS 能力封装成原子工具类：

p-4 表示 padding。
text-sm 表示小字号。
bg-slate-900 表示背景色。
flex 表示弹性布局。
md:grid-cols-2 表示中等屏幕以上使用两列。

它不是让你不用 CSS，而是让大部分常见样式通过受约束的设计 token 表达。

安装与使用方式

Tailwind 可以接入 Vite、Vue、React、Next.js、Nuxt、Laravel 等项目。以 Vite 项目为例，通常安装：

npm install tailwindcss @tailwindcss/vite

在 Vite 配置中启用插件：

import { defineConfig } from "vite";
import tailwindcss from "@tailwindcss/vite";

export default defineConfig({
  plugins: [tailwindcss()],
});

在入口 CSS 中引入：

@import "tailwindcss";

然后就可以在组件里使用：

<div class="mx-auto max-w-4xl px-6 py-10">
  <h1 class="text-3xl font-bold text-slate-950">Tailwind 入门</h1>
  <p class="mt-3 text-slate-600">用工具类快速构建界面。</p>
</div>

实际项目要以官方安装指南为准，不同构建工具接入方式会有差异。

常用工具类分类

布局

<div class="flex items-center justify-between gap-4">
  <span>左侧</span>
  <button>右侧按钮</button>
</div>

常用类：

flex
grid
block
hidden
items-center
justify-between
gap-4
container
mx-auto

间距

<section class="px-6 py-12">
  <div class="space-y-4">
    <h2>标题</h2>
    <p>内容</p>
  </div>
</section>

常用类：

p-4
px-6
py-8
m-4
mt-6
space-y-4
gap-6

Tailwind 的间距来自统一比例尺，能避免页面里出现大量随机 13px、27px。

字体和颜色

<h1 class="text-3xl font-bold text-slate-950">控制台</h1>
<p class="text-sm leading-6 text-slate-600">最近 24 小时服务运行稳定。</p>

常用类：

text-sm
text-lg
text-3xl
font-medium
font-bold
leading-6
text-slate-600
bg-white

边框和圆角

<div class="rounded-lg border border-slate-200 bg-white p-4 shadow-sm">
  卡片内容
</div>

常用类：

border
border-slate-200
rounded
rounded-md
rounded-lg
shadow-sm

响应式设计

Tailwind 使用断点前缀实现响应式。

<div class="grid grid-cols-1 gap-4 md:grid-cols-2 xl:grid-cols-4">
  <div>卡片 1</div>
  <div>卡片 2</div>
  <div>卡片 3</div>
  <div>卡片 4</div>
</div>

含义：

默认一列。
md 及以上两列。
xl 及以上四列。

常见断点：

sm
md
lg
xl
2xl

Tailwind 默认是移动优先。先写移动端样式，再用断点逐步增强桌面端。

状态样式

Tailwind 用前缀表示状态：

<button class="rounded-md bg-slate-900 px-4 py-2 text-white hover:bg-slate-700 disabled:cursor-not-allowed disabled:opacity-50">
  提交
</button>

常用状态：

hover:
focus:
active:
disabled:
visited:
checked:
focus-visible:

也可以组合响应式和状态：

<button class="bg-blue-600 hover:bg-blue-700 md:px-6">
  保存
</button>

深色模式

如果项目启用深色模式，可以这样写：

<div class="bg-white text-slate-950 dark:bg-slate-950 dark:text-slate-100">
  内容
</div>

深色模式不是简单反色。要关注：

背景层级。
文本对比度。
边框颜色。
阴影在暗色背景下是否有效。
图表颜色是否可读。

主题定制

Tailwind 的关键价值是设计系统约束。项目中不要到处写任意颜色，应该把品牌色、间距、字体放进主题。

常见定制项：

颜色
字体
间距
圆角
阴影
断点

设计系统稳定后，组件写起来会很快。

例如你可以在项目中形成约定：

主按钮：bg-slate-950 text-white hover:bg-slate-800
次按钮：border border-slate-300 bg-white text-slate-900
危险按钮：bg-red-600 text-white hover:bg-red-700

组件抽象

Tailwind 不等于所有地方都复制一长串 class。

当某组样式重复出现时，应该抽成组件。

React 示例：

function Button({ variant = "primary", children, ...props }) {
  const variants = {
    primary: "bg-slate-950 text-white hover:bg-slate-800",
    secondary: "border border-slate-300 bg-white text-slate-900 hover:bg-slate-50",
  };

  return (
    <button
      className={`rounded-md px-4 py-2 text-sm font-medium ${variants[variant]}`}
      {...props}
    >
      {children}
    </button>
  );
}

Vue 示例：

<template>
  <button :class="classes">
    <slot />
  </button>
</template>

<script setup>
import { computed } from "vue";

const props = defineProps({
  variant: { type: String, default: "primary" },
});

const classes = computed(() => [
  "rounded-md px-4 py-2 text-sm font-medium",
  props.variant === "primary"
    ? "bg-slate-950 text-white hover:bg-slate-800"
    : "border border-slate-300 bg-white text-slate-900 hover:bg-slate-50",
]);
</script>