TailwindCSSを使ってみた感想とメリットデメリット

2024年5月20日 12:12

こんにちは、Webrydayのやまだです。
今回ダイソーウイング様のホームページ制作にて、
TailwindCSSを使用してフロント実装を行なったので、実際に開発で使ってみて良かった点を紹介したいと思います。

Tailwind CSSとは

Tailwind CSSは、オープンソースのCSSフレームワークで、
その設計は「ユーティリティファースト」という考え方に基づいています。

ユーティリティファーストとは、従来のCSSを書く代わりに、Tailwindが提供する多数のユーティリティクラスを活用してスタイリングする考え方のことです。例えば、フォントサイズに関しては、以下のようにサイズと行間を設定する「text-」クラスが豊富に用意されています。

使用例

まず従来のcssだと、例えばボタンを作る場合、以下のようにhtmlでクラスを設定し、そこにcssでスタイルを当てていきます。

【html】
<button class="primary-btn">ボタン</button>

【css】 
.primary-btn{
  font-size: 24px;
  font-weight: 600;
  padding: 20px 40px;
  color: #fff;
  background-color: #374151;
  border-radius: 16px;
}

Tailwind CSSを使用すると、複数のユーティリティクラスを組み合わせることで同じデザインを実現できます。

【html】
<button class="rounded-2xl bg-gray-700 px-10 py-5 text-2xl font-semibold text-white">ボタン</button>

各スタイルが個別のユーティリティクラスとしてhtmlタグ内に直接組み込まれています、このようにhtmlに直接スタイルを記述するのがTailwindCSSの特徴です。
例えば、text-2xl はフォントサイズ、px-10 py-5 はパディング、rounded-2xl は角丸、bg-gray-700 は背景色、そして text-white はテキストの色を指定しています。

メリット・デメリット

ここまで特徴を見てきたTailwind CSS。
個人的に感じたメリットとデメリット、それぞれの要点を簡単に紹介したいと思います。

メリット
・クラス名を考える必要がない
・チーム内で一貫したスタイリングが可能
・HTMLとCSSを交互に見る必要がない
・影響範囲が明確
・CSSファイルサイズを節約できる

デメリット
・HTMLが複雑になる

クラス名を考える必要がない

従来のCSSでは、例えばカード型のデザインを実装する際、複数のクラス名（card, card__img, card__title, card__paragraph など）を定義する必要がありました。これに対してTailwind CSSでは、直接ユーティリティクラスを記述するため、クラス名を考えることに悩む必要が無くなりました。

<div class="card">
  <img class="card__img" src="image.jpg">
  <h2 class="card__title">タイトル</h2>
  <p class="card__paragraph">説明が入ります</p>
</div>

チーム内で一貫したスタイリングが可能

Tailwind CSSのユーティリティクラスを使用することで、全てのメンバーが同じクラスの中から選択するため、スタイリングが一貫しています。
例えば、フォントサイズはtext-base (16px), text-lg (18px), text-xl (20px) といったクラスを用いるため、不用意に自分たちで作ったクラスが増えることがありません。これにより、メンバー間でのクラス名の競合や命名規則の不一致を防ぐことができます。

HTMLとCSSを交互に見る必要がない

従来のCSSの場合、スタイルの確認や編集のためにhtmlファイルとcssファイルを交互に見る必要があります。

Tailwind CSSでは、すべてのスタイルをhtmlに直接記述するため、htmlだけを見ることで全体のスタイルを把握して、編集することができます。
これにより、開発の時間短縮につながります。

スタイルの影響範囲が明確

従来のCSSでは、一つのスタイルシートがプロジェクト全体に影響を与えるため、一部の変更が意図しない他の要素に影響を及ぼすことがあります。
Tailwind CSSの場合、各HTML要素に直接クラスが適用されるため、その変更が影響を及ぼす範囲が明確になりました。

例えば、あるセクションのスタイルを変更した場合、そのセクションのみが変更されるため、他の要素は影響を受けません。意図しないデザインの変更を防ぐことができます。

CSSファイルサイズを節約できる

TailwindCSSは基本的に一つのユーティリティクラスを使い回すので、重複するスタイル定義がなく、CSSファイルの肥大化を防ぎます。

またTailwindCSSはPurgeCSSというツールを組み込んでおり、使っていないクラスを自動的に削除します。
例えばフォントサイズのクラスは、text-xs、text-sm、…text-9xlまで13個のクラスが用意されています。もしプロジェクト内でtext-smしか使用していない場合、それ以外の12個のクラスは本番のcssからは削除されます。
これにより、最終的にはプロジェクトで使用されているクラスのみが含まれたCSSファイルが生成され、ファイルサイズが小さくなります。

デメリット：HTMLが複雑になる

HTMLに、多くのユーティリティクラスを書くため、コードが読みにくくなりがちです。

以下のようにレスポンシブの記述も含めると、多くのクラスが一つの要素に適用されているため、慣れるまでは見づらく、どの要素に何のスタイルが当たっているのか特定するのが難しいと思います。

<main class="py-6 px-4 sm:p-6 md:py-10 md:px-8">
  <div class="max-w-4xl mx-auto grid grid-cols-1 lg:max-w-5xl lg:gap-x-20 lg:grid-cols-2">
    <div class="relative p-3 col-start-1 row-start-1 flex flex-col-reverse rounded-lg bg-gradient-to-t from-black/75 via-black/0 sm:bg-none sm:row-start-2 sm:p-0 lg:row-start-1">
      <h1 class="mt-1 text-lg font-semibold text-white sm:text-slate-900 md:text-2xl dark:sm:text-white">Beach House in Collingwood</h1>
      <p class="text-sm leading-4 font-medium text-white sm:text-slate-500 dark:sm:text-slate-400">Entire house</p>

まとめ

今回のプロジェクトでTailwind CSSを採用したことにより、設計の負担が軽減され、実装速度が向上するなど、開発面で多くのメリットを実感できました。特にクラス名を考える必要がなくなったのが非常に大きかったです。

今回の記事では紹介できていませんが、Tailwind CSSにはユーティリティクラスの他にも、様々な機能があるため、それらの理解を深めてよりメンテナンス性の高い構築をしていきたいと思います。