我已经在专业环境中每天使用 Tailwind CSS 差不多两年了。我非常喜欢使用它，它让我的开发流程变得更加高效。所以我想分享一些我在使用 Tailwind 而不是传统框架或自定义 CSS 时所获得的优势。
- 自定义
Tailwind 从一开始就被设计成高度可定制的。它提供默认配置，但您可以通过项目中的 tailwind.config.js 文件轻松地覆盖默认配置。从颜色到间距大小和字体，所有内容都可以通过配置文件轻松定制。不再需要与框架作斗争，试图找出要覆盖哪些类才能获得想要的结果。
了解更多关于自定义 Tailwind 的信息，请访问 这里。
- 内置设计系统
配置文件的另一个优势是它为您提供了一个可以参考的设计系统。在大多数情况下，如果您使用一致的间距、尺寸、颜色等，设计看起来会更好。由于 Tailwind 允许您预先配置所有这些值（或提供合理的默认值），只要您坚持使用 Tailwind 类，您就拥有了一个相当不错的设计系统基础。
- 无需命名
我最讨厌编写自定义 CSS 的一件事就是命名类。哪些类应该是特定的？哪些类应该是更通用的？如何组织它们，并确保它们按正确顺序级联？Tailwind 通过提供可以在 99% 的情况下使用的实用程序类来解决所有这些问题。您只需要在提取组件时命名，而这种情况对我来说非常少见。
- 无需上下文切换
Tailwind 使用起来如此之快的原因之一是您几乎不需要切换上下文。由于框架开箱即用地提供了您几乎需要的一切，因此在构建设计时，您很少需要离开您的 HTML（或其他模板语言）。不再需要在 HTML 和 CSS 之间切换数百次，才能让设计看起来恰到好处。
- 轻松上手
由于 Tailwind 提供了所有命名和组织工作，因此它在不同项目之间非常一致。因此，如果开发人员对 Tailwind 有一定的了解，他们很有可能能够轻松地加入一个新的 Tailwind 项目。
- 创建组件很容易
尽管 Tailwind 主要是一个实用程序 CSS 框架，但它可以轻松地从这些实用程序的组合中创建自定义组件。在几乎每个项目中，我都会使用 @apply 指令为按钮和其他表单元素提取组件类。您也可以在 CSS 文件中使用 theme() 函数从配置文件（如颜色和间距大小）获取值，而不是硬编码它们。
了解更多关于提取组件的信息，请访问 这里。
- 开发速度
由于您不需要命名，也不需要经常切换上下文，并且您没有与框架作斗争进行自定义，因此使用 Tailwind 进行原型设计和实现自定义设计非常快。比大多数其他 CSS 框架快得多，而且肯定比编写自定义 CSS 快得多。Tailwind 提供了构建网站所需的大部分工具，因此您很少需要编写任何自定义 CSS。如果您更喜欢使用 .btn 和 .panel 等组件，那么创建它们并在整个项目中使用它们非常容易。
- 响应式无处不在
所有 Tailwind 的实用程序都生成有响应式版本，您可以使用它们使您的网站在移动设备、平板电脑和台式机屏幕尺寸上显示不同。除此之外，它还提供了 @screen 和 @responsive 指令来帮助生成响应式自定义类。
了解更多关于 Tailwind 响应式设计的信息，请访问 这里。
- 体积小（使用 PurgeCss 后）
最初，当您看到 Tailwind 输出的 CSS 文件时，您可能会对巨大的文件大小感到震惊（未压缩时为 477.6kb）。幸运的是，有一些方法可以帮助您大幅减少文件大小。
您可能免费获得的一种优化是 Gzip 或 Brotli 压缩。由于 Tailwind 的构建方式，这些压缩算法比平时更能减少文件大小。大多数服务器默认情况下都启用了其中一种或两种算法。
第二种也是最有效的优化是使用 PurgeCss。PurgeCss 通过扫描您的 HTML 或其他模板并删除所有未使用的类来减少文件大小。将 PurgeCss 与 Tailwind 配合使用非常容易，因此我强烈建议您在部署网站之前使用它。
根据我的经验，在使用 Brotli 和 PurgeCss 后，您可以预期 CSS 文件的大小将在 10kb 以下，除非您在项目中添加了很多自定义 CSS。
通常，随着项目的增长，您的 CSS 文件也会增长。使用 Tailwind 时并非如此。由于您使用的是一组标准化的类，因此您的 CSS 文件在项目的整个生命周期内都将保持较小。
了解更多关于控制文件大小的信息，请访问 这里。
- 缓存优势
使用传统的 CSS 框架或自定义 CSS 时，您很可能需要在更改设计时更改 CSS 文件。但是，当使用 Tailwind 时，由于您在标记中反复使用相同的类，而不是更改 CSS 文件，因此您甚至可能不需要清除 CSS 缓存来进行微小的设计更改。这意味着您的用户不需要经常重新下载您的 CSS 文件。
- 自信
当您使用传统方法进行 CSS 操作时，如果不小心，更改一个页面的设计可能会影响另一个页面。使用 Tailwind 时，您所做的任何更改都将在您的模板中进行，因此只会影响您正在操作的页面。这使得更改单个页面变得更容易，而无需担心可能造成的副作用。
结论
如果这些优势听起来像是您感兴趣的内容，那么一定要尝试一下 Tailwind。我建议您阅读文档，并观看 Tailwind 演示 以开始使用。
如果您已经在使用 Tailwind，请告诉我您喜欢或不喜欢哪些方面。我很乐意听到一些反馈！
TALL 栈（Tailwind CSS、Alpine.js、Laravel 和 Livewire）顾问，也是 designtotailwind.com 的所有者。
