自從我開始制作WordPress網(wǎng)站以來，大約15年里，沒有什么比在我的工作流程中添加Tailwind CSS對我的生產(chǎn)力以及我對前端開發(fā)的享受程度影響更大（而且差距很大）。

當(dāng)我開始使用Tailwind時，GitHub上有一個最新的、第一方存儲庫，描述了如何在WordPress中使用Tailwind。該存儲庫自2019年以來就沒有更新過。但缺乏更新并非說明Tailwind對WordPress開發(fā)人員的實用性。通過讓Tailwind發(fā)揮其最佳作用，同時讓W(xué)ordPress仍然是WordPress，可以利用這兩個平臺的最佳部分，并在更短的時間內(nèi)構(gòu)建現(xiàn)代網(wǎng)站。

本文中的最小設(shè)置示例旨在對原始設(shè)置存儲庫進行更新，修改為與最新版本的Tailwind和WordPress兼容。這種方法可以擴展到各種WordPress主題，從派生的默認主題到完全自定義的主題。

為什么WordPress開發(fā)者應(yīng)該關(guān)注Tailwind

在我們討論設(shè)置之前，值得回顧一下Tailwind的工作原理以及它在WordPress環(huán)境中的含義。

Tailwind允許您使用預(yù)先存在的實用程序類來設(shè)置HTML元素的樣式，從而無需您自己編寫大部分或全部網(wǎng)站的CSS。（想想像hidden用于display: hidden或uppercase用于text-transform: uppercase這樣的類。）如果您過去使用過Bootstrap和Foundation等框架，那么您在Tailwind CSS中會發(fā)現(xiàn)的最大區(qū)別在于其對設(shè)計的空白石板方法以及僅為CSS的輕量級特性，默認情況下只包含CSS重置。這些屬性允許高度優(yōu)化的網(wǎng)站，而不會將開發(fā)人員推向框架本身內(nèi)置的美學(xué)。

此外，與許多其他CSS框架不同，無法從現(xiàn)有的CDN加載Tailwind CSS的“標準”構(gòu)建。由于包含了所有實用程序類，生成的CSS文件將過于龐大。Tailwind提供了一個“Play CDN”，但它并非用于生產(chǎn)環(huán)境，因為它會顯著降低Tailwind的性能優(yōu)勢。（但是，如果您想進行快速原型設(shè)計或以其他方式試驗Tailwind而無需實際安裝它或設(shè)置構(gòu)建過程，它確實非常方便。）

這種需要使用Tailwind的構(gòu)建過程來創(chuàng)建特定于您的項目的框架實用程序類的子集，使得理解Tailwind如何決定包含哪些實用程序類以及此過程如何影響在WordPress編輯器中使用實用程序類變得非常重要。

最后，Tailwind積極的預(yù)檢（其CSS重置版本）意味著WordPress的某些部分與其默認設(shè)置并不完全適合該框架。

讓我們首先看看Tailwind在WordPress中哪些方面運行良好。

Tailwind和WordPress協(xié)同工作的方面

為了讓Tailwind在沒有大量自定義的情況下良好運行，它需要充當(dāng)給定頁面的主要CSS；這消除了WordPress中許多用例。

例如，如果您正在構(gòu)建一個WordPress插件，并且需要包含前端CSS，那么Tailwind的預(yù)檢將與活動主題直接沖突。同樣，如果您需要設(shè)置WordPress管理區(qū)域（編輯器外部）的樣式，則管理區(qū)域自己的樣式可能會被覆蓋。

有幾種方法可以解決這兩個問題：您可以禁用預(yù)檢并為所有實用程序類添加前綴，或者您可以使用PostCSS為所有選擇器添加命名空間。無論哪種方式，您的配置和工作流程都將變得更加復(fù)雜。

但是，如果您正在構(gòu)建主題，Tailwind可以直接使用。我已經(jīng)成功地使用經(jīng)典編輯器和塊編輯器創(chuàng)建了自定義主題，并且我相信隨著全站編輯的成熟，將會有許多全站編輯功能與Tailwind良好協(xié)同工作。

在她的博客文章“Gutenberg全站編輯不必是完整的”中，Tammie Lister將全站編輯描述為可以部分或全部采用的獨立功能集。全站編輯的全局樣式功能不太可能與Tailwind一起使用，但許多其他功能可能會。

