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

大家好，
我是开发团队野生队的成员 Mandai。

在本文中，我想介绍一个名为 Tailwind 的 CSS 框架。
希望这篇文章能帮助你在选择 CSS 框架时了解它的类型。

Tailwind是什么？

Tailwind 是一个 CSS 框架。
提到 CSS 框架，你可能会想到它是一系列即用型实用组件的集合，但 Tailwind 的理念略有不同：它是一个提倡实用性优先的 CSS 框架。

你可能想知道“实用优先”是什么意思，但我认为它是一系列简单易用的函数，用于创建复杂的组件。
它就像是对过于复杂的 CSS 的一种精简概括。

这种感觉更像是通过堆叠各种设置来构建布局，例如为元素设置圆角边框，或者设置类来使图像轮廓变圆，使其看起来更像图标，而不是像 Bootstrap 那样通过组合现成的组件来构建网站。
由于它比 Bootstrap 更模块化，因此非常适合那些觉得 Bootstrap 功能和布局过于繁杂，但又不想从头编写 CSS 的用户。

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

 

顺风特性

Tailwind CSS，你会发现 Tailwind 的组件概念非常薄弱，编码感觉几乎就像从头开始编写 CSS 一样。

由于编码基于使用复杂设计的组件，类规范往往显得冗余。这看似不是什么好事，
但反过来说，通过查看类，可以更容易地理解所应用的风格。

随着 CSS 变得越来越复杂，需要编写的代码量也随之增加。属性变得过于繁杂。
现在看来，它们似乎经过重新组织，以达到一种良好的平衡。

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

或许是由于组件数量众多，撰写本文时，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 后的文件大小会根据网站对 CSS 的使用情况而有所不同，但能够一次性完成从使用 webpack 清理到压缩的所有步骤非常容易管理，而且实现起来也不算太难，所以我认为它很容易上手。
事实上，当文件大小变化如此之大时，似乎除了使用它别无选择。

 

概括

这次我们介绍了一个名为 Tailwind 的 CSS 框架。它
与其他 CSS 框架略有不同，因此如果您希望通过使用框架提供的组件来减少工作量，我不推荐使用它；但如果您想通过反复进行微调来改进代码，我则推荐使用它。

看起来布局是由许多小部分组合而成的，因此这些小部分组合起来的文件大小相当大。
根据测试结果，PurgeCSS 最好作为一个整体来使用，但如果文件大小能缩小到这种程度，或许可以考虑将其与其他 CSS 框架结合使用。

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

最后

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

就这样。