我研究的内容是因为我想了解 Tailwind CSS，而不仅仅是进行一些研究。

你好。
我是Mandai，负责Wild 开发团队。

在这篇文章中，我想介绍一个名为 Tailwind 的 CSS 框架。
我希望当您在选择 CSS 框架时想要大致了解可用的框架类型时，这会有所帮助。

什么是顺风？

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，请从 npm 或yarn 安装它。
和官方文档是一样的，不过命令如下。

# npm $ npm install tailwindcss # 纱线 $ 纱线添加 tailwindcss

 

在适当的位置创建适当的 CSS 文件并尝试构建它。

# 使用基本组件创建 CSS $ echo -e "@tailwind base;\n@tailwind Components;\n@tailwindutilities;" > hogehoge.css # Build $ npx tailwindcss build hogehoge.css -o 输出。 ? 构建：style.css 浏览器列表：caniuse-lite 已过时。请运行下一个命令“yarn update” ✅ 4.99 秒内完成？大小：2.66MB ？

 

我发现我忽略了更新版本，但是基本的构建流程如上。

如果您想在原始状态下使用它，这很好，但如果您想使用 gzip 缩小或压缩它以供生产使用，则需要将其合并到 webpack 等构建中。

当我使用 webpack 稍微缩小它时，我能够将其减少到 2.15MB。

即使我缩小它也是这个尺寸。我耽心。
我无法按原样发布它，所以我将使用 PurgeCSS 删除未使用的样式以进一步减小大小。

我准备了一个用于验证目的的构建环境，所以它都没有被使用，但最终我得到了充满注释的 CSS，它有 7.5KB。
如果进一步缩小，该注释将消失，并变为 668B。
经过 PurgeCSS 后的文件大小根据站点内的使用量而有所不同，但它很容易管理，因为您可以使用 webpack 一次性清除和缩小，而且它很容易安装，我的印象是它是。易于使用，因为它并不昂贵。
事实上，如果尺寸变化这么大，似乎没有办法不使用它。

 

概括

这次我介绍了一个名为Tailwind的CSS框架。
如果你想通过使用与其他CSS框架稍有不同的框架准备的组件来减少工时，我真的不推荐它，但如果你想反复微调和刷新，我会我想推荐一下。

由于它似乎是通过组合小部件来创建布局的，因此小部件的文件大小相当大。
根据验证结果，我认为将PurgeCSS作为一个集合来使用是一个好主意，但如果尺寸可以减少到这种程度，也许可以考虑与其他CSS框架结合使用。

虽然与主线故事没有太大关系，但 PurgeCSS 可以与 Tailwind 以外的 CSS 框架一起使用，所以看起来你可以用一个来获得两种美妙的体验。

最后

我开设了我所属的系统开发服务网站“SEKARAKU Lab”。
Beyond是从服务器设计搭建到运营的一站式服务，所以如果您在服务器端开发方面遇到任何问题，请随时联系我们。
SEKARAKU 实验室： [https://sekarakulab.beyondjapan.com/](https://sekarakulab.beyondjapan.com/)

就是这样。