WordPressのWebサイトを作成し始めてから、約15年で、私がどれだけ生産的であるか、フロントエンド開発でどれだけ楽しんだかに大きな影響を與えていません（そして大きなギャップはありませんでした）。

Tailwindを使用し始めたとき、WordPressでTailwindを使用する方法を説明する最新のファーストパーティリポジトリがGitHubにありました。リポジトリは2019年から更新されていません。しかし、更新の欠如は、WordPress開発者の追い風(fēng)の実用性を示していません。 WordPressは両方のプラットフォームの最良の部分であり、より少ない時(shí)間で最新のWebサイトを構(gòu)築することで、Tailwindをその最高の狀態(tài)で作業(yè)させることにより。

この記事の最小設(shè)定の例は、元の設(shè)定リポジトリを更新するように設(shè)計(jì)されており、TailwindとWordPressの最新バージョンと互換性があるように変更されています。このアプローチは、派生したデフォルトのテーマから完全にカスタムのテーマまで、さまざまなWordPressテーマに拡張できます。

WordPress開発者がTailwindに従う必要がある理由

設(shè)定について議論する前に、Tailwindの仕組みとWordPress環(huán)境での意味を確認(rèn)する価値があります。

Tailwindを使用すると、既存のユーティリティクラスを使用してHTML要素をスタイリングでき、WebサイトのCSSを自分で作成する必要性を排除できます。 （ hidden for display: hiddenまたはtext-transform: uppercaseのuppercase ：大文字のようなクラスについて考えてみましょう。これらのプロパティにより、開発者をフレームワーク自體の美的組み込みに押し付けることなく、高度に最適化されたWebサイトが可能になります。

さらに、他の多くのCSSフレームワークとは異なり、既存のCDNからテールワインドCSSをロードするための「標(biāo)準(zhǔn)」ビルドを?qū)g行できません。生成されたCSSファイルは、含まれているすべてのユーティリティクラスのために大きすぎます。 Tailwindは「Play CDN」を提供しますが、Tailwindのパフォーマンスの利點(diǎn)を大幅に削減するため、生産環(huán)境では使用されません。 （ただし、迅速なプロトタイピングを行う場(chǎng)合や、実際にインストールしたり、ビルドプロセスを設(shè)定したりせずにTailwindを試してみたい場(chǎng)合は、本當(dāng)に便利です。）

これには、Tailwindのビルドプロセスを使用して、プロジェクトに固有のフレームワークユーティリティクラスのサブセットを作成する必要があります。Tailwindがどのユーティリティクラスが含まれているかを決定する方法と、このプロセスがWordPressエディターでのユーティリティクラスの使用にどのように影響するかを理解することが非常に重要です。

最後に、TailwindのAggressive Sprelight（そのCSSリセットバージョン）は、WordPressの一部の部分がデフォルト設(shè)定にフレームワークに正確に適合しないことを意味します。

まず、Tailwindのどの側(cè)面がWordPressでうまく機(jī)能するかを見てみましょう。

TailwindとWordPressの側(cè)面が一緒に動(dòng)作します

Tailwindが多くのカスタマイズなしでうまく実行されるには、特定のページのメインCSSとして機(jī)能する必要があります。

たとえば、WordPressプラグインを構(gòu)築しており、フロントエンドCSSを含める必要がある場(chǎng)合、TailwindのPreflightはアクティブなテーマと直接競(jìng)合します。同様に、WordPress管理エリア（エディターの外部）をスタイリングする必要がある場(chǎng)合、管理エリアのスタイルが上書きされる場(chǎng)合があります。

これらの2つの問(wèn)題を解決するには、いくつかの方法があります。FREATLIGHTを無(wú)効にして、すべてのユーティリティクラスをプレフィックスするか、POSTSを使用してすべてのセレクターの名前空間を追加できます。いずれにせよ、構(gòu)成とワークフローはより複雑になります。

ただし、テーマを作成している場(chǎng)合は、Tailwindを直接使用できます。クラシックエディターとブロックエディターを使用してカスタムテーマを作成しましたが、サイト全體の編集が成熟するにつれて、Tailwindでうまく機(jī)能する多くのサイト全體の編集機(jī)能があると思います。

彼女のブログ投稿では、「Gutenbergサイト全體の編集者が完全である必要はありません」とTammie Listerは、サイト全體の編集者を、部分的または完全に採(cǎi)用できるスタンドアロン機(jī)能セットとして説明しています。サイト全體の編集のためのグローバルスタイルの機(jī)能は、Tailwindで動(dòng)作する可能性は低いですが、他の多くの機(jī)能は可能性があります。

だから：あなたはテーマを構(gòu)築し、Tailwindがインストールされ、構(gòu)成されており、笑顔でユーティリティクラスを追加しています。しかし、これらのユーティリティクラスはWordPressエディターで機(jī)能しますか？

