核心理念

理解 Tailwind CSS 的核心理念是高效使用它的关键。本章将深入讲解功能类优先的设计思想和 Tailwind 的工作方式。

功能类优先

Tailwind CSS 的核心思想是"功能类优先"（Utility-First）。这意味着你应该使用小型的、单一目的的工具类来构建界面，而不是编写自定义 CSS。

传统方式 vs Tailwind 方式

传统方式： 先定义 CSS 类，然后在 HTML 中使用

<style>
  .notification {
    background-color: white;
    border-radius: 8px;
    padding: 16px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    display: flex;
    align-items: center;
    gap: 16px;
    max-width: 400px;
    margin: 0 auto;
  }
  .notification-icon {
    width: 48px;
    height: 48px;
    flex-shrink: 0;
  }
  .notification-title {
    font-size: 18px;
    font-weight: 600;
    color: #1f2937;
  }
  .notification-text {
    color: #6b7280;
    margin-top: 4px;
  }
</style>

<div class="notification">
  <img class="notification-icon" src="icon.svg" alt="">
  <div>
    <div class="notification-title">通知标题</div>
    <p class="notification-text">这是通知的内容描述</p>
  </div>
</div>

Tailwind 方式： 直接在 HTML 中使用工具类

<div class="mx-auto flex max-w-sm items-center gap-4 rounded-lg bg-white p-4 shadow-md">
  <img class="size-12 shrink-0" src="icon.svg" alt="">
  <div>
    <div class="text-lg font-semibold text-gray-800">通知标题</div>
    <p class="mt-1 text-gray-500">这是通知的内容描述</p>
  </div>
</div>

功能类优先的优势

开发速度快：不需要在 HTML 和 CSS 文件之间来回切换，也不需要思考类名。样式直接写在元素上，所见即所得。

修改更安全：每个工具类只影响当前元素，修改样式不会意外影响其他页面或组件。

维护更容易：六个月后回来维护代码，不需要回忆当初写的 CSS 是什么意思，直接看类名就明白。

代码更便携：结构和样式在同一个地方，复制粘贴组件时不会遗漏样式。

CSS 不会无限增长：工具类是可复用的，项目变大不会导致 CSS 文件线性增长。

命名约定

Tailwind CSS 的类名遵循一致的命名约定，掌握规律后很容易记忆。

基本格式

大多数工具类遵循 属性-值 的格式：

类名	CSS 属性	值
text-center	text-align	center
font-bold	font-weight	bold
bg-white	background-color	white
p-4	padding	1rem
m-2	margin	0.5rem

数值比例

间距、尺寸等使用数值比例系统：

<div class="p-1">padding: 0.25rem (4px)</div>
<div class="p-2">padding: 0.5rem (8px)</div>
<div class="p-4">padding: 1rem (16px)</div>
<div class="p-6">padding: 1.5rem (24px)</div>
<div class="p-8">padding: 2rem (32px)</div>

比例系统基于 4px 的基础单位，数值越大，间距越大。

方向修饰符

可以使用方向修饰符指定特定方向：

<div class="p-4">四个方向</div>
<div class="px-4">左右方向</div>
<div class="py-4">上下方向</div>
<div class="pt-4">上方</div>
<div class="pr-4">右侧</div>
<div class="pb-4">下方</div>
<div class="pl-4">左侧</div>

方向修饰符规则：

• t = top（上）
• r = right（右）
• b = bottom（下）
• l = left（左）
• x = 水平方向（左右）
• y = 垂直方向（上下）

常用工具类概览

布局类

<div class="flex">display: flex</div>
<div class="grid">display: grid</div>
<div class="block">display: block</div>
<div class="hidden">display: none</div>

<div class="flex items-center justify-center">
  Flexbox 居中布局
</div>

<div class="grid grid-cols-3 gap-4">
  三列网格布局
</div>

尺寸类

