Tailwind CSS 的 11 个优点

11 Benefits of Tailwind CSS

近两年来,我几乎每天都在使用 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 Confidence

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

Conclusion

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

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

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

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

本文为协同翻译文章,如您发现瑕疵请点击「改进」按钮提交优化建议
《L02 从零构建论坛系统》
以构建论坛项目 LaraBBS 为线索,展开对 Laravel 框架的全面学习。应用程序架构思路贴近 Laravel 框架的设计哲学。
《L04 微信小程序从零到发布》
从小程序个人账户申请开始,带你一步步进行开发一个微信小程序,直到提交微信控制台上线发布。
讨论数量: 1
likunyan

对我这个新手来说,写 CSS 的效率提升了,能够完成开发的同时,学习很多 CSS 知识。

用火狐用过的 PurgeCss 删除不使用的 CSS,体积会小很多。不过还是打算学完自己写个 CSS 文件。

1周前 评论

请勿发布不友善或者负能量的内容。与人为善,比聪明更重要!