在过去的一个月里，由于一系列天文事件，我在两个视频会议中谈论了 Tailwind，并在 YouTube 上进行现场编码。我意识到要做好这件事是困难的，Adam Wathan（原始 Tailwind 作者）推广 Tailwind CSS 的工作是出色的。查看Adam 的 Tailwind 视频频道。

在谈话中我们遇到的录制困难之外，我意识到在 Joomla 上关于 Tailwind CSS 有几个常见问题。在这篇文章中，我将回答它们。

什么是 Tailwind CSS？

它是一个 以实用程序为首要的 CSS 框架。当然，下一个问题是什么是“以实用程序为首要的”CSS 框架。"以实用程序为首要的"的想法是，该框架提供构建模板和设计的工具。

乍一看，Tailwind CSS 只是一个“语言”（例如 text-purple-500）和生成 CSS 样式表的“工具”。没有更多。语言的语义也很直接，可以直接转换为等效的 CSS 样式。 Tailwind 语言之美在于其一致性，它围绕着核心 CSS 概念进行组织。

实用程序类是在传统 CSS 之上的一个语法层。因此，任何时候，你都可以将它们与常规 CSS 样式结合使用。

与 Bootstrap 的主要区别是什么？

Bootstrap 包含了你可能需要的所有东西，“电池包含”。例如：警告、按钮、导航栏、加载指示器、模态框等。

除此之外，如果你选择由模板工厂创建的模板，该模板包含 Bootstrap，由工厂创建的主题以及他们可能添加的附加功能。

最后，Bootstrap 定义了添加资源的方式，但很少有人敢于移除某些内容；以防万一它被使用。所有这些做法都会产生大量的样式；在实践中，其中大部分都没有被使用。在当今移动优先的时代，Bootstrap 对带宽使用和响应时间的影响很大。

另一方面，Tailwind 定义和处理的输出可以是“无”或仅仅是最基本的跨浏览器规范化。

您必须从头开始用 Tailwind CSS 设计一切吗？

是的，但...

• Tailwind 的语言表达能力强，语义清晰。它消除了记住 CSS 样式带来的痛苦。
• 样式定义的结果会被编译和优化。最终结果最小化。样式表加载量减少到几千字节。
• 最终样式可以无特定性。这是您的设计。产生的样式表无法提供任何关于内部使用 Tailwind 生成的线索。此外，在迁移遗留系统时，您可以重新定义当前类以更新设计。例如，您可以取经典的 Bootstrap 2.3 的 row 和 span 类，并在 grid 系统中重新定义它们。参考：网格模板列

Tailwind CSS 是否比 Bootstrap 更好？

不，它们不能比较。Bootstrap 更像是一个快速构建原型的 CSS 框架，通过组合经典组件来生成蓝图。另一方面，Tailwind CSS 是一个创建设计的框架，写入您需要的，编译将要使用的。

使用 Tailwind CSS 开发耗时吗？

Tailwind CSS 有一个学习曲线。首先，您学习这门语言，并将其应用于简单的 HTML 文件中。官方文档完整；还有大量的社区网站、速查表、VSCode 扩展等。

其次，是“工具”。Tailwind CSS 框架建立在 JavaScript 生态系统最新工具之上。您不需要知道如何使用 JavaScript 进行开发，但建议您熟悉前端开发中的 JavaScript 术语。从技术上讲，Tailwind 由 PostCSS 提供支持，这是一个使用 JavaScript 转换 CSS 的工具。因此，这个世界的所有优点和复杂性也都存在于 Tailwind 中。

一旦您理解了开发设计的基本流程，并在多次迭代后，是时候概念化和构建您自己的“组件”或“模块”了。您可以创建您的视觉定义，您的图案库，以便在不同项目中重用。在这个阶段，最终产品可以非常快速地产生。Tailwind 框架非常年轻；然而，已经有提供高级组件的解决方案，有助于加快定义特定元素库的过程。

因此，关于耗时的最终答案取决于您在比较什么。有时候，定制 Bootstrap 花费很多时间，产生的结果是平均的（> 300Kb 的样式）。每个 Bootstrap 项目都必须从基本定义开始。然后，完成定制模板和主题的相同步骤。Bootstrap 的定制需要一定的时间，并且在下一次项目中不会更快。

如何将 Tailwind CSS 集成到项目中

这个程序不是一成不变的，它取决于您的实践。根据我的经验，这是对我更好的程序

1. 用内联 Tailwind CSS 做设计原型，几个快速的 HTML 原型。从开始就测试在移动端。如果您打算重用 Joomla 生成的 HTML，您可以复制粘贴当前的 HTML 输出以匹配 Tailwind 输出的结构和类。
2. 优化样式，从原始的内联 HTML 移动到合适的样式表。避免类定义的重复。
3. 定义组件，如果有已知的 UI 组件（按钮、导航栏等），重新组织它们为组件（嵌套 CSS）。审查可用的类似 Tailwind 组件，或使用 Tailwind 类表达组件。
4. 将生成的样式表集成到网站上。

结论

请注意，Tailwind是一个全新的技术（于2019年5月13日发布的v1版本）。它是一种必须在Joomla的背景下进行解释的技术。

在我的实践中，如果可能的话，我现在正在无妥协地实施Tailwind：使用Tailwind意味着完全移除Bootstrap的遗留问题。在这个前提下，所有扩展的样式必须迁移以支持新的框架。如果这种方法不可行，最好是坚持使用Bootstrap并为独立的组件构建Tailwind样式的片段。

如果您决定学习或测试Tailwind以了解兔子洞有多深，以下是一些有用的链接

• Tailwind CSS - 官方页面
• Tailwind UI Components - 官方页面
• Tailwind CSS - 社区组件
• 用Tailwind CSS制作
• Tailwind CSS 快速参考
• Tailwind CSS 沙盒，一个用于测试Tailwind语言的沙盒
• 优秀的Tailwind CSS

而且，这些是我个人的工具

• Joomla中Tailwind CSS的介绍 - Tim Davis的Watch Me Work 068
• Tailwind CSS Webpack Starter Project
• 我的博客模板为Joomla，基于Tailwind CSS

总的来说，一整套现代工具正在涌现，受最新发展启发，准备好产生惊人的结果。它们远非完美，挑战在于学习如何超越原始的游乐场，并在真实复杂的网站上实施它们。Tailwind CSS只是即将到来的新到产品之一。欢迎欢迎。