WordPress で Tailwind CSS を使う方法

2024.05.25

WordPress

Tailwind CSS

はじめに
テスト用ページの作成
Tailwind CDN (Paly CDN) を使う方法
プラグインを使う方法
1. Draft – Tailwind CSS for WordPress.
2. TailPress – Tailwind for WordPress
Tailwind CLI を使う方法
終わりに
【おまけ】本記事のアイキャッチ

はじめに

この記事公開時から、筆者 Blog サイトは OGP 対応（記事の URL からイメージ画像、タイトル、説明を表示）しました。OGP 対応の時に「WordPress で Tailwind CSS を使う方法」を模索しました。とりあえず WordPress では、Tailwind CSS を使わない方針にしたのですが、一応は調べたので記事で残すことにしました。

この記事で説明するのは、以下の3種類の方法です。

Tailwind CDN を使う方法
プラグインを使う方法
Tailwind CLI を使う方法

なるべく分かりやすいように、具体的に説明したいと思います。

WordPress と Tailwind については、とりあえず知っている読者向けの記事になります。

テスト用ページの作成

まずは、WordPress でテスト用の表示ページを作成してみます。筆者が評価用に使用している WordPress に新規ページを作成しました。この新規ページに「カスタムHTML」ブロックを挿入してTailwind を使用した以下の html を入力しました。

この html の大部分は、筆者サイトでこの記事から使い始めた OGP 対応プログラムが作る html を少々編集したものです。レイアウトや背景色などで Tailwind CSS を使っています。

<div> 標準文字サイズ </div>
<div class="text-4xl"> 大きな文字 </div>

<div class="flex justify-center">
  <div class="flex flex-row w-11/12 p-2 border border-zinc-500 rounded-md bg-zinc-200 dark:bg-stone-800">
    <div class="basis-1/3 flex justify-center">
      <img src="https://assets.st-note.com/production/uploads/images/135990572/rectangle_large_type_2_6a90162199f302858fda2c501899a2a5.png?fit=bounds&quality=85&width=1280" alt="og-image" class="max-h-32 object-contain"/>
    </div>
    <div class="basis-2/3">
      <div class="flex flex-col pl-2 text-sm">
        <div class="text-lg">
          AI (Claude 3)に「男のロマン」と「女のロマン」さらに「男も女も関係ないロマン」について語ってもらった｜yoichiro
        </div>
        <div class="pt-2">
          はじめに Claude3 が凄いらしいので、筆者も試して（遊んで）みました。 Claude3 にユーザ登録後、最初の会話となります。（一発撮り） 会話全文 筆者：日本語は使えますか？ はい、日本語を使うことができます。どのようなことでお手伝いで...
        </div>
        <a href="https://note.com/yoichiro4016/n/n8378be73dbca" target="_blank" class="pt-2 text-emerald-950 dark:text-emerald-100 hover:underline" rel="noopener">
          https://note.com/yoichiro4016/n/n8378be73dbca
        </a>
      </div>
    </div>
  </div>
</div>

まだ Tailwind の設定は何もしていない状態なので意図通りの表示はできません。以下のような表示になります。

Tailwind CDN (Paly CDN) を使う方法

この方法は最もお手軽だと思います。ただし、Tailwind の公式ページでは、本番環境での使用は最適ではないと書いています。

Use the Play CDN to try Tailwind right in the browser without any build step. The Play CDN is designed for development purposes only, and is not the best choice for production.

（機械翻訳）Play CDNを使用すると、ビルドステップなしでブラウザ上でTailwindを試すことができます。Play CDNは開発目的のみに設計されており、本番環境には最適ではありません。
https://tailwindcss.com/docs/installation/play-cdn

CDN でダウンロードする CSS ファイルサイズは、約360KBであり、大きいといえば大きいのですが、ネットワークが高速な環境ならさほど気にするサイズではありません。筆者の個人的な印象ですが、本番環境で使用する場合はパフォーマンステストを行ってみて、特に問題無ければ利用するのもアリかなと思います。（すいませんが、筆者はパフォーマンステストしてません）

筆者が試した設定方法は、WordPress の「外観」「テーマファイルエディター」で「tmp-user」内にある「head-insert.php」の最後に、次のコードを追加して「ファイルを更新」をクリックしました。これだけです。

<script src="https://cdn.tailwindcss.com"></script>

Tailwind がちゃんと効いているか表示してみましょう。

Tailwind のクラスが効いて、意図通りに表示できました。

