こんにちは！tailwindとの付き合いも長くなってきたMizutani(@sirycity)です。1年ちょっとだけど。

今日はCSSフレームワークの中でも異質な(？)TailwindCSSをWeb制作で使い始めようって人に向けての記事です。とてもつらい...記事です。

結論

• よくあるWordPressを使ったWeb制作にtailwindは相性が悪いです。
• SPAじゃない静的サイトジェネレーターとも相性が悪いです。jekyllやHugoなど。
• ↑それらとCSSフレームワークを組み合わせるならBootstrapをおすすめします。
• tailwindを使うならWPに別れを告げSPAの静的サイトジェネレーターと組み合わせると良いです。
• SPAの静的サイトジェネレーターってのはGatsby.jsとかNext.jsとかNuxt.jsとかです。

色々な問題

Web制作に向いてない

これ一番言いたい。tailwindはWeb制作(Webサイト)ではなくWeb開発(Webアプリ) での使用が想定されています。...明言はされていませんが、設計思想が明らかにWebアプリを念頭に置かれています。いわゆるモダンフロントエンドに大別される技術です。ここほんと大事。

ただもちろんWeb制作で使えないってわけじゃないです。僕の会社でも使ってる(唐突な宣伝)

WordPressはじめレガシーフロントエンドとの相性が非常に悪い

tailwindはモダンフロントエンドを前提として作られた技術であり、WP、というよりWPをはじめとしたレガシーフロントエンドで使うことはあまり想定されていません。ここがBootstrapなど他CSSフレームワークと大きく違う点です。

CDNが実質ない

tailwindはCDNで読み込むことは(実質)できません。一応CDNはあるけど、機能は制限されるし重くて使えたもんじゃありません。 ここはライブラリのインストールをCDNで行うレガシーフロントエンドとパッケージマネージャーで行うモダンフロントエンドの違いです。

Webデザインに向いてない

tailwindはUIデザイン向きです。Webデザインには向いてないです。フラットデザインとかマテリアルデザインとかは好相性ですが、スキューモーフィズムとかフルーエントデザインとかと好相性とか言われると微妙です。リッチなボタン一つ作るにも.btnみたいなクラスをポンって置けばいい感じにシュッとするようなCSSフレームワークではなく、クラスをベタベタ貼る必要があります。

あと色の選択が少なく、特に高明度かつ低彩度の色があまり揃っていないです。可読性や視認性が優先されるUIデザインならともかく、アート寄りのデザインはきついです。

パーフェクトピクセルに向いてない

tailwindはデザインカンプを見ながら1pxもずれないように合わせるみたいな、いわゆるパーフェクトピクセルには向いていません。そもそも単位がpxでないのと、長さに関するクラスもざっくりと提供されているだけであんまり微調整しようという思想は感じられません。正確より爆速を優先してる感じ。

PostCSSが必須

tailwindにはPostCSSが必須です。というより、イメージとしてはPostCSSのプラグインとしてtailwindがあるみたいな感じ。んで、PostCSSはおもっくそモダンフロントエンドの技術です。NextやGatsbyに設定するのは簡単ですが、WPに設定するのは一苦労です。

PurgeCSSがほぼ必須

PurgeCSSも必須です。細かく言うと最近のtailwindにはパージ機能があるのでそれを使う手もありますが、まあほぼ必須です。んで、PurgeCSSも一応括り的にはモダンフロントエンドです。

セットアップが面倒

だいぶ書きましたがこれらの技術をWPやMovableTypeのようなレガシーフロントエンドに頑張って合体させようとするとけっこうな労力が必要です。嘘です。とてつもない労力が必要です。Webデザイナー+グラフィックデザイナー+マークアップエンジニア+SEO みたいな構成の開発チームだと誰もセットアップできなくてやばいです。

破壊的変更が多い

これはWeb制作に限ったことじゃないけどtailwindは破壊的変更がかなり多いです。バージョン管理の概念をちゃんと持たないと大変です。具体的にはv2でIE11のサポートが切れたりorange系の色がなくなったりしています。

さいごに

ここまで読んでweb制作に取り入れるのはつらすぎると思ったあなた。正しいです。とどのつまり、tailwindのつらみは以下2点に集約されると考えます。

• レガシーフロントエンドでのセットアップが大変
• web制作の標準的な設計思想との相性の悪さ

もしWeb制作系でtailwindを採用しようと思うなら以下のどちらかをお勧めします。

• tailwindは諦めてWordPress+Bootstrapみたいな構成にする
• WordPressを諦めてGatsby.js+tailwindみたいな構成にする

すっごく乱暴な言い方をするならWordPress使いながらtailwindはあんまよくないってことです。どっちかです。ビアンカとフローラです。以上。