BootstrapとかTailwindについてざっくり調べた

普段はWebフロントやスマホアプリ開発をしていますが、基本的にBtoBが多いのでデザインが入ることは稀です。 なので、BootstrapなどのCSSフレームワークに頼りがちなのですが、ここ何年かだとTailwindの隆盛が目につきます。 実際に触ったこともあるので、どういうものかは理解できますが、改めてBootstrapなどと比べて「ここが違う」といったことをまとめた機会がなかったので調べてみました。

CSSフレームワークとUIライブラリの違い

BootstrapやTailwindについての記事を読むにあたって「CSSフレームワーク」と「UIライブラリ」という表現が散見されました。 明確な定義がされているわけではなさそうでしたが、どうも文脈的に以下のような使い分けで良さそうです。

CSSフレームワーク

主には「クラス名」単位でデザインを提供する。 例えばBootstrapにおけるbtnクラスが「ボタンの一般的なデザイン」を提供している。 ポイントはJSなどを特に介していない単純なCSSファイルの塊であるということで、極端な話 「CDNからインポートして使えるかどうか」 がCSSフレームワークであるかどうかの指標といえる。

UIライブラリ

ほぼ「コンポーネント」を提供するライブラリと考えてよい。 ※なので厳密には「コンポーネントUIライブラリ」なのかも。

Bootstrapの例でいうとreact-bootstrapなどは「BootstrapのデザインReactが使えるコンポーネント単位」で提供してくれているので、UIライブラリといえる。 その性質上、基本的にはNodeJSなどがマストである。

Bootstrapとは

公式：https://getbootstrap.jp/

言わずと知れたCSSフレームワーク。 かつてはjQueryに依存していたが、v5移行はそうでなくなった。 シェアも高く、長年この界隈で上位に居続けている。

Tailwindとは

公式：https://tailwindcss.com/ ユーティリティファーストを謳っており、CSSプロパティのショートハンドのようなクラスを提供する。 従って、基本的に個々のクラスがデザインを持っているわけではなく、それらを組み合わせてデザインを作っていく。

同じものを実装して比較する

BootstrapとTailwindの違いを理解するためには同じようなUIを書いてみるといいかなと思い、実装してみました。

以下のようなボタンをサンプルとします。

bootstrap-vs-tailwind.png

Bootstrapで実装

まずはBootstrapで実装したコード。

<!-- header bodyなどは割愛-->
<div class="d-flex h-100">
  <button class="btn btn-warning m-auto">
    Click me
  </button>
</div>

Tailwindで実装

続いてTailwind。

<!-- header bodyなどは割愛-->
<div class="bg-white h-full flex flex-col justify-center items-center">
  <button type="button" class="bg-yellow-400 text-gray-800 rounded hover:bg-yellow-300 px-4 py-2 focus:outline-none">
    Click me
  </button>
</div>

Tailwindの方が基本的に記述は長くなる

  • Bootstrapのbtnにはボタンの丸みや色、枠線など諸々のプロパティがまとまっている
  • 対してTailwindは上記のプロパティを持つクラスを組み合わせる

  • 従って、コードだけ見るとTailwindの方が基本的には長くなる

    • 一応Tailwind側にも@applyという機能があり、それを使えば同等の短さにできる

コードの記述の短さ=ベスト？

  • 可読性と言う観点では短い方が良い場合が多い

  • ただ、Bootstrapの方がカスタマイズがしにくい

    • ピクセルパーフェクトには向かない
    • デザイナ界隈から敬遠されるのはこういう理由？
    • 所謂「Bootstrapっぽさ」はこれが原因
  • デザインが入る場合、Tailwindの方が柔軟に対応できそう

  • とはいえ現代でTailwindを使うと、漏れなくNodeJSが付いてくるので、デザイナの人によっては対応してもらえないかも

    • 今時はそうでもない？

余談

TailwindにせよBootstrapにせよ、「モーダルの開閉」などの状態はJSで管理する必要があります。 かつてはjQueryが担っていて、今ではReduxやRecoilなどの範疇です。

だた最近では、JSレスを謳っているDaisyUIというものがあるらしく、Tailwindをラップしているようです。

公式：https://daisyui.com/

まとめ

今回はBootstrapやTailwindを比較して、それぞれの良し悪しを自分の中でまとめたものを記事にしました。 昨今ではデザイナでもゴリゴリJSを触るし、プログラマでもCSSのことを分かってないといけないと思うので、そう言う意味ではTailwindが時代にマッチしているのかなと感じました。 如何せん流行り廃りの激しい分野なので、こまめに最新情報をチェックする必要があると思います。

SNSでシェアする