在我开始制作 WordPress 网站的 15 年左右时间里，没有什么比在我的工作流程中添加 Tailwind CSS 对我的生产力（以及我对前端开发的享受能力）产生了更大的影响（而且差距很大）。
当我开始使用 Tailwind 时，GitHub 上有一个最新的、第一方存储库，描述了如何在 WordPress 中使用 Tailwind。该存储库自 2019 年以来就没有更新过。但缺乏更新并非说明 Tailwind 对 WordPress 开发人员的实用性。通过允许 Tailwind 发挥其最佳作用，同时让 WordPress 仍然是 WordPress，可以利用这两个平台的最佳部分，并在更短的时间内构建现代网站。
本文中的最小设置示例旨在对该原始设置存储库进行更新，并修改为与最新版本的 Tailwind 和 WordPress 兼容。这种方法可以扩展到适用于各种 WordPress 主题，从分叉的默认主题到完全自定义的主题。
为什么 WordPress 开发人员应该关注 Tailwind
在讨论设置之前，值得退一步讨论 Tailwind 的工作原理以及它在 WordPress 上下文中意味着什么。
Tailwind 允许您使用预先存在的实用程序类来设置 HTML 元素的样式，从而无需您自己编写大部分或全部网站的 CSS。（想想像 hidden 用于 display: hidden 或 uppercase 用于 text-transform: uppercase 这样的类。）如果您过去使用过 Bootstrap 和 Foundation 等框架，那么您在 Tailwind CSS 中会发现的最大区别是其对设计的空白状态方法以及仅为 CSS 的轻量级特性，默认情况下仅包含 CSS 重置。这些属性允许高度优化的网站，而不会将开发人员推向框架本身内置的美学。
此外，与许多其他 CSS 框架不同，从现有 CDN 加载 Tailwind CSS 的“标准”构建是不可行的。由于包含了所有实用程序类，生成的 CSS 文件将过于庞大。Tailwind 提供了一个“Play CDN”，但它不适用于生产环境，因为它会大大降低 Tailwind 的性能优势。（但是，如果您想进行一些快速原型设计或以其他方式尝试使用 Tailwind 而无需实际安装它或设置构建过程，它确实非常方便。）
这种需要使用 Tailwind 的构建过程来创建特定于您项目的框架实用程序类的子集，使得理解 Tailwind 如何决定包含哪些实用程序类以及此过程如何影响 WordPress 编辑器中实用程序类的使用变得至关重要。
最后，Tailwind 的积极 Preflight（其版本的 CSS 重置）意味着 WordPress 的某些部分在其默认设置下不太适合该框架。
让我们从查看 Tailwind 在 WordPress 中哪些地方效果良好开始。
Tailwind 和 WordPress 在哪些方面配合良好
为了让 Tailwind 在没有大量自定义的情况下正常工作，它需要充当给定页面的主要 CSS；这消除了 WordPress 中的一些用例。
例如，如果您正在构建 WordPress 插件并且需要包含前端 CSS，则 Tailwind 的 Preflight 将与活动主题发生直接冲突。同样，如果您需要设置 WordPress 管理区域（编辑器之外）的样式，则管理区域自己的样式可能会被覆盖。
有几种方法可以解决这两个问题：您可以禁用 Preflight 并为所有实用程序类添加前缀，或者您可以使用 PostCSS 为所有选择器添加命名空间。无论哪种方式，您的配置和工作流程都将变得更加复杂。
但是，如果您正在构建主题，则 Tailwind 非常适合开箱即用。我已经成功地使用经典编辑器和块编辑器创建了自定义主题，并且我乐观地认为，随着完整站点编辑的成熟，将会有许多完整站点编辑功能与 Tailwind 配合良好。
在她的博文中“Gutenberg 完整站点编辑不必完整”，Tammie Lister 将完整站点编辑描述为可以部分或全部采用的独立功能集。完整站点编辑的全局样式功能不太可能与 Tailwind 兼容，但许多其他功能可能会兼容。
因此：您正在构建主题，Tailwind 已安装并配置，并且您面带微笑地添加实用程序类。但是，这些实用程序类是否可以在 WordPress 编辑器中使用？
通过计划，可以！只要您提前决定要使用哪些实用程序类，它们就可以在编辑器中使用。您无法打开编辑器并使用任何和所有 Tailwind 实用程序类；Tailwind 对性能的重视内置了仅包含主题使用的实用程序类的限制，因此您需要提前让 Tailwind 知道编辑器中需要哪些类，即使它们在代码的其他地方不存在。
有许多方法可以做到这一点：您可以在 Tailwind 配置文件中创建一个 安全列表；您可以在想要在块编辑器中设置样式的自定义块的代码旁边包含包含类列表的注释；您甚至可以创建一个列出所有编辑器特定类的文件，并告诉 Tailwind 将其作为其监视类名的源文件之一包含。
提前确定编辑器类对我来说从未成为工作中的阻碍，但这仍然是我被问及最多的关于 Tailwind 和 WordPress 之间关系的一个方面。
具有最小 Tailwind CSS 集成的最小 WordPress 主题
让我们从可能的 WordPress 最基本主题开始。只有两个必需文件
style.cssindex.php
我们将使用 Tailwind 生成 style.css。对于 index.php，让我们从一些简单的东西开始
<!doctype html>
<html lang="en">
<head>
<?php wp_head(); ?>
<link rel="stylesheet" href="<?php echo get_stylesheet_uri(); ?>" type="text/css" media="all" />
</head>
<body>
<?php
if ( have_posts() ) {
while ( have_posts() ) {
the_post();
the_title( '<h1 class="entry-title">', '</h1>' );
?>
<div class="entry-content">
<?php the_content(); ?>
</div>
<?php
}
}
?>
</body>
</html>WordPress 主题应该执行很多上述代码未执行的操作——例如分页、帖子缩略图、而不是使用 link 元素来排队样式表等等——但这足以显示帖子并测试 Tailwind 是否按预期工作。
在 Tailwind 方面，我们需要三个文件
package.jsontailwind.config.js- Tailwind 的输入文件
在继续之前，您需要 npm。如果您不习惯使用它，我们有一个 npm 初学者指南 是一个不错的起点！
由于尚不存在 package.json 文件，因此我们将通过在选择的终端中运行以下命令，在与 index.php 相同的文件夹中创建一个空 JSON 文件
echo {} > ./package.json有了这个文件，我们就可以安装 Tailwind 了
npm install tailwindcss --save-dev并生成我们的 Tailwind 配置文件
npx tailwindcss init在我们的 tailwind.config.js 文件中，我们需要做的就是告诉 Tailwind 在我们的 PHP 文件中搜索实用程序类
module.exports = {
content: ["./**/*.php"],
theme: {
extend: {},
},
plugins: [],
}如果我们的主题使用了 Composer，我们希望忽略 vendor 目录，方法是在 content 数组中添加类似 "!**/vendor/**" 的内容。但是，如果所有 PHP 文件都是主题的一部分，则上述内容将有效！
我们可以将输入文件命名为我们想要的任何名称。让我们创建一个名为 tailwind.css 的文件并向其中添加以下内容
/*!
Theme Name: WordPress + Tailwind
*/
@tailwind base;
@tailwind components;
@tailwind utilities;顶部的注释是 WordPress 识别主题所必需的；三个 @tailwind 指令添加了 Tailwind 的每一层。
就是这样！我们现在可以运行以下命令
npx tailwindcss -i ./tailwind.css -o ./style.css --watch这告诉 Tailwind CLI 使用 tailwind.css 作为输入文件生成我们的 style.css 文件。--watch 标志将在实用程序类从项目存储库中的任何 PHP 文件中添加或删除时持续重新构建 style.css 文件。
这可能是一个尽可能简单的 Tailwind 支持的 WordPress 主题，但它不太可能成为您想要部署到生产环境中的东西。因此，让我们讨论一些通往生产就绪主题的途径。
将 TailwindCSS 添加到现有主题
您可能希望将 Tailwind CSS 添加到已经拥有自己的原生 CSS 的现有主题有两个原因
- 尝试将 Tailwind 组件添加到已设置样式的主题
- 将主题从原生 CSS 转换为 Tailwind
我们将通过在 WordPress 默认主题 Twenty Twenty-One 中安装 Tailwind 来演示这一点。（为什么不是 Twenty Twenty-Two？最新的 WordPress 默认主题旨在展示完整站点编辑，不适合 Tailwind 集成。）
首先，如果您的开发环境中尚未安装主题，则应下载并安装它。之后，我们只需要遵循几个简单的步骤。
- 在您的终端中导航到主题文件夹。
- 由于 Twenty Twenty-One 已经拥有自己的
package.json文件，因此请在不创建新文件的情况下安装 Tailwind。
npm install tailwindcss --save-dev- 添加您的
tailwind.config.json文件。
npx tailwindcss init- 更新您的
tailwind.config.json文件，使其与上一节中的文件相同。 - 将 Twenty Twenty-One 现有的
style.css文件复制到tailwind.css。
现在我们需要将三个 @tailwind 指令添加到 tailwind.css 文件中。我建议您按如下方式构建 tailwind.css 文件：
/* The WordPress theme file header goes here. */
@tailwind base;
/* All of the existing CSS goes here. */
@tailwind components;
@tailwind utilities;将 base 层立即放在主题标题之后，可以确保 WordPress 继续检测您的主题，同时还确保 Tailwind CSS 重置在文件中的出现尽可能早。
所有现有的 CSS 都位于 base 层之后，确保这些样式优先于重置。
最后，components 和 utilities 层紧随其后，以便它们可以优先于任何具有相同特异性的 CSS 声明。
现在，与我们的最小主题一样，我们将运行以下命令：
npx tailwindcss -i ./tailwind.css -o ./style.css --watch每次您更改 PHP 文件时，都会生成新的 style.css 文件，因此您应该检查修改后的主题是否存在与原始主题的细微渲染差异。这些差异是由 Tailwind 的 CSS 重置引起的，它比某些主题预期的更彻底地重置了一些内容。在 Twenty Twenty-One 的情况下，我做的唯一修复是向 a 元素添加 text-decoration-line: underline。
解决了渲染问题后，让我们从 Tailwind 的第一方组件库 Tailwind UI 中添加 标题横幅组件。从 Tailwind UI 网站复制代码，并将其粘贴到 header.php 中“跳至内容”链接之后。
非常好！因为我们现在想要使用实用程序类来覆盖内置于主题中的一些现有较高特异性的类，所以我们要在 tailwind.config.js 文件中添加一行代码。
module.exports = {
important: true,
content: ["./**/*.php"],
theme: {
extend: {},
},
plugins: [],
}这将所有 Tailwind CSS 实用程序标记为 !important，以便它们可以覆盖具有更高特异性的现有类。（我从未在生产环境中将 important 设置为 true，但如果我正在将一个网站从普通 CSS 转换为 Tailwind，我几乎肯定会这样做。）
通过向“了解更多”链接添加一个快速的 no-underline 类，并向关闭按钮添加 bg-transparent 和 border-0，我们就完成了所有设置。
看到 Tailwind UI 的组件合并到 WordPress 默认主题中，看起来有点突兀，但这很好地演示了 Tailwind 组件及其固有的可移植性。
从头开始
如果您使用 Tailwind 创建一个新主题，您的流程将与上面的最小示例非常相似。您可能希望为开发和生产构建创建单独的 npm 脚本，并监视更改，而不是直接从命令行运行 Tailwind CLI。您可能还想专门为 WordPress 编辑器创建一个单独的构建。
如果您正在寻找一个超越上述最小示例的起点——但又不至于超出范围，从而带有自己的意见化的样式——我创建了一个受 Underscores (_s) 启发的 针对 Tailwind 优化的 WordPress 主题生成器，_s 曾经是规范的 WordPress 初始主题。这个名为 _tw 的生成器，是我第一次将 Tailwind 与 WordPress 结合使用时希望拥有的快速入门工具。它仍然是我所有客户项目的第一步。
如果您愿意进一步偏离典型 WordPress 主题的结构，并将 Laravel Blade 模板添加到您的工具集中，Sage 是一个不错的选择，并且他们有一个专门针对 Tailwind 的 设置指南 来帮助您入门。
无论您选择从哪里开始，我都鼓励您花一些时间熟悉 Tailwind CSS，以及使用实用程序类来为 HTML 文档设置样式：起初您可能会觉得不习惯，但您很快就会发现自己比以前承接了更多的客户工作，因为您构建网站的速度更快了——并且希望，像我一样，在构建过程中获得更多乐趣。
谢谢，这篇文章对我有用。在开始一个新网站时，我可能会使用 Tailpress，但这篇文章在其他情况下（例如向现有主题添加内容）也会有所帮助。
很高兴听到您觉得它有用！
我的目标是分享一个最小的设置，既展示最基本的集成方法，也展示如何将 Tailwind 添加到现有的 WordPress 主题中。我完全同意，在创建新网站时从现有的初始主题开始是有意义的！我为此构建了一个 针对 Tailwind 优化的 WordPress 主题生成器——如果您有机会查看一下，我很想听听您的想法！
我从未在 WordPress 上尝试过 Tailwind，因为菜单和子菜单。
如何为那些通常由 WordPress 函数生成的 HTML 组件设置样式？
我还会查找一些关于使用 Tailwind 为区块设置样式的信息，但我认为最简单的方法是遵循区块的典型类和 @apply 方法，然后只使用 CSS 类来使用 Tailwind 作为其余部分的样式。
当我第一次听说 Tailwind 时，我有过非常类似的担忧。几乎所有时候（以及我对菜单的经验表明确实如此），您可以使用
@apply通过 WordPress 生成的 HTML 中的类来为组件设置样式。偶尔您会发现生成的 HTML 中没有您需要的类或包装器元素，此时您可能需要通过过滤器修改生成的 HTML。我很少需要这样做，而且我更多地是在插件中遇到这种情况，而不是在 WordPress 核心代码中。
您完全正确，关于区块：我通常使用
@apply来为它们设置样式，并针对现有的类。嘿，Greg！
您发表了一篇精彩的文章，感谢您撰写这篇文章。
我想深入研究 Tailwind、主题和区块。我之前使用过 Kadence 作为第一个组织良好的主题和区块解决方案，其中全局参数按预期工作。
我能够感受到如今 Tailwind 的重要性。您是否可以提供更多关于您工作流程的教程？
更具体地说
——我对设计师的工作流程（例如 Figma）如何受到后端 Tailwind 的影响这个问题的答案感兴趣。
——我对您如何使用 Tailwind 从头开始（或从 Figma）创建页面感兴趣。
请告诉我可以在哪里找到答案，例如 YouTube 或其他地方。
最好的祝愿，Alex
嗨，Alex！
非常感谢您的评论——我很高兴听到您喜欢这篇文章！
我正在为 _tw 制作更多屏幕录制，但我目前还没有任何即将发布的。 （有一个 GitHub 问题，我计划在上线后将其关闭，因此如果您愿意，可以关注它。）
最近我的大部分工作都是从 Figma 开始的。我不知道我是否有自己的一套方法，因为我收到的设计差异很大。我倾向于首先确定哪些部分将在区块编辑器中由用户编辑，哪些部分将是结构化数据（使用类似高级自定义字段的东西）。我倾向于不相信交付的内容将拥有完全一致的颜色和字体大小/族，因此我进行自己的审核，而不是依赖于文件中包含的调色板。（您可能需要根据情况决定这是否必要。）
您可能会从 Tailwind Labs 的这个屏幕录制中获得一些启发
将自定义设计系统转换为 Tailwind CSS
（他们有很多很棒的第一方屏幕录制，但据我所知，没有专门针对 WordPress 的内容。）
希望对您有所帮助！
嘿，Greg
感谢您的文章，这里有一些很棒的内容，我认为您很好地解释了一些在 Tailwind CSS 和 WordPress 之间获得完全集成体验的障碍。
作为一名自由开发人员，我也遇到过这种情况。我想能够使用 Tailwind 构建我的主题，但我不希望被限制在使用任何子集的类。
这也是我开始构建 Gust 的原因之一，我希望您能看一看，并告诉我您的想法。它试图解决上面提到的大多数问题，允许开发人员使用 Tailwind 构建主题，但也允许您使用拖放编辑器使用 Tailwind 构建单个页面。它有点类似于 Tailpress 和您在上述评论中提到的 Tailwind 模板，但具有更深层次的集成。
目前 Gust 是一个付费主题，但如果您（以及其他读者）想尝试演示版，您可以查看 此处 的免费版本，它提供了相同的编辑体验，但缺少一些额外功能。希望您喜欢！
干杯！
Matt
嗨，Matt，
非常感谢您的评论——我过去看过 Gust 的网站，所以我非常熟悉您的项目！
关于使用类的子集：我的首要任务是确保我的客户以任何方式都不需要与 Tailwind 类交互；如果我正在处理新的页面布局或设计，我将在开发环境中进行，并且我可以在那里创建相应的组件。我的理想是使所有这些对客户都透明，确保他们无需在编辑页面时添加或删除任何类，无论这意味着使用区块编辑器样式还是使用自定义页面模板来处理结构化数据过多的页面，以使其适合区块编辑器。（并且我承认，这条线在哪里划分因开发人员而异。）
感谢您发布您的主题的免费版本！我一定会看看。
是的，你完全正确，我们不希望客户自己添加类。这完全取决于你的客户的技术水平，但我发现很多时候我会设置模板等，但客户仍然希望能够自己构建登陆页面或更新 xyz 页面，而无需进行硬编码或来找我构建。这个需求促使我们创建了预构建组件，以便客户只需拖放英雄区或其他内容，而无需处理类名、代码等，并且通过我们设置 Gust 的方式，除非组件包含在页面中，否则所有这些组件的 CSS 不会被包含。
我发现它在允许客户在没有技术知识的情况下编辑网站和避免为适应它而加载过多的未使用 CSS 之间取得了良好的平衡。
无论如何，正如你所说，这里的做法因开发人员而异，你的结果可能会有所不同。我发现它很有帮助，希望这里其他人也能从中受益 :)。
再次感谢！
嗨，Matt，
这完全说得通！你在客户工作中使用过块编辑器模式吗？我不知道 WordPress 核心是否已经完全实现了这一点，以便客户能够无缝使用，但它已经非常接近了。
再次感谢！
很棒的文章！我已经尝试将 Tailwind 集成到我的常规 WordPress 开发流程中有一段时间了。这对自定义主题开发很有帮助。
但是，对于全站编辑和块主题，我需要一个更简单的解决方案，不需要编译。所以我制作了这个 WordPress 的 Tailwind 插件。只需激活它，你就可以在前端和后端开始使用 TW，而不会有任何性能影响，因为我缓存了所有生成的 CSS。
如果你试用它并发现它也很有用，请随时将其添加到你的文章中！
我前几天遇到了你的插件！在我看来，为网站上的每个 URL 生成了一个单独的 CSS 文件——是这样吗？如果网站范围内的元素（如页眉或页脚的一部分）发生更改并需要新类，是否有任何重建缓存的机制？
目前还没有，但这是一个好主意！我将尽快发布它。
https://github.com/wpmotto/tailpress/issues/4
我也正在研究如何合并跨页面的某些重叠样式，以避免过多的重复。我将把它们作为链接样式表来加载，以便浏览器可以更好地利用来自 TW 的更全局样式的缓存。
我一定会密切关注！我看到了 GitHub 上关于用户生成内容的问题，我对您如何处理这方面的事情也很感兴趣。恶意用户粘贴数百或数千个 Tailwind 类来创建一个非常大的 CSS 文件是一种我从未考虑过的攻击媒介，因为我从未在服务器端页面上运行过 Tailwind。
完全正确，我之前也没有考虑过这一点，但我有一个想法，可能会解决这个问题，所以请关注未来几周的修复。
非常感谢
有没有办法在样式更新后不用按 Ctrl+F5？
非常欢迎！根据你的开发环境，你可以安装 Browsersync 以免你在每次更改后手动刷新。
为了方便使用，我有一个小小的建议，因为我们大多数人永远无法记住那个 Tailwind 命令。
你可以将其添加到 package.json 的“scripts”部分。
有了这个，你现在只需运行
npm run watch即可启动 Tailwind。编码愉快！
嗨，不错的博文，我是一个 Next.js 开发人员，想进入 WordPress 主题和 WooCommerce 的开发，使用现成的主题不适合我，所以一直在努力构建一个。这会是一个好方法吗？
太棒了，非常高兴听到这个消息！我最近将一个 Next.js 模板转换为 _tw 网站的 WordPress 主题，因此我对 Next.js 项目中包含的内容有了新的认识。我希望 Tailwind 和 WordPress 对你有所帮助！