<div class="w-full">width: 100%</div>
<div class="w-1/2">width: 50%</div>
<div class="w-64">width: 16rem</div>
<div class="h-screen">height: 100vh</div>
<div class="max-w-md">max-width: 28rem</div>

间距类

<div class="p-4">内边距 1rem</div>
<div class="m-4">外边距 1rem</div>
<div class="gap-4">间隙 1rem</div>
<div class="space-y-4">子元素垂直间距</div>

文字类

<p class="text-sm">小号文字</p>
<p class="text-lg">大号文字</p>
<p class="text-2xl">超大号文字</p>
<p class="font-bold">粗体文字</p>
<p class="text-center">居中文字</p>
<p class="text-gray-500">灰色文字</p>

背景和边框

<div class="bg-white">白色背景</div>
<div class="bg-blue-500">蓝色背景</div>
<div class="border">1px 边框</div>
<div class="border-2">2px 边框</div>
<div class="rounded">圆角</div>
<div class="rounded-lg">大圆角</div>
<div class="rounded-full">完全圆形</div>

组合使用

Tailwind 的强大之处在于组合多个工具类创建复杂组件。

按钮示例

<button class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded">
  基础按钮
</button>

<button class="bg-transparent hover:bg-blue-500 text-blue-700 font-semibold hover:text-white py-2 px-4 border border-blue-500 hover:border-transparent rounded">
  轮廓按钮
</button>

<button class="bg-red-500 hover:bg-red-700 text-white font-bold py-2 px-4 rounded-full">
  圆形按钮
</button>

卡片示例

<div class="max-w-sm rounded overflow-hidden shadow-lg bg-white">
  <img class="w-full" src="/img/card-top.jpg" alt="图片">
  <div class="px-6 py-4">
    <div class="font-bold text-xl mb-2">卡片标题</div>
    <p class="text-gray-700 text-base">
      这是卡片的描述内容，可以包含多行文字。
    </p>
  </div>
  <div class="px-6 pt-4 pb-2">
    <span class="inline-block bg-gray-200 rounded-full px-3 py-1 text-sm font-semibold text-gray-700 mr-2 mb-2">
      标签1
    </span>
    <span class="inline-block bg-gray-200 rounded-full px-3 py-1 text-sm font-semibold text-gray-700 mr-2 mb-2">
      标签2
    </span>
  </div>
</div>

处理重复样式

使用 Tailwind 时，你可能会遇到重复的类组合。有几种处理方式：

使用组件抽象

在 React、Vue 等框架中，可以创建组件来封装重复的样式：

function Button({ children, variant = 'primary' }) {
  const baseClasses = 'font-bold py-2 px-4 rounded'
  const variants = {
    primary: 'bg-blue-500 hover:bg-blue-700 text-white',
    secondary: 'bg-gray-500 hover:bg-gray-700 text-white',
    outline: 'bg-transparent border border-blue-500 text-blue-500 hover:bg-blue-500 hover:text-white',
  }
  
  return (
    <button className={`${baseClasses} ${variants[variant]}`}>
      {children}
    </button>
  )
}

使用 @apply 指令

在 CSS 文件中使用 @apply 提取重复的类：

@layer components {
  .btn {
    @apply font-bold py-2 px-4 rounded;
  }
  .btn-primary {
    @apply bg-blue-500 hover:bg-blue-700 text-white;
  }
}

建议

优先使用组件抽象，@apply 仅在必要时使用。Tailwind 官方推荐保持工具类的使用方式。

小结

本章介绍了 Tailwind CSS 的核心理念：

• 功能类优先：使用小型、单一目的的工具类构建界面
• 命名约定：遵循 属性-值 格式，易于记忆和使用
• 数值比例：间距和尺寸使用基于 4px 的比例系统
• 方向修饰符：使用 t、r、b、l、x、y 指定方向
• 组合使用：组合多个工具类创建复杂组件
• 处理重复：使用组件抽象或 @apply 指令

下一章，我们将学习 Tailwind CSS 的布局系统。