プラグインを使う方法

プラグインは2種類試しています。プラグインによる方法も手軽ですが、筆者はなるべくプラグインを入れたくないと思っています。重たくなるのは嫌だし管理も面倒なので、プラグインは必要最小限にしたいなと。個人的にはお勧めしません。

Draft – Tailwind CSS for WordPress.

一般的なプラグインと同じ方法でインストールします。その結果、概ね意図通り表示できました。ブラウザの開発ツールでライトモードに切り替えた時に、背景色が指定と異なるのが気になりました。（原因は追及していません）

TailPress – Tailwind for WordPress

一般的なプラグインと同じ方法でインストールします。その結果、意図通り表示できました。以前試した時は、一部の表示がうまく出来なかったのですが、再現しませんでした。今回は問題無しでした。

Tailwind CLI を使う方法

この方法は、これまでの２つの方法と比べると手間がかかります。ただし、実際に使っている Tailwind クラスだけをロードするので最適化という観点では優れています。Tailwind の公式ページを参照して設定していきます。

Installation - Tailwind CSS

The simplest and fastest way to get up and running with Tailwind CSS from scratch is with the Tailwind CLI tool.

https://tailwindcss.com/docs/installation

予め npm (Node Package Manager) の使える環境を用意してください。筆者は Linux Mint に node がインストールしてあるのでそれを使用していますが、どんな環境でも npm が使えれば大丈夫だと思います。なお、WordPress 実行環境とは別の独立した環境です。

作業用ディレクトリを作成し、tailwindcss をインストールします。

mkdir wp-tw-test
cd wp-tw-test
npm install -D tailwindcss
npx tailwindcss init

tailwind.config.js ファイルにテンプレートファイルのパスを追加します。しかし、テンプレートファイルは、まだ存在しないので作成します。Tailwind はテンプレートファイルをサーチして、使用している Tailwind クラスを抽出しています。筆者は vim を使ってファイルを作成しましたが、お好きなエディタなどで、template.txt を作成してください。内容は、「テスト用ページの作成」の章で「カスタムHTML」ブロックに挿入したものをコピー＆ペーストで張り付ければOKです。

vi tailwind.config.js
content: [], の行を次のように編集します。
content: ["./template.txt"],

Tailwindの各レイヤーの@tailwindディレクティブをメインのCSSファイルに追加します。しかし、メインの CSS ファイルもまだ存在しないので作成します。

vi input.css
以下の内容でファイルを作成します。
@tailwind base;
@tailwind components;
@tailwind utilities;

準備ができたので、tailwindcss を実行します。実行すると output.css が生成されます。

output.css の内容を見たい場合は、最後の -m オプション無しで実行します。見やすい形式でファイルを作成してくれます。ただし、サイズが大きくなります。実際に使用する時は、-m オプション有りにした方が良いでしょう。

npx tailwindcss -i ./input.css -o ./output.css -m

上のコマンドで生成された output.css の内容を WordPress に適用させれば完成です。筆者の場合は、実験なので手軽にダッシュボードで設定しました。WordPress の「外観」「カスタマイズ」「追加 CSS」と進むとエディットボックスが有るので、ここに output.css の内容をコピペで貼り付けます。上の方にある「公開」ボタンクリックで保存します。

実際に表示させて、Tailwind が効いているのを確認できると思います。template.txt で使用していないクラスを指定した場合、そのクラスは効果無し・無視されるので注意してください。

終わりに

Tailwind CSS を使うなら、node.js ベースのフレームワークを使うのが簡単だとおもいます。しかし、実際に利用するケースもあるだろうと思って記事にしてみました。少しでも参考になれば幸いです。

【おまけ】本記事のアイキャッチ

（今回のアイキャッチも例によって記事内容とは何の関係もありません）

アイキャッチ画像を今回どうしようか？と思って、ネットで写真を探しました。著作権の問題があるので、気に入っても使えない場合もあります。なので、フリーで使える PhotoAC にある写真を眺めていて、「睡蓮」の綺麗な写真があったので使わせてもらいました。

睡蓮の花言葉は花の色によって異なるそうです。白い睡蓮の花言葉は「純白」「純粋」。確かに、と思います。また、「滅亡」といった花言葉もあるそうで、「スイレンを太陽のシンボルとしていた古代エジプト文明が、最終的に滅んでしまうことが由来とされています」とのこと。お見舞いには避けた方が良さそうです。一応、参考に見させて頂いたサイトを貼っておきます。