tailwindcssをWordPressにマッチさせる方法 – テーマ開発における相性の悪さをカバーしよう

web制作 WordPress

※本ページはプロモーションを含みます

tailwindcssというCSSフレームワークが人気です。非常に便利なのでWordPressテーマ開発に導入して見たところ相性について思うことがありましたのでお伝えします。

目次
  1. tailwindcssとは
  2. tailwindcssにあってBootstrapにないもの
  3. tailwindcssのデメリット
  4. そんな面倒なことをしなくてもWordPressにはプラグインがあるじゃないか
  5. 最後に

tailwindcssとは

ユーティリティーベースのCSSフレームワークです。
似たようなものにTwitterBootstrap等があります。
TwitterBootstrap（以降bootstrap）と違いTailwindcssはすべてユーティリティクラスとして構成されています。
Tailwindcss公式ページ

tailwindcssにあってBootstrapにないもの

レスポンシブ対応クラス

ブレークポイント毎のフォントサイズ

<p class="sm:text-sm md:text-base lg:text-xl">画面サイズで文字サイズの変更が簡単</p>

display:gridを使ったグリッドシステム

これによってスマホサイズに小さい文字だったものをデスクトップサイズに大きくすることが可能
BootstrapのグリッドシステムはflexboxがベースとなっているがTailwindcssはflexでもgridでもどちらでも使用できる
gridを使用したほうが「スマホサイズの時は２列でデスクトップサイズの時は４列に配置する」の指定が簡単に行える。
また、gridを使用した際にはgapの値が正確に表示できる。flexの場合はgapを指定しても意図しないレイアウトになることがある。

ここまで見ると断然Tailwindcssの方が良いのではないかと思えますが一概にそうはいえません。

tailwindcssのデメリット

HTMLのクラスが非常に長くなる

次の例のように一つのアイテムに対して何個もクラスを付与しなければいけません。
HTMLをスッキリ管理したい人にとっては気持ち悪いコードになります。

例）

<div class="text-xl bg-red-600 flex flex-wrap mb-2 sm:mb-4 md:mb-6">

複数の箇所を変更するためにその分のHTMLを変更しなければいけない

自作のCSSで管理していれば複数箇所ある同じアイテムの見た目の変更は簡単です。クラスを一か所変更するだけで済みます。
しかしtailwindcssの場合は該当のHTMLタグのclassをすべて変更しなければいけません。
これは非常にやっかいです。

CDNで呼び出すとファイルサイズが大きすぎる

TailwindcssはCDNも提供されています。呼び出しはjsファイルを呼び出すようですがすべてのユーティリティークラスが入っているファイルはファイルサイズが非常に大きくなってしまいます。MB（メガバイト）を超えます。

これは実用レベルとは言えません。
そのためにTailwindcssではNode、PostCSSを利用することによって必要な分だけクラスを生成する機能を採用しています。
この機能によって今ある必要なクラスのみがCSSファイルとして使用できます。
ファイルサイズも適したサイズに抑えられます。

この『今ある必要なクラス』しか使用しないという仕組みがWordPressテーマ開発におけるTailwindcss導入の壁になっています。

tailwindcssはWordPressに向いてない…

残念ながらTailwindcssはWordPressには向いていません。

WordPressはテーマファイルのPHPファイルの他に管理画面で固定ページなどにコンテンツを入力します。
このときTailwindcssのスタイルを使用したいときにクラスを足したとします。

もし、そのクラスがテンプレートファイルのPHPファイルの中に書いてあるものならよいですが、書いてなかった場合そのクラスはTailwindcssのスタイルがあたっていないものになります。

なぜなら固定ページを更新してもNode、PostCSSがtailwindcssをコンパイルすることができないからです。

ここにWordPressへのTailwindcss導入のむずかしさがあります。

それでもtailwindcssを導入する

それでもなんとかしたい場合は自作のマウントHTMLを作成する手があります。

WordPressテーマを制作する際にTailwindcssをマウントするHTMLを別に作成してテンプレートのPHPファイルに使用されていないスタイルも生成するようにします。

■導入する際の流れ

Nodeはインストール済みでWSLなどのLinux環境で制作していることを前提にしています。

１．関連するツールをインストール

npm init -y
npm i -D postcss-cli tailwindcss autoprefixer

２．npm-scriptを設定

script: {
    "build:tailwind": "tailwindcss i ./tailwind-i.css -o ./tailwind.css --minify"
}

３．tailwind.config.jsを作成

touch tailwind.config.js

４．tailwind.config.jsを編集

module exports = {
    content: ['tailwind-mount.html']
}

５．tailwind-i.cssを編集

/* tailwind-i.css */
@tailwind base;
@tailwind components;
@tailwind utilities;

６．マウントするhtmlを編集します。使用したいクラスを書いていきます。

７．htmlが書き終わったらnpm-scriptを実行します。

npm run build:tailwind

８．これで今使用しているクラス以外のユーティリティークラスをもったcssファイルを手に入れることができました。

９．テーマファイルのfunctions.phpでこのユーティリティークラスのCSSファイルを呼び出すようにします。

そんな面倒なことをしなくてもWordPressにはプラグインがあるじゃないか

WordPressのプラグインに「TailPress」というTailwindcssを呼び出せるプラグインがあります。
インストールして有効化するだけでTailwindcssを使用できるとても便利なプラグインです。
ですが、呼び出しがCDNなのでブラウザに「TailwindcssのCDNからの呼び出しはやめた方がよいよ」という警告がでます。
その上、ファイルサイズが大きいので本番環境に導入するには厳しいものがあります。

TailPressのWordPressプラグインのページ

プラグインでもTailwindcssの導入への障壁はつきやぶれませんでした。
ただ、WordPressはプラグイン開発が活発なので今後もしかしたら安全に使用できるプラグインがでるかもしれません。
それを期待しましょう。

最後に

tailwindcssはReact、Vueなどのモダンフロントエンドと呼ばれる開発フォーマットとは相性がよいもののWordPressとはとことん相性が悪いです。

WordPressテーマ開発ではtailwindは使わずTwitterBootstrap、オリジナルCSSをメインに使用して開発していきましょう。

ただ、tailwindcssの内容は非常に便利なのでどのクラスにどのような値が設定されているのか調べてみるのもよいでしょう。