将CSS添加到新的和现有的WordPress主题

自从我开始制作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积极的预检（其CSS重置版本）意味着WordPress的某些部分与其默认设置并不完全适合该框架。

让我们首先看看Tailwind在WordPress中哪些方面运行良好。

Tailwind和WordPress协同工作的方面

为了让Tailwind在没有大量自定义的情况下良好运行，它需要充当给定页面的主要CSS；这消除了WordPress中许多用例。

例如，如果您正在构建一个WordPress插件，并且需要包含前端CSS，那么Tailwind的预检将与活动主题直接冲突。同样，如果您需要设置WordPress管理区域（编辑器外部）的样式，则管理区域自己的样式可能会被覆盖。

有几种方法可以解决这两个问题：您可以禁用预检并为所有实用程序类添加前缀，或者您可以使用PostCSS为所有选择器添加命名空间。无论哪种方式，您的配置和工作流程都将变得更加复杂。

但是，如果您正在构建主题，Tailwind可以直接使用。我已经成功地使用经典编辑器和块编辑器创建了自定义主题，并且我相信随着全站编辑的成熟，将会有许多全站编辑功能与Tailwind良好协同工作。

在她的博客文章“Gutenberg全站编辑不必是完整的”中，Tammie Lister将全站编辑描述为可以部分或全部采用的独立功能集。全站编辑的全局样式功能不太可能与Tailwind一起使用，但许多其他功能可能会。

因此：您正在构建一个主题，Tailwind已安装并配置，并且您正在面带笑容地添加实用程序类。但是这些实用程序类会在WordPress编辑器中工作吗？

通过规划，可以！只要您提前决定要使用哪些实用程序类，实用程序类就可以在编辑器中使用。您无法打开编辑器并使用任何和所有Tailwind实用程序类；Tailwind对性能的强调内置了仅包含主题使用的实用程序类的限制，因此您需要提前让Tailwind知道哪些实用程序类在编辑器中需要，即使它们在代码的其他地方不存在。

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

提前确定编辑器类对我来说从未成为工作的障碍，但这仍然是我被问到最多关于Tailwind和WordPress之间关系的方面。

带有最小Tailwind CSS集成的最小WordPress主题

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

• style.css
• index.php

我们将使用Tailwind生成style.css。对于index.php，让我们从简单的东西开始：

<?php /**
 * The main template file.
 *
 * This is the most generic template file in a WordPress theme
 * and one of the two required files for a theme (the other being style.css).
 * It is used to display a page when nothing more specific matches a query.
 * E.g., it puts together the home page when no home.php file exists.
 *
 * @link https://developer.wordpress.org/themes/basics/template-hierarchy/
 *
 * @package WordPress
 * @subpackage Twenty_Twenty_One
 * @since Twenty Twenty-One 1.0
 */

get_header();
?>

<main id="site-content" role="main">

    <?php if ( have_posts() ) {

        while ( have_posts() ) {
            the_post();

            get_template_part( 'template-parts/content', get_post_type() );

        }

    } else {

        get_template_part( 'template-parts/content', 'none' );

    }
    ?>

</main><!-- #site-content -->

<?php get_footer(); ?>

有很多事情WordPress主题应该做，而上面的代码没有做——比如分页、帖子缩略图、使用链接元素而不是排队样式表等等——但这足以显示一个帖子并测试Tailwind是否按预期工作。

在Tailwind方面，我们需要三个文件：

• package.json
• tailwind.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

我们将通过在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文件：

/* WordPress主题文件头在这里。*/

@tailwind base;

/* 所有现有CSS都在这里。*/

@tailwind components;
@tailwind utilities;

将基层立即放在主题标题之后，可以确保WordPress继续检测您的主题，同时还可以确保Tailwind CSS重置尽可能早地出现在文件中。

所有现有的CSS都位于基层之后，确保这些样式优先于重置。

最后，组件和实用程序层紧随其后，因此它们可以优先于任何具有相同特异性的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的第一方组件库）的Header Banner组件。从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创建一个新主题，您的过程将与上面的最小示例非常相似。您可能不希望直接从命令行运行Tailwind CLI，而是可能希望为开发和生产构建创建单独的npm脚本，并监视更改。您可能还希望为WordPress编辑器创建一个单独的构建。

如果您正在寻找一个超越上面最小示例的起点——但不会超出它本身具有其自以为是的样式的程度——我已经创建了一个Tailwind优化的WordPress主题生成器，灵感来自Underscores（_s），曾经是规范的WordPress启动主题。名为_tw，这是我希望在我第一次将Tailwind与WordPress结合使用时拥有的快速入门。它仍然是我所有客户项目的第一步。

如果您愿意进一步偏离典型WordPress主题的结构，并将Laravel Blade模板添加到您的工具包中，Sage是一个不错的选择，他们有一个针对Tailwind的设置指南来帮助您入门。

无论您选择如何开始，我都鼓励您花一些时间来适应Tailwind CSS，并使用实用程序类来设置HTML文档的样式：起初它可能感觉不寻常，但您很快就会发现自己比以前承担更多的客户工作，因为您构建网站的速度比以前更快——而且希望，像我一样，在做的过程中更有乐趣。

以上是将CSS添加到新的和现有的WordPress主题的详细内容。更多信息请关注PHP中文网其他相关文章！