「Tailwind CSS、クラスが長くなりすぎてカオスになる」——そう思って距離を置いてた人、実は多いんじゃないかと思う。
かく言う自分も、最初はそのパターンにハマった。className="flex items-center justify-between px-4 py-2 bg-blue-500 text-white rounded-lg hover:bg-blue-600 transition-colors duration-200" みたいなモンスター行を書いて「これ、メンテ無理では」と感じた記憶がある。
でも、コンポーネント設計をちゃんと意識して使うと、話がまるで変わった。副業でSaaS系のフロントを受注するようになってから、Tailwindの設計パターンをいくつか身につけたことで、同じ品質のUIを以前の2〜3倍のスピードで作れるようになったのは正直な話。
この記事では、そのコンポーネント設計の基本——クラス管理、再利用パターン、よくあるミスの回避策——を実際のコードと一緒に整理していく。Tailwindを「なんとなく使ってる」状態から「ちゃんと設計できる」状態に持っていくための内容です。
Tailwind CSSをコンポーネント設計で使うべき理由
まず前提として、Tailwind CSS（スター数：GitHub上で85,000+、2026年3月時点）は「ユーティリティファーストCSS」のフレームワーク。あらかじめ用意されたクラスを組み合わせてスタイルを書いていく設計思想で、従来のBEM記法やCSS Modulesとは根本的に違う。
「クラスが増える」という批判はわかる。でも、その批判の大半はコンポーネント化せずにHTMLに直書きし続けた結果だと思っている。
ユーティリティファーストの本質
Tailwindが強いのは、デザインの意思決定をコードと1対1で対応させられる点。
たとえば mt-4 は「margin-top: 1rem」。text-gray-700 は「color: #374151」。クラス名を見ればすぐスタイルが想像できる。CSSファイルを行き来しなくて済む。
この恩恵を最大に受けるには、繰り返し使うUIパーツをコンポーネントとして抽出することが前提になる。それをやらないと、確かにクラスの海で溺れる。
ReactやNext.jsとの相性
個人的に、TailwindはReactまたはNext.jsと組み合わせて使う前提で考えると設計しやすい。コンポーネントを関数として定義し、propsで見た目を切り替える構成にするだけで、クラスの管理がかなり楽になる。
コメント