Tailwind CSSが他のCSSフレームワーク（例: Bootstrapなど）の設計思想とは根本的に異なる点とは

従来のCSSフレームワークの前提

BootstrapやBulmaのようなフレームワークでは、コンポーネントが中心的な存在。それらにとって、ユーティリティクラスは主役ではなく、例外対応や微調整のための補助的なツールとして扱われている。

ユーティリティクラス（例: .p-1, .gap-3）は、「コンポーネントがカバーしきれない細かな調整」に使われる補助的な存在でしかない。

Tailwind CSSの前提の逆転

Tailwind CSSでは、ユーティリティクラスこそが基本であり中心

Tailwind CSSはユーティリティクラスが主役で、コンポーネントは必要に応じて作るものだと定義するもので、これが「ユーティリティファースト」というTailwind CSSの設計思想の核心。

Tailwind CSSにおける「コンポーネント」は「効率を良くするための道具」

結論

1. まずはユーティリティクラスでデザインを作る
2. 繰り返し使うデザインを「コンポーネント」として抽出
3. コンポーネントは「効率を良くするための道具」

補足

Tailwind CSSでは、ボタンやカードといったUIを作るとき、最初から「ボタン用のクラス」や「カード用のクラス」を使うのではなく、小さなユーティリティクラス（例: p-4, bg-blue-500, text-white）を組み合わせて作る。

<button class="bg-blue-500 text-white px-4 py-2 rounded">Click me</button>

このように、ユーティリティクラスを積み上げてデザインを作るのが基本。

もし、このボタンを何度も使う必要があるなら、毎回同じユーティリティクラスを繰り返すのは面倒なのでコンポーネント化に至る。そうすることで、ボタンを再利用しやすくし、変更が必要なときも一箇所の修正で済むようになる。

<button class="btn-primary">Click me</button>

Tailwind CSSでは、このbtn-primaryも、結局はユーティリティクラスの組み合わせで定義される。

.btn-primary {
  @apply bg-blue-500 text-white px-4 py-2 rounded;
}

Tailwind CSSにとって、コンポーネントは最初から用意されているものではなく、開発者が「効率よく再利用するため」に作るもの。ユーティリティクラスが土台にあり、コンポーネントはその上に構築される「補助的なもの」という位置づけ。

まとめ

• BootstrapのようなCSSフレームワークは、コンポーネントが主役でユーティリティは補助的
• Tailwind CSSはその考えを逆転させ、ユーティリティクラスが主役で、コンポーネントは必要に応じて作るもの
  • そしてこれが「ユーティリティファースト」と呼ばれる所以

補足：Tailwind CSSの「デザインの自由度」と「一貫性」をどう両立しているか？

デザインの自由度

ユーティリティクラスを組み合わせることで、細かいデザインを自由に作れる。小さな調整やカスタマイズも容易。

デザインの一貫性

Tailwindの設定ファイルで共通のテーマを定義し、全体のルールを統一できる。コンポーネント化で再利用性を高め、デザインのばらつきを防ぐ。

上記のように使用すると、「デザインの自由度」と「一貫性」をを同時に実現できるとしている。これによって効率的かつ統一感のあるデザインが可能になる。