## 写在前面最近在掘金上一篇介绍 Tailwind CSS 的文章里，发表了如下评论，并有掘友表示了疑惑。 ![image.png](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/a55ca55fa83f4a0c97d0ab1bca6068d2~tplv-k3u1fbpfcp-watermark.image?) 本来想简单回复几句，写了两行发现这里面可以讲的的东西太多了，于是决定单独写篇文章解释一下：**为什么使用 Tailwind CSS，即使不具备专业的平面设计知识，也可以很容易设计出色彩搭配合理、样式风格统一、好看易用的网页？** 同时这篇文章也献给对设计一窍不通但又想设计好网站的同学，通过该文你可以掌握少数几个 Tailwind CSS 使用准则，就能设计出一个「还算好看、看起来不那么业余」的网站。 ## Tailwind 的部分作用如果没有 Tailwind CSS，在设计一款网页时我们可能会有如下烦恼： * 选取各种各样的色值：边框色、背景色、正文颜色、标题颜色、图标颜色……即使去配色网站上调配了一组颜色，也不一定可以直接用在整个网页中 * 为了保证布局规整可能你会想着用「4 像素网格」，很好，但这带来了各种计算 * 微调字体大小、行高时，好像怎么调都不太满意有了 Tailwind CSS，上面这些问题都可以迎刃而解： * 颜色：Tailwind CSS 中预置的这一套颜色，可以用在文字、背景、边框、阴影等大部分可以调整颜色的场景；而且这一套颜色都是专业设计师精挑细选过的，放心用即可。同一款颜色的不同色阶，如 `red-100` `red-200` ，也是做到了恰到好处的差别，我们可以很方便的将其用于区分元素的主次 * 间距：预置的 Tailwind CSS 间距系统就是按照「4 像素网格」设计的，如 `m-1` 代表 `margin: 4px` ， `p-4` 代表 `padding: 16px`。使用 Tailwind 排列元素，就是在遵循「4 像素网格」设计准则 * 字体尺寸：通过 `text-sm` `text-lg` 这些类设置字体尺寸时，会同时设置字体大小和行高，这个组合也是经过专业设计师精心设计过的，拥有最好的视觉效果，绝大部分情况下我们直接用就行 Tailwind CSS 拥有优秀的预设，但不代表我们可以随意使用其中的原子类，相反我们应该保持极致的克制。例如重要的文本，一律使用 `text-gray-800` ，对于普通文本，一律使用 `text-gray-700`，对于可以忽略的文本，一律使用 `text-gray-600` 。再例如对于一般的元素间距，一律使用 `m-4` ，如果需要较小的元素间距，一律使用 `m-1` …… *** 下面通过具体示例，介绍在实际中应该如何使用 Tailwind CSS。 ![image.png](https://p6-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/11a76da5cc604a04804f3acf8e03bed2~tplv-k3u1fbpfcp-watermark.image?) 这是我为了写这篇文章花了半天时间制作出的页面，这个页面所有样式均通过 Tailwind CSS 实现，没有使用任何组件库，或是类似 Bootstrap / Bulma 这种 CSS 框架。 ## 颜色 ### 背景色这个页面中，我需要选取一个「有质感的深灰色」作为底色，在 Tailwind CSS 的 **slate / gray / zinc / stone / neutral** 色系中 700 以上的色阶中选取一个即可，最终选定 `bg-zinc-800` 作为网页背景色。（Tailwind CSS 中的颜色真的很高级很有质感，好看！😍） ### 字体颜色既然网页的背景色是深灰色，那前景色应当是浅灰色，即偏白的颜色。设定字体颜色时，通常也会涉及设定字体大小，因为它们都是用来做一件事：控制用户的注意力。下面开始见证奇迹时刻，看张图：

你的阅读顺序是不是 333 → 111 → 444 → 222 ？字体尺寸越大、对比度越高，越能吸引用户注意力，更能吸引用户优先阅读；字体尺寸越小、对比度越低，越可能最后才读到，甚至被用户忽略。