計(jì)畫を通して、あなたはできます！ユーティリティクラスは、使用するユーティリティクラスを事前に決定する限り、エディターで利用できます。エディターを開いて、すべてのTailwindユーティリティクラスを使用することはできません。テールウィンドは、トピックのみが使用するユーティリティクラスに組み込みの制限があるため、コードの他の場(chǎng)所に存在しなくても、Tailwindを事前に知らせる必要があります。

これを行うには、Tailwind構(gòu)成ファイルにセーフリストを作成できます。

編集者のクラスは、事前に私のために働く障壁ではありませんでしたが、これはTailwindとWordPressの関係について私が尋ねられた中で最も尋ねられています。

最小限のテールワインドCSS統(tǒng)合を備えた最小のWordPressテーマ

基本的なWordPressテーマからできる限り始めましょう。必要なファイルは2つしかありません。

• style.css
• index.php

Tailwindを使用してStyle.cssを生成します。 index.phpについては、シンプルなものから始めましょう：

 

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

    

</main>

<p> WordPressテーマがすべきことはたくさんありますが、上記のコードはそれを行いません - ページネーション、サムネイル後、キューイングのスタイルシートの代わりにリンク要素を使用するなど - しかし、それはTailwindが予想どおりに機(jī)能するかどうかを投稿してテストするのに十分です。</p><p> Tailwindに関しては、3つのファイルが必要です。</p>

• package.json
• Tailwind.config.js
• Tailwindの入力ファイル

先に進(jìn)む前にnpmが必要です。あなたがそれを使用することに慣れていない場(chǎng)合、私たちはNPMを始めるためのガイドを持っています。これは始めるのに最適な場(chǎng)所です！

Package.jsonファイルはまだないため、端末で次のコマンドを?qū)g行することにより、index.phpと同じフォルダーに空のjsonファイルを作成します。

 echo {}> ./package.json

このファイルを使用すると、Tailwindをインストールできます。

 NPMインストールTailwindcss  -  save-dev

Tailwind構(gòu)成ファイルを生成します。

 NPX Tailwindcss init

Tailwind.config.jsファイルでは、PHPファイルでユーティリティクラスを検索するようにTailwindに伝える必要があります。

 module.exports = {
  コンテンツ：["./**/*.php"]、
  テーマ： {
    伸ばす： {}、
  }、
  プラグイン：[]、
}

テーマが作曲家を使用している場(chǎng)合、ベンダーディレクトリを無(wú)視する必要があります。これは、コンテンツ配列に「！**/Vendor/**」などを追加することで実行できます。ただし、すべてのPHPファイルがテーマの一部である場(chǎng)合、上記は機(jī)能します！

入力ファイルに名前を付けることができます。 Tailwind.cssというファイルを作成し、次のファイルを追加しましょう。

 /*！
テーマ名：WordPress Tailwind
*/

@tailwindベース;
@tailwindコンポーネント;
@tailwindユーティリティ;

WordPressがテーマを認(rèn)識(shí)するには、上部の注釈が必要です。

それでおしまい！これで、次のコマンドを?qū)g行できます。

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

これにより、Tailwind CLIがTailwind.cssを入力ファイルとして使用してStyle.cssファイルを生成するように指示します。 -Watchフラグは、プロジェクトリポジトリのPHPファイルからユーティリティクラスを追加または削除するときに、style.cssファイルを継続的に再構(gòu)築します。

それは追い風(fēng)駆動(dòng)のWordPressのテーマと同じくらい簡(jiǎn)単ですが、それがあなたが生産環(huán)境に展開したいものであることはまずありません。それでは、生産対応のトピックへのいくつかの経路を議論しましょう。

既存のテーマにtailwindcssを追加します

既存のテーマにTai??lwind CSSを追加したい理由は2つあります。

• Tailwindコンポーネントをスタイルのテーマに追加することを?qū)g験します
• テーマをネイティブCSSからTailwindに変換します

TailwindをTwenty21にインストールして、これを?qū)g証します（WordPressのデフォルトテーマ）。 （Twenty22をしないのはなぜですか？最新のWordPressデフォルトテーマは、フルサイトの編集を表示するように設(shè)計(jì)されており、Tailwind統(tǒng)合には適していません。）

まず、テーマが開発環(huán)境にインストールされていない場(chǎng)合は、ダウンロードしてインストールする必要があります。その後、次の手順に従う必要があります。

• 端子のテーマフォルダーに移動(dòng)します。
• Twenty21Oneにはすでに獨(dú)自のPackage.jsonファイルがあるため、新しいファイルを作成せずにTailwindをインストールできます。

 NPMインストールTailwindcss  -  save-dev

