现代UI设计离不开功能完善的样式开发工具，而Tailwind CSS凭借“实用优先”的设计理念，提供了强大的样式能力。不过Tailwind CSS的标准配置流程通常需要依赖 Node.js，这会给项目引入额外的依赖项。

开发者往往希望找到直接使用这类工具的方式，以避免不必要的开发开销。想彻底摆脱Node.js的依赖吗？不妨将Tailwind CSS的优势直接融入RAD Studio开发流程中。这种方式能大幅提升UI样式的开发效率。

想知道具体怎么做？继续阅读下文即可。

什么是 Tailwind CSS？

在我们讨论如何使用之前，让我们快速解释一下Tailwind CSS是什么以及它为什么那样工作。

Tailwind CSS 是一个以工具优先的 CSS 框架。与其编写自定义 CSS 或使用预构建的组件，您可以通过直接在 HTML 中应用小型工具类来组合您的用户界面。例如，与其编写：

你会写：

这种方法非常适合快速开发，但有一个陷阱：Tailwind 生成了成千上万的实用类，如果你包含所有这些类，你的 CSS 文件将非常大（ think 3-4MB）。这就是为什么使用 Tailwind CSS 的项目需要“构建”以仅包含在 HTML 中使用的类。

现在，我应该提到，Tailwind CSS 有点分裂。一些开发人员喜欢它提供的粒度控制，因为你可以不写自定义CSS而微调设计的各个方面。另一些人则发现生成的HTML因包含大量的实用类而显得混乱和难以阅读。我不是来选择一边的。这篇文章的目的是展示，如果你想在Delphi中使用Tailwind，你可以做到，并且它不一定要复杂。

这实际上是我喜欢 WebStencils 的原因之一：它对 CSS 和 JavaScript 完全不关心。你不会被任何特定的框架或方法锁定。想使用 Tailwind？去做吧。更喜欢 Bootstrap？那也可以。想写自定义 CSS？完全没问题。WebStencils 只是渲染你的模板，你放入其中的内容完全取决于你。

详细内容请参考：Tailwind CSS And RAD Studio: A Simple Approach Without Node.js