不懂设计，也能用 Tailwind 制作出好看的网页

写在前面

最近在掘金上一篇介绍 Tailwind CSS 的文章里，发表了如下评论，并有掘友表示了疑惑。

本来想简单回复几句，写了两行发现这里面可以讲的的东西太多了，于是决定单独写篇文章解释一下：为什么使用 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。

这是我为了写这篇文章花了半天时间制作出的页面，这个页面所有样式均通过 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 像素网格」设计准则的，很容易就能设计出「整齐划一」的网页。

源码 / 在线预览

在线预览

项目配置部分就不放了，页面源码如下：

import { faker } from '@faker-js/faker'
import { Icon } from '@iconify/react'
import avatar from '../assets/avatar.png'

export default function BlogHome() {
  return (
    <div className="h-screen bg-zinc-800 pt-32">
      <main className="mx-auto flex w-[800px]">
        <aside className="flex w-40 shrink-0 flex-col gap-8">
          <div className="flex items-center">
            <img src={avatar} className="w-16 rounded-full border-2 border-gray-600" />
            <h1 className="grow text-center text-4xl font-bold text-white">令川</h1>
          </div>
          <div className="flex justify-between text-slate-200">
            <span className="flex items-center gap-2">
              <Icon icon="octicon:location-16" />
              <span>杭州</span>
            </span>
            <span className="flex items-center gap-2">
              <Icon icon="ps:work-case" />
              <span>前端开发</span>
            </span>
          </div>
          <div className="flex justify-between text-2xl text-slate-200">
            <Icon icon="iconamoon:email-fill" />
            <Icon icon="bxl:github" />
            <Icon icon="bxl:tiktok" />
            <Icon icon="codicon:twitter" />
          </div>
          <div className="text-xs leading-5 text-slate-300">
            React · Vue · Tailwind CSS · Tauri · Rust · Raycast · VS Code · Figma · Fig · JSBox · Proxyman · Cloudflare
          </div>
          <footer className="text-xs text-slate-400">
            <div>Copyright © 2023 lccl.cc</div>
            <div className="mt-2">京ICP备000111号-5</div>
          </footer>
        </aside>

        <div className="ml-24 flex flex-col gap-4">
          {[
            { year: 2023, postCount: 4 },
            { year: 2022, postCount: 6 },
            { year: 2021, postCount: 3 },
          ].map(({ year, postCount }) => {
            return (
              <section key={year}>
                <h3 className="text-xl font-bold text-slate-200">{year}</h3>
                {Array.from({ length: postCount }).map((_, idx) => {
                  return (
                    <div key={idx} className="mt-4 flex items-center gap-4">
                      <span className="flex-shrink-0 text-sm text-slate-400" style={{ fontFamily: 'Fira Code' }}>
                        {faker.date.month({ abbreviated: true }) + ' '}
                        {('0' + faker.number.int({ min: 1, max: 31 })).slice(-2)}
                      </span>
                      <span className="line-clamp-1 text-lg font-bold text-slate-300">{faker.lorem.sentence()}</span>
                    </div>
                  )
                })}
              </section>
            )
          })}
        </div>
      </main>
    </div>
  )
}

总结

通过该文，我们可以总结如下 Tailwind CSS 使用准则：

样式尽量通过 Tailwind CSS 实现
每个范畴的原子类，要克制自己只使用其中的少数几个
合理使用 Tailwind CSS 提供的色阶来表达层级关系、主次关系

再来回答一下开头提到的问题：为什么说使用 Tailwind CSS，即使不具备专业的设计知识，也能很容易制作出色彩搭配合理、样式风格统一的网页？

因为 Tailwind CSS 预设的设计系统，色彩系统专业好看，间距符合「4 像素网格」设计准则，其他诸如字体尺寸、阴影、容器宽度、羽化效果等预设也是很专业的，远比大部分不懂设计的我们设计出来的好看。使用 Tailwind CSS 设计网页，很重要的一点是要做到克制，每个范畴的原子类只用其中的几个（例如文字颜色只用 slate-200 slate-300 slate-400 这 3 个），就可以让不是平面设计专业的我们也能轻松设计出好看的网页。