將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.
 * Eg, 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( &#39;template-parts/content&#39;, get_post_type() );

        }

    } else {

        get_template_part( &#39;template-parts/content&#39;, &#39;none&#39; );

    }
    ?>

</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中文網其他相關文章！