Aphros的博客
Aphros的博客

设计体系——色彩与空间的哲学

Aphros Aphros 收录于 网页开发 和 Tailwind CSS
  约 3100 字 预计阅读 7 分钟 - 次阅读   - 条评论  
目录

第 1 节 概述

做设计最难的是什么？一致性。

同一个页面上，蓝色有十几种不同的蓝，间距有七八种不同的值，整个页面就显得杂乱无章。

Tailwind 用一套约束系统来解决这个问题。它不给你任意值，而是给你一组精心挑选的值——这个集合叫做设计令牌（design tokens）。你在这些值里挑选，而不是自己创造。

第 2 节 色彩体系

2.1 颜色命名

Tailwind 的颜色命名规则是：{颜色名}-{亮度}。

亮度范围从 50（最亮）到 950（最暗）：

1
2
3
4
5
6
7
8
9

slate-50   → 最浅的灰蓝色
slate-100  →  浅灰蓝色
slate-200
slate-300
...        →  中间的灰色调
slate-700
slate-800
slate-900  →  深灰蓝色
slate-950  →  最深的灰蓝色

完整色板包含 22 种颜色家族（v4 新增 taupe、mauve、mist、olive），每种从 50（最亮）到 950（最暗）。

images/02-color-palette.svg

最常用的几组：

颜色适用场景
slate / gray / zinc中性色，用于背景、边框、次要文字
blue / sky / indigo主色、链接、按钮
red / orange / amber错误提示、警告、强调
green / emerald / teal成功状态、积极反馈
purple / violet / pink品牌色、装饰元素
技巧

项目里一般用 2~3 种色系就够了。一种中性色（slate 或 gray）做背景和文字，一种主色（blue 或 indigo）做按钮和链接，一种强调色（red 或 green）做状态提示。

2.2 文字颜色

用 text-{color}-{shade} 来设置文字颜色：

1
2
3
4

<p class="text-gray-900">主要文字 —— 深灰色，用于正文</p>
<p class="text-gray-600">次要文字 —— 中灰色，用于辅助信息</p>
<p class="text-gray-400">占位文字 —— 浅灰色，用于提示文本</p>
<p class="text-blue-600">链接文字 —— 蓝色，可点击的文本</p>

images/tailwind-text-colors.svg

2.3 背景颜色

用 bg-{color}-{shade} 来设置背景：

1
2
3

<div class="bg-white">纯白背景</div>
<div class="bg-gray-50">极浅灰背景，常用于区块背景</div>
<div class="bg-blue-600 text-white">蓝色按钮背景，文字用白色</div>

2.4 透明度控制

在颜色后面加 /{透明度}，可以控制不透明度：

1
2
3
4
5

<div class="bg-blue-600/100">完全不透明</div>
<div class="bg-blue-600/75">75% 不透明</div>
<div class="bg-blue-600/50">半透明</div>
<div class="bg-blue-600/25">25% 不透明</div>
<div class="bg-blue-600/0">完全透明</div>

透明度和颜色值结合使用，在很多场景下很实用——比如半透明遮罩层：

1
2
3

<div class="fixed inset-0 bg-black/50">
  <!-- 半透明遮罩 -->
</div>

2.5 边框和环

边框颜色和文字颜色用同样的色板：

1
2
3

<div class="border border-gray-200">默认边框</div>
<div class="border-2 border-blue-500">蓝色边框</div>
<div class="ring-2 ring-blue-500">焦点环，常用于输入框聚焦状态</div>

2.6 在 v4 中自定义颜色

v4 用 @theme 指令来定义颜色，不再需要 tailwind.config.js：

1
2
3
4
5
6

@import "tailwindcss";
@theme {
  --color-primary: #3b82f6;
  --color-primary-dark: #2563eb;
  --color-accent: #f59e0b;
}

定义后，这些颜色就会生成对应的工具类：bg-primary、text-primary-dark、border-accent。

第 3 节 间距体系

3.1 为什么用倍数

Tailwind 的间距值不是随便取的。它基于 0.25rem（4px）的步进，构成一套比例体系：

images/02-spacing-scale.svg

类名值像素
p-00rem0px
p-px1px1px
p-0.50.125rem2px
p-10.25rem4px
p-20.5rem8px
p-30.75rem12px
p-41rem16px
p-51.25rem20px
p-61.5rem24px
p-82rem32px
p-102.5rem40px
p-123rem48px
p-164rem64px
p-205rem80px
p-246rem96px
说明

