※本ページはプロモーションを含みます
tailwindcssというCSSフレームワークが人気です。非常に便利なのでWordPressテーマ開発に導入して見たところ相性について思うことがありましたのでお伝えします。
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からの呼び出しはやめた方がよいよ」という警告がでます。
その上、ファイルサイズが大きいので本番環境に導入するには厳しいものがあります。
プラグインでもTailwindcssの導入への障壁はつきやぶれませんでした。
ただ、WordPressはプラグイン開発が活発なので今後もしかしたら安全に使用できるプラグインがでるかもしれません。
それを期待しましょう。
最後に
tailwindcssはReact、Vueなどのモダンフロントエンドと呼ばれる開発フォーマットとは相性がよいもののWordPressとはとことん相性が悪いです。
WordPressテーマ開発ではtailwindは使わずTwitterBootstrap、オリジナルCSSをメインに使用して開発していきましょう。
ただ、tailwindcssの内容は非常に便利なのでどのクラスにどのような値が設定されているのか調べてみるのもよいでしょう。
