Tailwindはあらかじめ用意されたclass名を利用してスタイルを適用できるCSSのフレームワークです。
BootstrapやBulmaなどのコンポーネント単位でもclassとそれに対応するスタイルが用意されていて、それを使うこと簡単にスタイルを適用できるのが特徴ですが、Tailwindはコンポーネント単位では用意されておらず、全てutility classを利用するのが特徴です。
コンポーネント単位で用意されていることでボタンやカード型のスタイルを適用できるのが簡単で良いのですが、一方で少しでもそのスタイルを変更したい場合は面倒な作業が求められます。
なので、フルスクラッチでの開発や、完全にデザインデータがあり、それに合わせたスタイリングを求められるケースにおいてはCSSフレームワークを利用することは困難でした。
Tailwindはutility classだけしか用意されていないので自由度は高く、どんなスタイルも適用できると言って良いでしょう。
utility classとは、mt-8 で margin-top: 2rem; などの様に1つclass名で1つのCSSプロパティと値が指定されているものです。
加えて、プライマリーカラーやセカンダリーカラーなどを設定できたりもするので、サイト全体を通して一貫したカラー定義を利用することも可能です。
他のCSSフレームワークでは無くTailwindを利用するメリットとしては他に、指定したclassだけがcssファイルに含まれということが挙げられます。
BootstrapなどのCSSフレームワークは使っても使わなくてもあらかじめclassが用意されていて、使わない分のclass定義が不要にCSS容量を大きくしていることになるのですが、Tailwindでは使われたclassだけがcssファイルに含まれないので、容量が無駄に大きくなるということがありません。
パフォーマンス観点でもメリットが大きいです。
TailPressを利用する
WordPressのテーマ開発でTailwindを利用する方法としては結論としてTailPressを利用するのが良いと思います。
「Download」ボタンからZIPファイルをダウンロードし、解凍したディレクトリをWordPressの /wp-content/themes/ ディレクトリに配置してください。
その上で TailPress テーマを「有効化」することで利用が可能となります。
利用方法
前提としては利用環境でnode.jsをインストールしておいてください。
私の場合はローカルでの開発時にTailPressを利用してテーマ開発を行い、コンパイル後のcssをサーバーにデプロイしています。
node.jsがインストールされていてターミナルでyarnが使えることを前提に話を進めさせていただきます。
1. tailpressディレクトリに移動
cd wp-content/themes/tailpress2. yarn install
yarn install3. ファイルの変更時に自動でコンパイル
yarn watchこれで WordPressのテーマのphpファイルを修正するごとに /wp-content/themes/tailpress/css/app.css へコンパイル後のcssファイルが生成されます。
サーバーサイドでcssをminifyしているとかであれば、これをそのまま利用するでも良いですし、yarn watch を止めて
yarn productionと一度実行すればminifyした形でのcssコンパイルも可能です。
まとめ
utility classだけでテーマ開発をするとhtml上のclassの記述が多くなりがちです。
それによるソースの見辛さは否めないのでデメリットとして大きい場合はTailwindを使用するのは難しいかもしれません。
ですが、やはりclass名を考える労力やどんなにCSS設計がしっかりしていても複数人で開発を進める場合に少しずつ破綻していくことを考えるとTailwindはメリットとして大きいものと考えられ、このサイトでも使用しております。
新規のWordPressでのテーマ開発に対して一案として考慮いただければ幸いです。
