Tailwind CSS 的 11 个优点

近两年来，我几乎每天都在使用 Tailwind CSS。我喜欢使用它，它使我的开发工作流程变得更好。因此，我想分享一下在传统框架或自定义CSS上使用 Tailwind 的一些好处。

1 自定义

Tailwind 从设计之初就将可定制性考虑在内。它带有一个默认配置，你可以使用项目中的 “ttailwind.config.js” 来覆盖默认配置。从颜色到间距大小和字体的所有内容都可以使用配置文件轻松定制。不再修改框架文件，尝试找出要覆盖哪些类才能得到您想要的结果。

阅读更多关于定制 Tailwind 的内容 here.

2 内置的设计系统

配置文件的另一个好处是，它为你提供了一个可以使用的定制系统。在大多数情况下，如果你使用一致的间距、尺寸、颜色等，设计看起来会更好。由于 Tailwind 允许你预先配置所有的这些值(或提供合理的默认值)，只要坚持使用Tailwind 类，你会拥有了一个系统定制的好的开端。

3 不需要关心命名

在编写自定义 CSS 时，我最讨厌的事情之一就是命名类。哪些类应该是特定的?哪些类应该更通用? 你如何组织它们并确保它们以正确的顺序级联? Tailwind 通过提供99%时间可用的实用程序类解决了所有这些问题。唯一需要命名的时候是提取组件的时候，这对我来说很少见。

4 不需要切换上下文

使用 Tailwind 的速度如此之快的原因之一是你几乎不需要切换上下文。由于框架提供了几乎所有你需要的开箱即用的东西，所以在构建设计时很少会留下 HTML(或其他模板语言)。不再需要数百次从 HTML 切换到 CSS 这让设计看起来恰到好处。

5 容易开始新的项目

因为 Tailwind 提供了所有的命名和组织，所以它在项目之间非常一致。因此，如果开发人员对 Tailwind 非常熟悉，那么他们很可能会毫不费力地投入到一个新的 Tailwind 项目中。

6 更简单的创建组件

尽管 Tailwind 主要是一个实用的 CSS 框架，但是它使得从这些实用的组合中创建定制组件变得非常简单。在几乎每个项目中，我都使用 “@apply” 指令提取按钮和其他表单元素的组件类。还可以在 CSS 文件中使用 ' theme() ' 函数从配置文件中获取值，比如颜色和间距大小，而不是硬编码它们。

阅读和查看更多组件信息 here.

7 开发速度

因为您不需要命名一些东西，也不需要频繁地切换上下文，而且您也不需要为定制而与框架作斗争，所以使用 Tailwind 来创建原型和实现定制设计是非常快的。比大多数其他 CSS 框架快得多，也比编写自定义 CSS 快得多。Tailwind 提供了构建站点所需的几乎所有工具，因此很少需要编写任何自定义 CSS。如果您更喜欢像 .btn 和 .panel ，你可以很容易地去创建它们，以便在整个项目中使用。

8 支持响应式

Tailwind（生成CSS) 的所有公用程序都是使用响应版本生成的，能够让您的站点在移动、平板和桌面屏幕上看起来有不同的效果。除此之外，它还提供了 @screen 和 @responsive 指令来帮助（您）生成自定义响应式类。

更多关于 Tailwind 的响应性信息参见 这儿.

9 小尺寸 (合并后）

起初，当您看到由 Tailwind 输出的CSS文件时，您可能会对较大的文件大小(未压缩的477.6kb)感到震惊。值得庆幸的是，有一些方法可以极大地减小文件大小。

您可能免费获得的一个优化是 Gzip 或 Brotli 压缩。由于 Tailwind 构建方式，这些压缩算法比通常情况下更能减小文件大小。大多数服务器都默认启用了一个或两个。

第二个也是最有益的优化是使用 PurgeCss 。PurgeCss 通过扫描 HTML 或其他模板，移除任何未使用类来减小文件大小。通过配置 PurgeCss 来使用 Tailwind 很容易，故强烈建议在部署站点之前使用它。

根据我的经验，在使用 Brotli 和 PurgeCss 之后，预期有小于10kb的 CSS 文件，除非您正在向项目中添加大量定制CSS。

通常，随着项目的增长，CSS文件也会增长。当使用 Tailwind 时就不是这样了。由于您使用的是一组标准化的类，所以在项目的整个生命周期中，您的CSS文件将保持较小。

阅读更多关于控制文件大小的信息 点击此链接。

10 缓存益处

使用传统的 CSS 框架或自定义 CSS ，在更改设计时，很可能需要更改 CSS 文件。然而，当使用 Tailwind 工具时，由于您在标记中反复使用相同的类而不是更改 CSS 文件，所以您甚至不必破坏 CSS 缓存来对设计进行小的更改。这意味着用户不必经常重新下载 CSS文 件。

11 可靠性

当你使用传统的CSS时，如果不小心更改一个页面的设计可能会影响到另一个页面。使用Tailwind，您所做的任何更改都将在模板中进行，因此只影响正在处理的页面。这样可以更容易地更改单个页面，而不用担心可能造成的副作用。

结论

如果你对这些好处感兴趣，一定要试一试。我建议开始阅读文档并观看Tailwind screencasts 。

如果你已经在使用Tailwind，让我知道你喜欢或讨厌它。我很想听到一些反馈!

本文中的所有译文仅用于学习和交流目的，转载请务必注明文章译者、出处、和本文链接
我们的翻译工作遵照 CC 协议，如果我们的工作有侵犯到您的权益，请及时联系我们。

原文地址：https://laravel-news.com/11-benefits-of-...

译文地址：https://learnku.com/laravel/t/33826