エンジニアBLOG
TailwindCSS入門！メリットと使い方をやさしく解説
はじめに
人気が出てきているTailwindCSSは、Netflixやmeetup.comにも導入されていますが、そもそもどのようなもので、CSSやBootstrapとどのような点が違うのか、どのようなメリット・デメリットがあるのかについてよく知っている方は、私も含めて少ないように感じます。
私自身もCSSやBootstrap等を使用しての開発が多いこともあり、私が直近で担当していた案件が私にとって初のTailwindCSSを使用した開発経験でした。
今回はTailwindCSSの概要や使い方、実際にTailwindCSSで開発をしていた経験から感じたメリット・デメリット等を紹介していきます。
TailwindCSSとは？
TailwindCSSは、ユーティリティクラス(utility class)を自由に組み合わせて活用し、よりオリジナリティの高いデザインのWebサイト及びWebアプリケーションを作成可能なCSSフレームワークです。
ユーティリティクラス(utility class)とは？
ユーティリティクラス(utility class)とは、text-4xl text-green-700 text-center font-semiboldなどであり、それらを使用してデザインをしていきます。上記の例は、文字の大きさ、色、位置、太さの4つのユーティリティクラスを設定しています。
CSS・Bootstrapとの違いは？
CSSはclass名をその都度考えて、別ファイルに記載してスタイルを当てていくのが通常の形になるので、例の方は割愛させて頂きます。また、Bootstrapの例とTailwindCSSの例を以下に掲示しましたが、それぞれどのように記載し、どれくらいの分量のコード記載になるのかという部分を見て頂けたらと思います。どのようなスタイルが当たっているのか、Bootstrapの例をdeveloper toolで検証して頂ければ、スタイル等の比較もできますので見てほしいと思います。
Bootstrapの例
まず、Bootstrapを使用してのHTMLコードは以下のようなものが一般的かと思います。
Bootstrapの例：Bootstrap-5-playground
<div class="container">
<div class="card shadow-sm border p-2 m-2" style="width: 18rem;">
<img class="card-img-top w-50 shadow-sm rounded-circle mx-auto d-block"
src="https://github.com/travis-ci.png" alt="" />
<div class="card-body mx-auto text-center">
<h5 class="card-title">宮城太郎</h5>
<p class="card-text">
Visual Designer
</p>
<button class="btn btn-primary mx-auto">SMS</button>
</div>
</div>
</div>
TailwindCSSの例
TailwindCSSを使用すると以下のように書くことができるようになります。
TailwindCSSの例：TailwindCSS-playground
※あえてTailwindCSSの例のボタンスタイルを全く同じにしていないのですが、時間があれば実際にTailwindCSSを触ってみるという意味でもBootstrapのSMSボタンと同じようにTailwindCSSを使用してスタイリングに挑戦して頂ければと思います。
<div class="m-2 w-72 rounded-lg border border-gray-200 bg-white shadow dark:border-gray-700 dark:bg-gray-800">
<div class="flex flex-col items-center p-10">
<img class="mb-3 h-36 w-36 rounded-full shadow-lg" src="https://github.com/travis-ci.png" alt="" />
<h5 class="mb-1 text-xl font-bold text-gray-900 dark:text-white">宮城太郎</h5>
<span class="text-base">Visual Designer</span>
<button class="mt-4 inline-flex items-center rounded-lg border border-gray-300 bg-white px-4 py-2 text-center text-gray-900 hover:bg-gray-100">SMS</a>
</div>
</div>
TailwindCSSのメリット/デメリット
メリット
①class名をその都度考える必要がない
TailwindCSSの最大の特徴としては、ユーティリティファーストなアプローチでデザインを組み立てていく点があげられます。そのためclass名をその都度考える必要がなく、結果として実装速度向上が期待できます。
②ユーティリティを組み合わせてデザインできるため、よりオリジナリティの高いデザインのWebサイト及びWebアプリケーションを作成可能
BootstrapなどのCSSフレームワークでは、効率的にデザイン実装ができる反面、同じようなデザインになりがちで、独自性が失われてしまいます。
一方で、TailwindCSSではユーティリティを組み合わせてデザインできるため、それらを組み合わせて使用することで、よりオリジナリティの高いデザインのWebサイト及びWebアプリケーションが作成可能です。
ドロップダウンやダイアログなど複雑なコンポーネントを作成したい場合は、Tailwind公式のTailwind UIも準備されています。その他にもHeadless UIやBulmaというものあり、それ以外にも色々と提供されています。
③CSSファイルのサイズを小さくできる
従来の方法だと、新しい機能を追加するたびにCSSファイルが大きくなっていましたが、再利用可能なユーティリティクラスを使用すると、新しいCSSを作成する必要はほとんどなくなります。そのため結果的にCSSの肥大化を阻止することが可能です。
④テーマ・サイズ・状態等ごとにスタイルを変えられる
これはBootstrapにはない大きなメリットだと思います。例えば、TailwindCSSでは、 dark:md:hover:bg-fuchsia-600 のようにダークモード時やサイズmdの時、ホーバー状態時などにスタイルをクラスで当てることが可能です。詳しい類似例については、以下のリンクから確認してみて下さい。
デメリット
①TailwindCSSのクラス名を覚えることなど慣れるまでに初期学習コストがかかること
一般的なCSSを書いてきた経験しかない人にとっては、ユーティリティクラスのみでスタイリングすることへの抵抗感が強いこと、Bootstrapよりも自由度が増す分、使い方が複雑で難しいと感じる人もいるかと思います。
②ユーティリティクラスを組み合わせるため、コードが長くなり可読性が落ちやすい
ユーティリティクラスを組み合わせるため、必然的に指定するクラスが多くなり、情報量が増えるため、可読性が落ち、分かりずらいなと感じることがあります。特にレスポンシブ対応の際にはかなり増える傾向が見受けられました。
おわりに
TailwindCSSは慣れてしまえばとても使いやすいフレームワークだと感じました。また、自由度が高く独自のデザインを比較的簡単に再現可能であり、class名をその都度考える必要ないため実装速度向上が期待できる、CSSのファイルサイズの肥大化を止めることが可能等、開発面で多くのメリットを享受することができるかと思います。どのプロジェクトでも容易に導入できそうなので、これからも様々なプロジェクトに導入されていくように思います。
個人的にもう少しTailwindCSSを触ってみたい人は、
にサンプルがあるので遊んでみてほしいと思います。
