Tailwind CSS で最初に思う疑問、Bootstrap との違いとは？

こんにちは、森田です。
今回は CSSフレームワーク Tailwind CSS についてのお話です。

弊社の案件やご相談でもTailwind CSS が使われているサービスが増えている印象を受けます。
そんなTailwind CSS の簡単な紹介と、最初に見たときに思った「Bootstrap との違いは？」についてまとめました。

Tailwind CSS とは

Tailwind CSS は Utility-First（ユーティリティファースト）で作られている CSS フレークワークです。

公式ドキュメントに書かれているコードを見ていただくとどのようなものか一目瞭然です。

<div class="p-6 max-w-sm mx-auto bg-white rounded-xl shadow-md flex items-center space-x-4">
  <div class="flex-shrink-0">
    <img class="h-12 w-12" src="/img/logo.svg" alt="ChitChat Logo">
  </div>
  <div>
    <div class="text-xl font-medium text-black">ChitChat</div>
    <p class="text-gray-500">You have a new message!</p>
  </div>
</div>

w-12 や pt-6 といったユーティリティクラスを使用しスタイルを構築します。
一言で言ってしまうと「巨大なユーティリティクラスの CSS」です。

Tailwind CSS を使うと CSS の記述とHTMLのクラス命名を省くことができ高速でコンポーネント構築が可能となります。

一世を風靡した音声 SNS Clubhouse のサイトもTailwind CSS で作られているみたいです。

このコードを見て私が最初に思ったのは「Bootstrap みたいだな」でした。
しかし、使ってみると Bootstrap と似てはいるが全然別物だと感じました。その違いを説明します。

Tailwind CSS と Bootstrap との違い

「デザイン」と「サイズ」、大きく分けてこの2つの違いがありました。

デザインを作るクラスはない

Bootstrap であれば以下のようなコードで予めデザインされたボタンを簡単に作ることができます。

<button type="button" class="btn btn-primary btn-lg">Large button</button>

しかし Tailwind CSS はこのような見た目のクラスは存在せず CSS プロパティのユーティリティクラスが用意されているのみです。

Tailwind CSS で近いものを再現すると以下のようなコードになります。

<button class="px-5 py-2 text-xl text-white rounded bg-blue-500 hover:bg-blue-600 transition-colors">Large button</button>

• Tailwind play のサンプル

Bootstrap ですと CSS の知識がなくともコンポーネントを作ることができましたが、Tailwind CSS はプロパティを記述していくため CSS の知識が必須になります。
（補足：同じボタンに全てこのクラスを書かなければいけないのか？と思いますが、クラスをまとめる @apply という機能もあります。）

そのため、どんなデザインのサイトやコンポーネントをスタイリングすることができます。ピクセルパーフェクトは厳しいですが。

ここが一番の違いで、選定基準にもなるかと思います。
ただ、Tailwind CSS を使ったコンポーネントライブラリも Tailwind UI という公式が出しているものを筆頭に沢山存在しています。
いくつか紹介しましょう。

• Tailwind UI
• Tailwind CSS Components
• Tailwind UI KIT
• daisyUI

現状とても注目されている CSS フレームワークのため、今後もコンポーネントライブラリは増えていきそうです。

軽量

Tailwind CSS は Bootstrapのように CDNから読み込んで使うこともできます。

<link href="https://unpkg.com/tailwindcss@^2/dist/tailwind.min.css" rel="stylesheet">

しかし、この方法は推奨されていません。
Minifyされていても 2.9MB あるCSSファイルを読み込むことになり決して軽量ではないです。
また、Tailwind CSS の便利な機能を使うことができなくなります。

Tailwind CSS は PostCSS のプラグインで使用することを推奨しています。

PostCSS を使いビルドすることにより様々な便利な機能を使うことができます。

その代表的なものが Purge 機能で、未使用のプロパティを取り除き、必要なプロパティのみを書き出します。

ドキュメントにはこのように書かれています。

Sites that follow our best practices are almost always under 10kb compressed.

https://tailwindcss.com/docs/installation

「ベストプラクティスに従っているサイトは、ほとんどの場合10kb未満で圧縮されています。」とのことで10kb未満のサイズになることが多いようです。

JS依存なし

Tailwind CSS はスタイルがないライブラリなので JavaScirpt の依存がありません。
Bootstrap はアコーディオンはツールチップなどのコンポーネントもあるためJSを読み込む必要があります。

なのでその分もサイズも軽量になります。
ただ、その分必要なアニメーションやロジックを書く必要があります。

まとめ

Tailwind CSS と Bootstrap どちら優れているという話ではないですが、参考になれば幸いです。

現在の React などのモダンな JavaScript フレームワーク使用したコンポーネント作成では圧倒的にTailwind CSS が向いていると考えます。