2021/05/10

【CSS】Web制作でTailwindCSSを使おうとした時に起こる問題

こんにちは！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 みたいな構成の開発チームだと誰もセットアップできなくてやばいです。