因此：您正在構(gòu)建一個主題，Tailwind已安裝并配置，并且您正在面帶笑容地添加實用程序類。但是這些實用程序類會在WordPress編輯器中工作嗎？

通過規(guī)劃，可以！只要您提前決定要使用哪些實用程序類，實用程序類就可以在編輯器中使用。您無法打開編輯器并使用任何和所有Tailwind實用程序類；Tailwind對性能的強調(diào)內(nèi)置了僅包含主題使用的實用程序類的限制，因此您需要提前讓Tailwind知道哪些實用程序類在編輯器中需要，即使它們在代碼的其他地方不存在。

有許多方法可以做到這一點：您可以在Tailwind配置文件中創(chuàng)建一個安全列表；您可以在要使用塊編輯器設(shè)置樣式的自定義塊的代碼旁邊包含包含類列表的注釋；您甚至可以只創(chuàng)建一個文件，列出所有特定于編輯器的類，并告訴Tailwind將其作為它監(jiān)視類名的源文件之一。

提前確定編輯器類對我來說從未成為工作的障礙，但這仍然是我被問到最多關(guān)于Tailwind和WordPress之間關(guān)系的方面。

帶有最小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主題應(yīng)該做，而上面的代碼沒有做——比如分頁、帖子縮略圖、使用鏈接元素而不是排隊樣式表等等——但這足以顯示一個帖子并測試Tailwind是否按預(yù)期工作。

在Tailwind方面，我們需要三個文件：

• package.json
• tailwind.config.js
• Tailwind的輸入文件

在我們繼續(xù)之前，您需要npm。如果您不習(xí)慣使用它，我們有一個npm入門指南，這是一個不錯的起點！

由于還沒有package.json文件，我們將通過在終端中運行以下命令，在與index.php相同的文件夾中創(chuàng)建一個空的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數(shù)組添加類似"!**/vendor/**"的內(nèi)容來實現(xiàn)。但是，如果所有PHP文件都是主題的一部分，那么上面的內(nèi)容將有效！

我們可以將輸入文件命名為我們想要的任何名稱。讓我們創(chuàng)建一個名為tailwind.css的文件，并向其中添加以下內(nèi)容：

/*!
Theme Name: WordPress   Tailwind
*/

@tailwind base;
@tailwind components;
@tailwind utilities;

頂部的注釋是WordPress識別主題所必需的；三個@tailwind指令添加了Tailwind的每一層。

就是這樣！我們現(xiàn)在可以運行以下命令：

npx tailwindcss -i ./tailwind.css -o ./style.css --watch

這告訴Tailwind CLI使用tailwind.css作為輸入文件來生成我們的style.css文件。 --watch標志將在項目存儲庫中的任何PHP文件中添加或刪除實用程序類時持續(xù)重建style.css文件。

這就像一個Tailwind驅(qū)動的WordPress主題一樣簡單，但它不太可能是您想部署到生產(chǎn)環(huán)境的東西。因此，讓我們討論一些通往生產(chǎn)就緒主題的途徑。

將TailwindCSS添加到現(xiàn)有主題

您可能想要將Tailwind CSS添加到已經(jīng)擁有自己的原生CSS的現(xiàn)有主題的原因有兩個：

• 試驗將Tailwind組件添加到已設(shè)置樣式的主題中
• 將主題從原生CSS轉(zhuǎn)換為Tailwind

我們將通過在Twenty Twenty-One（WordPress默認主題）中安裝Tailwind來演示這一點。（為什么不是Twenty Twenty-Two？最新的WordPress默認主題旨在展示全站編輯，不適合Tailwind集成。）

首先，如果您的開發(fā)環(huán)境中沒有安裝該主題，您應(yīng)該下載并安裝它。之后我們只需要遵循以下幾個步驟：

• 在終端中導(dǎo)航到主題文件夾。
• 因為Twenty Twenty-One已經(jīng)擁有自己的package.json文件，所以無需創(chuàng)建新的文件即可安裝Tailwind：

npm install tailwindcss --save-dev

• 添加您的tailwind.config.json文件：

npx tailwindcss init

• 將您的tailwind.config.json文件更新為與上一節(jié)中的文件相同。
• 將Twenty Twenty-One現(xiàn)有的style.css文件復(fù)制到tailwind.css。