* 「令川」作为网站昵称，我希望用户进来时首先看这个，因此仅此一次的使用了对比度最高的纯白色，并放大、加粗 * 下面 3 个块，依次使用了 `text-slate-200` `text-slate-300` `text-slate-400` 设置字体颜色，形成差异；可以看到 Tailwind CSS 每个色阶的差异恰到好处，很方便表达信息的主次关系 * `slate-400` 在当前网页上，是种对比度很低的颜色，我们将其用于最不重要甚至用户完全可以忽略的信息，同时字体缩小、变细；还需要注意，即使想要表达某处的信息不重要，设置字体颜色时也要保证一定的对比度，如果再升一个色阶使用 `text-slate-500` ，就会导致对比度过低，不利于阅读。

下面再看看文章列表区域颜色的设置：

也是按照信息的重要程度、主次关系，使用了 `text-slate-200` `text-slate-300` `text-slate-400` 。这里需要单独说明一下标题字体颜色选择。一开为其设置的是 `text-slate-200`，这是一个对比度较高的颜色，后来整体看下来，发现标题元素还是比较多的，**如果页面上有大量的元素使用的是高对比度的颜色，通常会为阅读体验带来「累」的感觉**，因此升了一级色阶，使用了对比度稍微低一点的 `text-slate-300` ，发现阅读体验确实好了一点。这也是 Tailwind CSS 色值系统设计的优秀之处，当你发现有个颜色不太对劲需要微调时，只需要稍微调整它的色阶，基本都能为你带来满意效果。想想，如果没有 Tailwind CSS，对于这种微调颜色色阶的需求，要么使用色阶工具，要么一点点的调整色值感受哪个更好看，无论哪种，都不及 Tailwind CSS 专业、便利。注意看，文字颜色这部分，除了只用到一次的 `text-white` ，其他全是从 `text-slate-200` `text-slate-300` `text-slate-400` 这 3 个中选一个作为文字的颜色，即使页面上有更多文本内容，即使在同一网站的其他页面，也需要这么用。这就是我说的，用 Tailwind CSS 要 **克制！** 尤其是色彩这部分，很多小白（包括当年的我）喜欢用各种花里胡哨的颜色，显得自己很「会」，但其实很「业余」。设计好看的网页，从减少用色开始！ ## 间距

间距的设定相较于颜色的设定要简单一些，因为只要是用 Tailwind CSS 的原子类来设定间距，都是遵循「4 像素网格」设计准则的，很容易就能设计出「整齐划一」的网页。 ## 源码 / 在线预览 [在线预览](https://blog-home.pages.dev/) 项目配置部分就不放了，页面源码如下： ```jsx import { faker } from '@faker-js/faker' import { Icon } from '@iconify/react' import avatar from '../assets/avatar.png' export default function BlogHome() { return (

{[ { year: 2023, postCount: 4 }, { year: 2022, postCount: 6 }, { year: 2021, postCount: 3 }, ].map(({ year, postCount }) => { return (

{year}

{Array.from({ length: postCount }).map((_, idx) => { return (

{faker.date.month({ abbreviated: true }) + ' '} {('0' + faker.number.int({ min: 1, max: 31 })).slice(-2)} {faker.lorem.sentence()}

) })}

) } ``` ## 总结通过该文，我们可以总结如下 Tailwind CSS 使用准则： * 样式尽量通过 Tailwind CSS 实现 * 每个范畴的原子类，要克制自己只使用其中的少数几个 * 合理使用 Tailwind CSS 提供的色阶来表达层级关系、主次关系再来回答一下开头提到的问题：为什么说使用 Tailwind CSS，即使不具备专业的设计知识，也能很容易制作出色彩搭配合理、样式风格统一的网页？因为 Tailwind CSS 预设的设计系统，色彩系统专业好看，间距符合「4 像素网格」设计准则，其他诸如字体尺寸、阴影、容器宽度、羽化效果等预设也是很专业的，远比大部分不懂设计的我们设计出来的好看。使用 Tailwind CSS 设计网页，很重要的一点是要做到 **克制**，每个范畴的原子类只用其中的几个（例如文字颜色只用 `slate-200` `slate-300` `slate-400` 这 3 个），就可以让不是平面设计专业的我们也能轻松设计出好看的网页。