我想更深入地了解 Tailwind CSS，所以我就深入研究了一下。

大家好，
我是Mandai，Wild团队负责开发工作的成员。

本文将介绍 Tailwind CSS 框架。
希望对那些在选择 CSS 框架时想要了解框架基本特性的人有所帮助。

Tailwind是什么？

Tailwind 是一个 CSS 框架。
虽然人们通常认为 CSS 框架是一系列即用型组件的集合，但 Tailwind 的概念略有不同；它是一个以实用性为先的 CSS 框架。

什么是实用性优先（Utility-First）？它本质上是一系列简单易用的功能，用于创建复杂的组件。
它就像一种简化过于复杂的 CSS 的方法。

整体感觉不像 Bootstrap 那样通过组合预制组件来搭建网站，而更像是通过叠加各种设置来构建布局，例如为元素设置圆角边框，或者应用类来使图像边缘变圆，使其看起来像图标。它
比 Bootstrap 更注重组件化，因此，如果您觉得 Bootstrap 的功能过于繁杂，所有布局看起来都千篇一律，但又不想从头开始编写 CSS，那么这个框架可能非常适合您。

字体大小和颜色信息也以适当的粒度级别进行定义，使其易于使用。

 

顺风特性

Tailwind CSS，Tailwind 的组件概念非常薄弱，编写代码的感觉与从头开始编写 CSS 非常相似。

由于编码过程主要涉及使用组件来实现复杂的设计，类规范往往会变得冗余。这看似不太好
，但另一方面，通过查看类，可以更容易地理解所应用的风格。

随着 CSS 功能日益丰富，代码量也随之增长，属性变得过于复杂。这种新
方法似乎重新组织了这些元素，从而达到了良好的平衡。

它当然可以用于响应式网站，而且你完全可以创建一些组件中没有的设计。
不过，我感觉它需要对 CSS 基础知识有一定的了解，所以我认为它的目标用户可能是中级或高级 CSS 用户。

或许是因为包含大量小组件，撰写本文时，Tailwind 1.9.6 版本的未压缩文件大小高达 2784.7KB。
即使压缩后，仍有 1967.4KB，这实在令人难以接受。
不过，有一个解决方案：删除所有不必要的样式定义，并仅保留必要的组件重新构建 Tailwind，根据官方文档，压缩后的文件大小应该在 10KB 左右。这
听起来很神奇，但请务必小心，因为要正确使用此功能，您需要了解一些事项。

 

如何使用 Tailwind

要开始使用 Tailwind，请使用 npm 或 yarn 安装。
命令与官方文档中的相同：

# npm $ npm install tailwindcss # yarn $ yarn add tailwindcss

 

在合适的位置创建一个合适的 CSS 文件，然后尝试构建它。

# 使用基本组件创建 CSS $ echo -e "@tailwind base;\n@tailwind components;\n@tailwind utilities;" > hogehoge.css # 构建 $ npx tailwindcss build hogehoge.css -o output.css tailwindcss 1.9.6 ? 正在构建：style.css Browserslist：caniuse-lite 已过时。请运行下一个命令 `yarn upgrade` ✅ 完成，耗时 4.99 秒 ? 大小：2.66MB ? 已保存到 output.css

 

我似乎忘记更新版本号了，但这只是基本的构建过程。

如果你直接使用原始文件，这没问题；但如果你想在生产环境中使用时对其进行压缩或 gzip 处理，则需要将其集成到 webpack 等构建工具中。

我用 webpack 对其进行了轻微压缩，成功将文件大小减少到 2.15MB。

即使压缩之后，文件还是这么大。简直难以置信。
显然我不能就这样发布，所以我打算用 PurgeCSS 删除未使用的样式，进一步减小文件大小。

我搭建构建环境是为了测试，所以一开始所有功能都未使用。但最终，生成了一个包含大量注释的 CSS 文件，大小达到了 7.5KB。
经过进一步压缩后，注释消失了，文件大小降至 668B。
运行 PurgeCSS 后的文件大小取决于它在网站上的使用情况，但使用 webpack 一次性完成从清理到压缩的所有步骤非常容易管理，而且实现难度也不高，因此使用起来很方便。事实上
，文件大小变化如此之大，似乎没有理由不使用它。

 

概括

这次，我介绍了一个名为 Tailwind 的 CSS 框架。它
与其他 CSS 框架略有不同，如果你想通过使用预构建组件来减少工作量，那么它并不推荐；但如果你想要反复微调和完善你的作品，我会推荐它。

看来 PurgeCSS 的设计初衷是通过组合小部件来创建布局，因此组合后的文件大小相当大。
根据我们的测试结果，最好将 PurgeCSS 与其他 CSS 框架结合使用。但如果它能大幅减小文件大小，那么或许值得考虑将其与其他 CSS 框架结合使用。

虽然这与主要文章关系不大，但 PurgeCSS 可以与 Tailwind 以外的 CSS 框架一起使用，因此看起来你可以用一个工具获得两种好处。

最后

我已推出“SEKARAKU Lab”，这是我所属系统开发公司的服务网站。Beyond
提供从服务器设计、构建到运维的一站式服务，如果您在服务器端开发方面遇到任何问题，欢迎随时联系我们。SEKARAKU
Lab：[https://sekarakulab.beyondjapan.com/](https://sekarakulab.beyondjapan.com/)

就这样。