1rem = 浏览器的默认字号，通常是 16px。所以 p-4 = 1rem = 16px。

3.2 Margin（外边距）

Margin 控制元素之间的距离：

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12

<!-- 四周外边距 -->
<div class="m-4">四周 1rem</div>

<!-- 特定方向 -->
<div class="mt-4">上边距</div>
<div class="mb-4">下边距</div>
<div class="ml-4">左边距</div>
<div class="mr-4">右边距</div>

<!-- 双向 -->
<div class="mx-4">水平方向（左右）</div>
<div class="my-4">垂直方向（上下）</div>

3.3 Padding（内边距）

Padding 控制元素内容和边框之间的距离：

1
2
3
4

<div class="p-6 bg-gray-50 rounded-lg">
  <h2 class="text-lg font-bold">卡片标题</h2>
  <p class="mt-2 text-gray-600">卡片内容，文字和卡片边缘保持 1.5rem 距离。</p>
</div>

3.4 Gap（间距）

Gap 用在 Flex 和 Grid 容器中，控制子元素之间的间距：

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11

<div class="flex gap-4">
  <div class="bg-blue-500 p-4">项 1</div>
  <div class="bg-blue-500 p-4">项 2</div>
  <div class="bg-blue-500 p-4">项 3</div>
</div>

<div class="grid grid-cols-3 gap-6">
  <div class="bg-gray-100 p-4">卡片 1</div>
  <div class="bg-gray-100 p-4">卡片 2</div>
  <div class="bg-gray-100 p-4">卡片 3</div>
</div>

gap-4 让 flex 项之间的间距为 1rem，gap-6 让 grid 项之间的间距为 1.5rem。

3.5 负边距

用负值可以让元素向相反方向移动（注意前面加 -）：

1
2

<div class="-mt-4">向上移动 1rem</div>
<div class="-mx-6">左右向外扩展 1.5rem</div>

常用于让元素"溢出"容器，比如卡片中的图片延伸到边缘。

第 4 节 实战：第一节产品展示页

现在开始构建我们的项目。这是一个科技产品展示页，今天先搭建框架和配色。

先创建基础 HTML 结构：

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>星光科技 · 智能灯</title>
  <script src="https://unpkg.com/@tailwindcss/browser@4"></script>
</head>
<body>
  <!-- 导航栏 -->
  <nav class="bg-white border-b border-gray-100">
    <div class="max-w-5xl mx-auto flex items-center justify-between px-6 py-4">
      <span class="text-xl font-bold text-gray-900">星光科技</span>
      <div class="flex gap-6 text-gray-600">
        <a href="#" class="hover:text-gray-900">产品</a>
        <a href="#" class="hover:text-gray-900">特性</a>
        <a href="#" class="hover:text-gray-900">联系我们</a>
      </div>
    </div>
  </nav>

  <!-- 主内容 -->
  <main class="max-w-5xl mx-auto px-6 py-16">
    <h1 class="text-4xl font-bold text-gray-900">智能台灯 Lumina</h1>
    <p class="mt-4 text-lg text-gray-600">
      光线随你而变。一盏懂你的台灯。
    </p>
    <button class="mt-6 px-6 py-3 bg-blue-600 text-white rounded-lg hover:bg-blue-700">
      立即购买
    </button>
  </main>
</body>
</html>

这个页面现在有了统一的间距和配色。注意看：

  • px-6 py-4 导航栏内边距
  • gap-6 导航链接间距
  • py-16 主内容上下大间距
  • mt-4 标题和副标题的间距
  • mt-6 按钮和文字的间距
  • text-gray-900 主要文字和 text-gray-600 次要文字的颜色层级

所有这些值都来自 Tailwind 的设计系统，所以看起来自然协调。

本章小结
  • Tailwind 有 22 种颜色和 10 级亮度，用 {颜色}-{亮度} 来引用
  • 透明度用 /{数字} 控制
  • 间距基于 0.25rem 的倍数，形成一致的比例
  • Margin、Padding、Gap 三类间距各自有不同的使用场景
  • v4 用 @theme 指令来自定义颜色和间距

颜色和间距搭好了骨架，但文字才是页面的主角。下一篇我们来探索文字排印——标题、正文、引用的美学。

更新于 2026-07-29 
CC BY-NC-SA 4.0
TailwindCSS
返回 | 主页

目录

切换 选择 ESC 关闭
搜索引擎 Fuse.js