# 设计体系——色彩与空间的哲学 ## 概述 做设计最难的是什么？**一致性**。 同一个页面上，蓝色有十几种不同的蓝，间距有七八种不同的值，整个页面就显得杂乱无章。 Tailwind 用一套**约束系统**来解决这个问题。它不给你任意值，而是给你一组精心挑选的值——这个集合叫做**设计令牌（design tokens）**。你在这些值里挑选，而不是自己创造。 ## 色彩体系 ### 颜色命名 Tailwind 的颜色命名规则是：`{颜色名}-{亮度}`。 亮度范围从 `50`（最亮）到 `950`（最暗）： ```text 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` | 品牌色、装饰元素 | > [!tip] 技巧 > 项目里一般用 2~3 种色系就够了。**一种中性色**（slate 或 gray）做背景和文字，**一种主色**（blue 或 indigo）做按钮和链接，**一种强调色**（red 或 green）做状态提示。 ### 文字颜色 用 `text-{color}-{shade}` 来设置文字颜色： ```html

主要文字 —— 深灰色，用于正文

次要文字 —— 中灰色，用于辅助信息

占位文字 —— 浅灰色，用于提示文本

链接文字 —— 蓝色，可点击的文本

``` ![](images/tailwind-text-colors.svg) ### 背景颜色 用 `bg-{color}-{shade}` 来设置背景： ```html
纯白背景
极浅灰背景，常用于区块背景
蓝色按钮背景，文字用白色
``` ### 透明度控制 在颜色后面加 `/{透明度}`，可以控制不透明度： ```html
完全不透明
75% 不透明
半透明
25% 不透明
完全透明
``` 透明度和颜色值结合使用，在很多场景下很实用——比如半透明遮罩层： ```html
``` ### 边框和环 边框颜色和文字颜色用同样的色板： ```html
默认边框
蓝色边框
焦点环，常用于输入框聚焦状态
``` ### 在 v4 中自定义颜色 v4 用 `@theme` 指令来定义颜色，不再需要 `tailwind.config.js`： ```css @import "tailwindcss"; @theme { --color-primary: #3b82f6; --color-primary-dark: #2563eb; --color-accent: #f59e0b; } ``` 定义后，这些颜色就会生成对应的工具类：`bg-primary`、`text-primary-dark`、`border-accent`。 ## 间距体系 ### 为什么用倍数 Tailwind 的间距值不是随便取的。它基于 `0.25rem`（4px）的步进，构成一套**比例体系**： ![](images/02-spacing-scale.svg) | 类名 | 值 | 像素 | |------|-----|------| | `p-0` | `0rem` | 0px | | `p-px` | `1px` | 1px | | `p-0.5` | `0.125rem` | 2px | | `p-1` | `0.25rem` | 4px | | `p-2` | `0.5rem` | 8px | | `p-3` | `0.75rem` | 12px | | `p-4` | `1rem` | 16px | | `p-5` | `1.25rem` | 20px | | `p-6` | `1.5rem` | 24px | | `p-8` | `2rem` | 32px | | `p-10` | `2.5rem` | 40px | | `p-12` | `3rem` | 48px | | `p-16` | `4rem` | 64px | | `p-20` | `5rem` | 80px | | `p-24` | `6rem` | 96px | > [!info] 说明 > `1rem` = 浏览器的默认字号，通常是 16px。所以 `p-4` = `1rem` = 16px。 ### Margin（外边距） Margin 控制元素之间的距离： ```html
四周 1rem
上边距
下边距
左边距
右边距
水平方向（左右）
垂直方向（上下）
``` ### Padding（内边距） Padding 控制元素内容和边框之间的距离： ```html

卡片标题

卡片内容，文字和卡片边缘保持 1.5rem 距离。

``` ### Gap（间距） Gap 用在 Flex 和 Grid 容器中，控制子元素之间的间距： ```html
项 1
项 2
项 3
卡片 1
卡片 2
卡片 3
``` gap-4 让 flex 项之间的间距为 1rem，gap-6 让 grid 项之间的间距为 1.5rem。 ### 负边距 用负值可以让元素向相反方向移动（注意前面加 `-`）： ```html
向上移动 1rem
左右向外扩展 1.5rem
``` 常用于让元素"溢出"容器，比如卡片中的图片延伸到边缘。 ## 实战：第一节产品展示页 现在开始构建我们的项目。这是一个科技产品展示页，今天先搭建框架和配色。 先创建基础 HTML 结构： ```html 星光科技 · 智能灯

智能台灯 Lumina

光线随你而变。一盏懂你的台灯。

``` 这个页面现在有了统一的间距和配色。注意看： - `px-6 py-4` 导航栏内边距 - `gap-6` 导航链接间距 - `py-16` 主内容上下大间距 - `mt-4` 标题和副标题的间距 - `mt-6` 按钮和文字的间距 - `text-gray-900` 主要文字和 `text-gray-600` 次要文字的颜色层级 所有这些值都来自 Tailwind 的设计系统，所以看起来自然协调。 > [!summary] 本章小结 > - Tailwind 有 22 种颜色和 10 级亮度，用 `{颜色}-{亮度}` 来引用 > - 透明度用 `/{数字}` 控制 > - 间距基于 `0.25rem` 的倍数，形成一致的比例 > - Margin、Padding、Gap 三类间距各自有不同的使用场景 > - v4 用 `@theme` 指令来自定义颜色和间距 --- 颜色和间距搭好了骨架，但文字才是页面的主角。下一篇我们来探索**文字排印**——标题、正文、引用的美学。 --- > 作者: Aphros > URL: https://blog.papergate.top/posts/02.%E8%AE%BE%E8%AE%A1%E4%BD%93%E7%B3%BB%E8%89%B2%E5%BD%A9%E4%B8%8E%E7%A9%BA%E9%97%B4%E7%9A%84%E5%93%B2%E5%AD%A6/