在新的和现有的WordPress主题中添加Tailwind的CSS方法（附代码）在我开始制作WordPress网站的15

在我开始制作WordPress网站的15年左右的时间里，没有什么比把Tailwind CSS加入到我的工作流程中对我的生产力--以及我享受前端开发的能力--产生更大的影响了（而且还不是很接近）。

当我开始使用Tailwind时，GitHub上有一个最新的、第一方的资源库，描述了如何在WordPress中使用Tailwind。自2019年以来，该资源库一直没有更新。但是，这种缺乏更新的情况并不说明Tailwind对WordPress开发者的效用。通过允许Tailwind做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提供了一个 "播放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一起工作。

Tammie Lister在她的博文《Gutenberg全站编辑不一定是全站》中，将全站编辑描述为一套独立的功能，可以部分或全部采用。全站编辑的全局样式功能不太可能与Tailwind一起使用，但许多其他功能可能会。

所以。你正在构建一个主题，Tailwind已经安装并配置好了，你正满脸笑容地添加实用类。但是，这些实用类会在WordPress编辑器中工作吗？

通过规划，是的!只要你事先决定你想使用哪些实用类，就可以在编辑器中使用。你无法打开编辑器并使用任何和所有的Tailwind实用程序类；Tailwind对性能的强调包含了只包括你的主题所使用的实用程序类的限制，所以你需要提前让Tailwind知道哪些是在编辑器中需要的，尽管它们在你的代码的其他地方不存在。

有许多方法可以做到这一点。你可以在你的Tailwind配置文件中创建一个安全列表；你可以在你想在块编辑器中设置样式的自定义块的代码旁边，加入包含类列表的注释；你甚至可以直接创建一个文件，列出你所有编辑器特定的类，并告诉Tailwind将其作为它监测类名称的源文件之一。

在我的工作中，对编辑器类的需求从未阻碍过我，但这仍然是Tailwind和WordPress之间关系中我被问及最多的方面。

一个最小的WordPress主题与一个最小的Tailwind CSS集成

让我们从可能的最基本的WordPress主题开始。只有两个必要的文件。

style.css
index.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.json
tailwind.config.js
一个用于Tailwind的输入文件

在我们进一步讨论之前，你将需要npm。如果你不习惯使用它，我们有一个npm的初学者指南，这是一个很好的开始!

由于还没有package.json ，我们将在我们选择的终端运行这个命令，在同一文件夹中创建一个空的JSON文件，即index.php 。

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，我们会希望通过在content 数组中添加类似"!**/vendor/**" 的内容来忽略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 标志将持续地重建style.css 文件，因为我们项目库中的任何PHP文件都会添加或删除实用类。

这是一个由Tailwind驱动的WordPress主题可以想象到的最简单的情况，但它不太可能是你想要部署到生产中的东西。所以，让我们来谈谈通往生产就绪的主题的一些途径。

将TailwindCSS添加到一个现有的主题中

有两个原因，你可能想把Tailwind CSS添加到一个已经有自己的vanilla CSS的现有主题中。

实验将Tailwind组件添加到一个已经有风格的主题中去
将一个主题从vanilla CSS过渡到Tailwind。

我们将通过在Twenty Twenty-One（WordPress默认主题）中安装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

随着你的新的style.css 文件现在在你每次改变PHP文件时都会生成，你应该检查你修改后的主题与原来的主题是否有微小的渲染差异。这些都是由Tailwind的CSS重置引起的，它的重置比一些主题可能预期的要远一些。在Twenty Twenty-One的案例中，我所做的唯一修复是在a 元素中添加text-decoration-line: underline 。

解决了这个渲染问题后，让我们从Tailwind UI，即Tailwind的第一方组件库中添加标题横幅组件。从Tailwind UI网站上复制代码，并将其紧贴在header.php 中的 "跳到内容 "链接之后。

Showing a Tailwind CSS component on the front end of a WordPress theme.

相当不错因为我们现在要使用实用类来覆盖主题内建的一些现有的更高规格的类，我们要在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 ，我们就都准备好了。

Showing a Tailwind CSS component in the front end of a WordPress theme, but with more refined styles for the buttons and links.

看到Tailwind UI的组件并入WordPress的默认主题，看起来有点刺耳，但这是对Tailwind组件及其固有的可移植性的一个很好的展示。

从头开始

如果你正在用Tailwind创建一个新的主题，你的过程将看起来很像上面的最小例子。你可能想为开发和生产构建创建单独的npm脚本，并观察变化，而不是直接从命令行运行Tailwind CLI。你可能还想专门为WordPress编辑器创建一个单独的构建。

如果你正在寻找一个超越上述最小例子的起点--但不至于超越到带有自己的观点风格--我已经创建了一个Tailwind优化的WordPress主题生成器，其灵感来自Underscores（_s），曾经是WordPress的经典入门主题。它被称为_tw，这是我希望在我第一次将Tailwind与WordPress结合起来时拥有的快速启动工具。它仍然是我所有客户项目的第一步。

如果你愿意从典型的WordPress主题的结构中走得更远，并在你的工具包中加入Laravel Blade模板，Sage是一个很好的选择，他们有一个专门针对Tailwind的设置指南来帮助你开始。

无论你选择如何开始，我鼓励你花一些时间来适应Tailwind的CSS和使用实用类的HTML文档的风格。一开始可能会觉得不寻常，但是你很快就会发现自己比以前接了更多的客户工作，因为你建立网站的速度比以前更快--而且希望像我一样，做起来更有乐趣。