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

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

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

Tailwind CSS とは

Tailwind CSS – Rapidly build modern websites without ever leaving your HTML.

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

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

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

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

Tailwind CSS と Bootstrap との違い

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

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

https://getbootstrap.jp/docs/5.0/components/buttons/#sizes

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>

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

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

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

現状とても注目されている 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 が向いていると考えます。

Gaji-Laboでは、React経験が豊富なフロントエンドエンジニアを募集しています

弊社ではReactの知見で事業作りに貢献したいフロントエンドエンジニアを募集しています。大きな制作会社や事業会社とはひと味もふた味も違うGaji-Laboを味わいに来ませんか?

もちろん、一緒にお仕事をしてくださるパートナーさんも随時募集中です。まずはお気軽に声をかけてください。お仕事お問い合わせや採用への応募、共に大歓迎です!

求人応募してみる!

投稿者 Morita Sou

フロントエンドグループチームマネージャー。
適切な技術提案やコミュニケーションを出来るように心掛けています。CSS設計・CMS構築や開発環境の構築などを得意としています。Macやエディタ、開発環境などを快適にすることにいつも燃えています。