• tailwind.config.jsonファイルを追加します：

 NPX Tailwindcss init

• Tailwind.config.jsonファイルを前のセクションと同じファイルに更新します。
• Twenty21の既存のstyle.cssファイルをtailwind.cssにコピーします。

次に、TailWind.cssファイルに3つの@TailWindディレクティブを追加する必要があります。次のように、tailwind.cssファイルを構(gòu)築することをお?jiǎng)幛幛筏蓼埂?/p>

 /* WordPressテーマファイルヘッダーはこちらです。 */

@tailwindベース;

/*既存のすべてのCSSはここにあります。 */

@tailwindコンポーネント;
@tailwindユーティリティ;

トピックタイトルの直後に草の根を配置すると、WordPressがトピックを検出し続けることが保証され、同時(shí)にTailwind CSSリセットができるだけ早くファイルに表示されるようにします。

既存のすべてのCSSはベースレイヤーの後ろにあり、これらのスタイルがリセットよりも優(yōu)先されることを確認(rèn)します。

最後に、コンポーネント層とユーティリティ層がすぐに守られているため、同じ特異性を持つCSS宣言よりも優(yōu)先される可能性があります。

さて、最小限のトピックと同様に、次のコマンドを?qū)g行します。

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

新しいstyle.cssファイルがPHPファイルを変更するたびに生成されると、変更されたテーマと元のテーマの間の微妙なレンダリングの違いを確認(rèn)する必要があります。これらは、TailwindのCSSリセットによって引き起こされます。これは、一部のテーマが予想されるよりも少し徹底的です。 21対1の場(chǎng)合、私が行った唯一の変更は、テキストデカレーションラインを追加することです。

レンダリングの問(wèn)題を解決した後、Tailwind UI（Tailwindのファーストパーティコンポーネントライブラリ）からヘッダーバナーコンポーネントを追加しましょう。 Tailwind UI Webサイトからコードをコピーし、header.phpの「コンテンツジャンプ」リンクの後に貼り付けます：

とても良い！現(xiàn)在、ユーティリティクラスを使用して、トピックに組み込まれている既存の高等特異性クラスを上書きするため、Tailwind.config.jsファイルに行を追加します。

 module.exports = {
  重要：本當(dāng)、
  コンテンツ：["./**/*.php"]、
  テーマ： {
    伸ばす： {}、
  }、
  プラグイン：[]、
}

これにより、すべてのTailwind CSSユーティリティが重要であるため、既存のクラスをより高い特異性でオーバーライドできるようにします。 （私は生産環(huán)境でTrueに重要になることはありませんが、ネイティブCSSからTailwindにウェブサイトを変換している場(chǎng)合、ほぼ確実に行います。）

クイックアンダーラインクラスをより多くのリンクに學(xué)び、BG透明とBorder-0をクローズボタンに追加することにより、私たちは完了です。

Tailwind UIのコンポーネントがWordPressのデフォルトテーマに融合するのを見るのは少し厳しいように見えますが、これはTailwindコンポーネントとその固有の移植性の素晴らしいデモンストレーションです。

ゼロから始めます

Tailwindを使用して新しいトピックを作成する場(chǎng)合、プロセスは上記の最小例と非常に似ています。コマンドラインからTailwind CLIを直接実行する代わりに、開発と生産の構(gòu)築と監(jiān)視のために、個(gè)別のNPMスクリプトを作成することをお?jiǎng)幛幛筏蓼?。また、WordPressエディター用の個(gè)別のビルドを作成することもできます。

上記の最小の例を超えた出発點(diǎn)を探しているが、それ自體が獨(dú)善的なスタイルを持っている範(fàn)囲を超えていない場(chǎng)合、私はアンダースコア（_s）に觸発されたTailwind -Optimized WordPressテーマジェネレーターを作成しました。 _twという名前で、これは私が最初にWordPressでTailwindを使用したときに望んでいるクイックスタートです。これは、すべてのクライアントプロジェクトの最初のステップです。

典型的なWordPressテーマの構(gòu)造からさらに逸脫し、Laravel Bladeテンプレートをツールキットに追加することをいとわない場(chǎng)合、Sageは素晴らしい選択肢であり、Tailwindのセットアップガイドがあり、開始を支援します。

開始方法に関係なく、Tailwind CSSに適応し、ユーティリティクラスを使用してHTMLドキュメントをスタイルするために時(shí)間をかけることをお?jiǎng)幛幛筏蓼埂?/p>

以上が既存および既存のWordPressテーマにTai??lwind CSSを追加しますの詳細(xì)內(nèi)容です。詳細(xì)については、PHP 中國(guó)語(yǔ) Web サイトの他の関連記事を參照してください。