当初このブログにはクラスレスCSSフレームワークを使っていましたが、今回TailwindCSSに移行しました。今まで使っていたnew.cssは5KB前後の軽量なフレームワークなのですが、カスタムCSSの分量が増えていくにつれてフレームワーク自体の量と同じぐらいになってきたのが要因です。

TailwindCSSとは?

ユーティリティベースのCSSフレームワークです。ユーティリティベースと言うだけだとわかりにくいので、HTMLのサンプルを見てみましょう。

Bootstrapでリンクをボタンの形状にするには、このようなHTMLを書くことになります。btnというクラスがボタンを表しています。

<a class="btn btn-primary" href="#" role="button">Link</a>

Tailwindではこうなります。

<a class="block rounded bg-blue-500 text-gray-50 p-4 text-center">Button</a>

インライン要素からブロック要素にし(block)、角を丸くして(rounded)、背景色とテキストの色を整え(bg-blue-500 text-gray-50)、テキストのまわりに空間を作り(p-4)、テキストを要素の中央にもっていく(text-center)、というような要領でボタンを作っています。

このような形式には良し悪しがあり、必ずしもTailwindのようなユーティリティベースのフレームワークでBootstrapのようなコンポーネントベースのフレームワークを置き換えられるわけではありません。

利点

• デザインはユーザー側に任せられているので、フレームワーク臭さが出にくい
• タスクランナーなどを使って不要なスタイルのパージを行えば、かなり軽量になる
• 痒いところには手が届きつつ自分でCSSを書く必要がない
• HTMLを見れば、その要素にどのようなスタイルが付いているか分かる

欠点

• 大量のclassを付けるのでコード量が増える
• デザインもしなければいけないのでプロトタイピングなどには向かない
• CSSの知識が必要
• タスクランナーなどでスタイルのパージをしないと、かなり重くなる

Gatsbyに導入する

公式のドキュメントが詳しいですが、おおむね

• TailwindとPostCSSプラグインを導入する
• PostCSSを経由してTailwindを使う
• Tailwindの設定でコンポーネントを参照させて、ビルド時にスタイルのパージをさせる

というような感じになります。

使いやすくて楽しいCSSフレームワークですが、使える所が限られるのが欠点

コンポーネントベースのCSSフレームワークと生のCSSの中間という具合で、フレームワークの恩恵を受けつつ自分の思い通りにデザインができるのが楽しいフレームワークです。ただPostCSSを走らせて不要なスタイルをパージしないと容量がかなり厳しいので、使える場面は限られているように見えます。