不懂设计，也能用Tailwind制作出好看的网页TailwindCSS不仅是一个原子类框架，它预设的设计系统，专

如果没有TailwindCSS，在设计一款网页时我们可能会有如下烦恼：

有了TailwindCSS，上面这些问题都可以迎刃而解：

TailwindCSS拥有优秀的预设，但不代表我们可以随意使用其中的原子类，相反我们应该保持极致的克制。例如重要的文本，一律使用text-gray-800，对于普通文本，一律使用text-gray-700，对于可以忽略的文本，一律使用text-gray-600。再例如对于一般的元素间距，一律使用m-4，如果需要较小的元素间距，一律使用m-1……

下面通过具体示例，介绍在实际中应该如何使用TailwindCSS。

这个页面中，我需要选取一个「有质感的深灰色」作为底色，在TailwindCSS的slate/gray/zinc/stone/neutral色系中700以上的色阶中选取一个即可，最终选定bg-zinc-800作为网页背景色。

（TailwindCSS中的颜色真的很高级很有质感，好看！）

既然网页的背景色是深灰色，那前景色应当是浅灰色，即偏白的颜色。

设定字体颜色时，通常也会涉及设定字体大小，因为它们都是用来做一件事：控制用户的注意力。

下面开始见证奇迹时刻，看张图：

你的阅读顺序是不是333→111→444→222？

字体尺寸越大、对比度越高，越能吸引用户注意力，更能吸引用户优先阅读；字体尺寸越小、对比度越低，越可能最后才读到，甚至被用户忽略。

也是按照信息的重要程度、主次关系，使用了text-slate-200text-slate-300text-slate-400。

这里需要单独说明一下标题字体颜色选择。一开为其设置的是text-slate-200，这是一个对比度较高的颜色，后来整体看下来，发现标题元素还是比较多的，如果页面上有大量的元素使用的是高对比度的颜色，通常会为阅读体验带来「累」的感觉，因此升了一级色阶，使用了对比度稍微低一点的text-slate-300，发现阅读体验确实好了一点。

这也是TailwindCSS色值系统设计的优秀之处，当你发现有个颜色不太对劲需要微调时，只需要稍微调整它的色阶，基本都能为你带来满意效果。想想，如果没有TailwindCSS，对于这种微调颜色色阶的需求，要么使用色阶工具，要么一点点的调整色值感受哪个更好看，无论哪种，都不及TailwindCSS专业、便利。

注意看，文字颜色这部分，除了只用到一次的text-white，其他全是从text-slate-200text-slate-300text-slate-400这3个中选一个作为文字的颜色，即使页面上有更多文本内容，即使在同一网站的其他页面，也需要这么用。这就是我说的，用TailwindCSS要克制！尤其是色彩这部分，很多小白（包括当年的我）喜欢用各种花里胡哨的颜色，显得自己很「会」，但其实很「业余」。

设计好看的网页，从减少用色开始！

间距的设定相较于颜色的设定要简单一些，因为只要是用TailwindCSS的原子类来设定间距，都是遵循「4像素网格」设计准则的，很容易就能设计出「整齐划一」的网页。

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

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

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