Tailwind CSS をちょっと調べた以上に理解したいと思った私が調べたこと

こんにちは。
開発チームのワイルド担当、まんだいです。

今回の記事は Tailwind という CSS フレームワークのことを紹介したいと思います。
CSS フレームワークを選定する上でどんなフレームワークなのか概要を知りたい時に役に立てばと思います。

Tailwind とは

Tailwind は CSS フレームワークです。
CSS フレームワークといえば、すぐに使える便利なコンポーネントの塊のようなイメージがありますが、 Tailwind は少しコンセプトが違っていて Utility-First を掲げた CSS フレームワークです。

Utility-First ってなんだ？となるんですが、複雑なコンポーネントをつくるための単純で扱いやすい機能を集めた、という感じになると思います。
複雑になりすぎた CSS を適度にまとめているような雰囲気です。

雰囲気としては Bootstrap のように出来上がったコンポーネントを組み合わせてサイトを構築するというより、角が取れたボーダーを要素に設定したり、画像の輪郭を丸く加工するクラスを設定してアイコンっぽく見せたりといった設定を積み重ねてレイアウトを作り上げていくといったイメージになります。
Bootstrap よりパーツ寄りなフレームワークなので Bootstrap では機能が揃いすぎているしレイアウトもどれも一緒になってしまう、でも1から CSS を書くのもなぁ……という場合にはもってこいなんじゃないでしょうか。

文字サイズや色情報なども適切な粒度でまとめて定義されていて、使い勝手は良いように思います。

 

Tailwind の特徴

Tailwind CSSにあるライブコーディングを行っているようなデモを見てもらうとよく分かるんですが、 Tailwind にはコンポーネントという概念が非常に薄く、1から CSS を書いているに近い感覚でコーディングを行っていきます。

込み入ったデザインを使うためのパーツを使ってコーディングを進めていくのが基本になるため、クラス指定が冗長になりがちです。これはあまり良いポイントではないように見えます。
ですが、その分クラスを見ればどのようなスタイルが適用されているのかが分かりやすい、という側面もあります。

CSS が高機能になるにつれ、膨らんでいく記述量。複雑になりすぎたプロパティ。
これらがちょうどいい折り合いで再編成されたようなイメージでしょうか。

レスポンシブなサイトでももちろん使えますし、コンポーネントにないデザインは作れない、ということもありません。
ただしある程度 CSS　の本質的なところの理解を求められる部分も多いのではないかなという印象ですので、ターゲットとしては CSS 中級者以上なのかな？といったところです。

細かなパーツを大量に取り揃えているためか、執筆時点でのバージョン(1.9.6)で未圧縮状態のファイルサイズが 2784.7KB となかなか巨大なフレームワーク。
minify しても 1967.4KB と聞くと、使う気にならないレベルですよね。
ただしこれには解決法があって不要なスタイル定義をすべて削除してしまい、必要なものだけで Tailwind を再構築することができるため、概ね圧縮後のサイズは 10KB 程度に収まるだろう、と公式ドキュメントには書かれています。
まるで魔法のような書き方ですが、正しくこの機能を使うために色々知っておく必要がある書き方があるため要注意です。

 

Tailwind の使い方

Tailwind を使い始めるには npm もしくは yarn からインストールします。
公式ドキュメントと同じになりますがコマンドは以下の通り。

# npm
$ npm install tailwindcss

# yarn
$ yarn add tailwindcss

 

適当な場所に適当な CSS ファイルを作成し、ビルドしてみます。

# 基本のコンポーネントが入った CSS を作成する
$ echo -e "@tailwind base;\n@tailwind components;\n@tailwind utilities;" > hogehoge.css

# ビルド
$ npx tailwindcss build hogehoge.css -o output.css

   tailwindcss 1.9.6

   ? Building: style.css
Browserslist: caniuse-lite is outdated. Please run next command `yarn upgrade`

   ✅ Finished in 4.99 s
   ? Size: 2.66MB
   ? Saved to output.css

 

バージョンアップを怠っているのがバレてしまいましたが、基本的なビルドの流れは以上になります。

素の状態で利用するならこれでいいですが、本番向けに minify したり gzip 圧縮するなら webpack なんかのビルドに組み込む必要があります。

webpack で軽く minify してみたところ 2.15MB までダイエットすることができました。

minify してもこのサイズ。おそるべし。
さすがにこのままリリースはできないので、更にサイズダウンさせるため PurgeCSS を使って未使用のスタイルを除去してみることにします。

検証目的でビルド環境を用意したためすべて未使用の状態でしたが、最終的にはコメントだらけの CSS ができ、7.5KB になりました。
さらに minify すると、そのコメントもなくなり 668B に。
PurgeCSS を通した後のファイルサイズに関しては、サイト内でどれだけ使っているかに依存するのでまちまちですが webpack で purge して minify まで一気通貫でビルドできるのは管理しやすいですし、導入難易度も高くないので使いやすいな、という印象です。
というか、ここまでサイズが変わってしまうと使わないという選択肢はなさそうです。

 

まとめ

今回は Tailwind という CSS フレームワークをご紹介しました。
他の CSS フレームワークとは一味違うフレームワークで用意されたコンポーネントを使って少しでも工数を減らしたいという場合にはあまりオススメできませんが、微調整を繰り返してブラッシュアップしたい、といった場合はオススメしたいなと思います。

小さなパーツを組み合わせてレイアウトを作る、というのが使い方のようなので、細かいパーツ群を合わせたファイルサイズはなかなかのものでした。
検証の結果から PurgeCSS はセットで使用するという認識がよいかと思いますが、ここまでサイズが落とせるなら、他の CSS フレームワークとの併用も視野に入れられそうです。

本編にはあまり関係ないですが PurgeCSS は Tailwind 以外の CSS フレームワークにも利用できるので、一粒で二度美味しい思いができそうです。

最後に

私が所属するシステム開発のサービスサイト「SEKARAKU Lab（セカラク ラボ）」を開設しました。
ビヨンドは、サーバーの設計・構築から運用までをワンストップでお任せいただけますので、サーバーサイド開発でお困りの方はお気軽にお問い合わせください。
SEKARAKU Lab：[https://sekarakulab.beyondjapan.com/](https://sekarakulab.beyondjapan.com/)

以上です。