現(xiàn)在我們需要將三個@tailwind指令添加到tailwind.css文件中。我建議您按如下方式構(gòu)造tailwind.css文件：

/* WordPress主題文件頭在這里。*/

@tailwind base;

/* 所有現(xiàn)有CSS都在這里。*/

@tailwind components;
@tailwind utilities;

將基層立即放在主題標題之后，可以確保WordPress繼續(xù)檢測您的主題，同時還可以確保Tailwind CSS重置盡可能早地出現(xiàn)在文件中。

所有現(xiàn)有的CSS都位于基層之后，確保這些樣式優(yōu)先于重置。

最后，組件和實用程序?qū)泳o隨其后，因此它們可以優(yōu)先于任何具有相同特異性的CSS聲明。

現(xiàn)在，與我們的最小主題一樣，我們將運行以下命令：

npx tailwindcss -i ./tailwind.css -o ./style.css --watch

現(xiàn)在您的新的style.css文件每次更改PHP文件時都會生成，您應(yīng)該檢查修改后的主題與原始主題的細微渲染差異。這些是由Tailwind的CSS重置引起的，它比某些主題可能預(yù)期的重置得更徹底一些。對于Twenty Twenty-One，我做的唯一修改是向a元素添加text-decoration-line: underline。

解決了渲染問題后，讓我們添加來自Tailwind UI（Tailwind的第一方組件庫）的Header Banner組件。從Tailwind UI網(wǎng)站復(fù)制代碼，并將其粘貼到header.php中“跳至內(nèi)容”鏈接之后：

非常好！因為我們現(xiàn)在將要使用實用程序類來覆蓋內(nèi)置于主題中的一些現(xiàn)有的更高特異性的類，所以我們將向tailwind.config.js文件添加一行：

module.exports = {
  important: true,
  content: ["./**/*.php"],
  theme: {
    extend: {},
  },
  plugins: [],
}

這將所有Tailwind CSS實用程序標記為!important，以便它們可以覆蓋具有更高特異性的現(xiàn)有類。（我從未在生產(chǎn)環(huán)境中將important設(shè)置為true，但如果我正在將網(wǎng)站從原生CSS轉(zhuǎn)換為Tailwind，我?guī)缀蹩隙〞@樣做。）

通過向“了解更多”鏈接添加一個快速的no-underline類，并向關(guān)閉按鈕添加bg-transparent和border-0，我們就完成了：

看到Tailwind UI的組件合并到WordPress默認主題中看起來有點刺眼，但這很好地演示了Tailwind組件及其固有的可移植性。

從頭開始

如果您使用Tailwind創(chuàng)建一個新主題，您的過程將與上面的最小示例非常相似。您可能不希望直接從命令行運行Tailwind CLI，而是可能希望為開發(fā)和生產(chǎn)構(gòu)建創(chuàng)建單獨的npm腳本，并監(jiān)視更改。您可能還希望為WordPress編輯器創(chuàng)建一個單獨的構(gòu)建。

如果您正在尋找一個超越上面最小示例的起點——但不會超出它本身具有其自以為是的樣式的程度——我已經(jīng)創(chuàng)建了一個Tailwind優(yōu)化的WordPress主題生成器，靈感來自Underscores（_s），曾經(jīng)是規(guī)范的WordPress啟動主題。名為_tw，這是我希望在我第一次將Tailwind與WordPress結(jié)合使用時擁有的快速入門。它仍然是我所有客戶項目的第一步。

如果您愿意進一步偏離典型WordPress主題的結(jié)構(gòu)，并將Laravel Blade模板添加到您的工具包中，Sage是一個不錯的選擇，他們有一個針對Tailwind的設(shè)置指南來幫助您入門。

無論您選擇如何開始，我都鼓勵您花一些時間來適應(yīng)Tailwind CSS，并使用實用程序類來設(shè)置HTML文檔的樣式：起初它可能感覺不尋常，但您很快就會發(fā)現(xiàn)自己比以前承擔(dān)更多的客戶工作，因為您構(gòu)建網(wǎng)站的速度比以前更快——而且希望，像我一樣，在做的過程中更有樂趣。

以上是將CSS添加到新的和現(xiàn)有的WordPress主題的詳細內(nèi)容。更多信息請關(guān)注PHP中文網(wǎng)其他相關(guān)文章！