株式会社くりぼーPublicationへの投稿
🎨

Tailwind CSSは本当に便利？従来のCSSとの比較で分かる、メリット・デメリット

株式会社くりぼー
に公開
CSS
React
Tailwind CSS
frontend
tech

はじめに

「classに大量のユーティリティクラスを書くのって保守性が悪くない？」

Tailwind CSSを初めて見たとき、こんな疑問を抱いた方は多いのではないでしょうか。HTML要素のclass属性に長々とクラス名が並ぶ姿は、一見すると混乱を招きそうに見えます。

しかし、実際に使ってみると、その考えが変わるかもしれません。本記事では、従来のCSS（BEM記法など）、CSS Modules、Tailwind CSSの3つのアプローチを実際のコード例で比較し、それぞれのメリット・デメリットを客観的に評価します。

また、「インラインスタイルと同じでは？」といったよくある誤解にも丁寧に回答し、読者が自信を持ってスタイリング手法を選べるようにします。

スタイリング手法の全体像

まず、現代のフロントエンド開発で主に使われるスタイリング手法を整理しましょう。

本記事では、特に以下の3つに焦点を当てます。

  1. 従来のCSS（BEM記法） - クラス名に命名規則を適用
  2. CSS Modules - スコープを限定してクラス名の衝突を防ぐ
  3. Tailwind CSS - ユーティリティクラスを組み合わせてスタイルを構築

実際のコード例で比較

同じUIコンポーネント（カード型のユーザープロフィール）を、3つの手法で実装してみましょう。

1. 従来のCSS（BEM記法）

BEM（Block Element Modifier）は、クラス名に一貫性を持たせる命名規則です。

<div class="user-card">
  <div class="user-card__header">
    <img src="avatar.jpg" alt="User Avatar" class="user-card__avatar">
    <h2 class="user-card__name">田中太郎</h2>
  </div>
  <p class="user-card__description">
    フロントエンド開発者。ReactとTypeScriptが好きです。
  </p>
  <button class="user-card__button user-card__button--primary">
    フォローする
  </button>
</div>

/* user-card.css */
.user-card {
  background-color: #ffffff;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  padding: 24px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
  max-width: 400px;
}

.user-card__header {
  display: flex;
  align-items: center;
  margin-bottom: 16px;
}

.user-card__avatar {
  width: 48px;
  height: 48px;
  border-radius: 9999px;
  margin-right: 12px;
}

.user-card__name {
  font-size: 20px;
  font-weight: 600;
  color: #111827;
}

.user-card__description {
  color: #6b7280;
  margin-bottom: 16px;
  line-height: 1.5;
}

.user-card__button {
  padding: 8px 16px;
  border-radius: 6px;
  border: none;
  font-weight: 500;
  cursor: pointer;
  transition: background-color 0.2s;
}

.user-card__button--primary {
  background-color: #3b82f6;
  color: #ffffff;
}

.user-card__button--primary:hover {
  background-color: #2563eb;
}

2. CSS Modules

CSS Modulesは、クラス名を自動的にユニークにして、スコープを限定します。

// UserCard.module.css
import styles from './UserCard.module.css';

function UserCard() {
  return (
    <div className={styles.card}>
      <div className={styles.header}>
        <img src="avatar.jpg" alt="User Avatar" className={styles.avatar} />
        <h2 className={styles.name}>田中太郎</h2>
      </div>
      <p className={styles.description}>
        フロントエンド開発者。ReactとTypeScriptが好きです。
      </p>
      <button className={`${styles.button} ${styles.primary}`}>
        フォローする
      </button>
    </div>
  );
}

/* UserCard.module.css */
.card {
  background-color: #ffffff;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  padding: 24px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
  max-width: 400px;
}

.header {
  display: flex;
  align-items: center;
  margin-bottom: 16px;
}

.avatar {
  width: 48px;
  height: 48px;
  border-radius: 9999px;
  margin-right: 12px;
}

.name {
  font-size: 20px;
  font-weight: 600;
  color: #111827;
}

.description {
  color: #6b7280;
  margin-bottom: 16px;
  line-height: 1.5;
}

.button {
  padding: 8px 16px;
  border-radius: 6px;
  border: none;
  font-weight: 500;
  cursor: pointer;
  transition: background-color 0.2s;
}

.primary {
  background-color: #3b82f6;
  color: #ffffff;
}

.primary:hover {
  background-color: #2563eb;
}

3. Tailwind CSS

Tailwind CSSは、あらかじめ用意されたユーティリティクラスを組み合わせてスタイルを構築します。

function UserCard() {
  return (
    <div className="bg-white border border-gray-200 rounded-lg p-6 shadow-sm max-w-md">
      <div className="flex items-center mb-4">
        <img
          src="avatar.jpg"
          alt="User Avatar"
          className="w-12 h-12 rounded-full mr-3"
        />
        <h2 className="text-xl font-semibold text-gray-900">田中太郎</h2>
      </div>
      <p className="text-gray-600 mb-4 leading-relaxed">
        フロントエンド開発者。ReactとTypeScriptが好きです。
      </p>
      <button className="px-4 py-2 bg-blue-500 text-white rounded-md font-medium hover:bg-blue-600 transition-colors">
        フォローする
      </button>
    </div>
  );
}

各手法のメリット・デメリット比較

従来のCSS（BEM記法）

メリット

  • クラス名から用途が明確に理解できる
  • 設計思想がシンプルで学習コストが低い
  • CSSファイルが独立しているため、デザイナーとの協業がしやすい
  • IDEのサポートが充実している

デメリット

  • クラス名の命名に悩む時間が発生する
  • グローバルスコープのため、命名の衝突リスクがある
  • CSSファイルが肥大化しやすい
  • 未使用のCSSを特定するのが困難
  • HTMLとCSSを行き来する必要がある

CSS Modules

メリット

  • クラス名の衝突を自動的に防ぐ
  • コンポーネント単位でスタイルを管理できる
  • 従来のCSS記法がそのまま使える
  • 未使用のCSSを削除しやすい

デメリット

  • ビルドツールの設定が必要
  • クラス名の命名には依然として悩む
  • 動的なクラス名の組み合わせが煩雑になる
  • スタイルの再利用性が低い
  • HTMLとCSSファイルを行き来する必要がある

Tailwind CSS

メリット

  • CSSファイルを書く必要がない
  • クラス名を考える時間が不要
  • コンポーネント内でスタイルが完結する
  • デザインシステムが標準で組み込まれている（色、サイズなどの一貫性）
  • 未使用のクラスを自動的に削除できる（PurgeCSS）
  • レスポンシブ対応が簡単（md:, lg: などのプレフィックス）
  • 状態管理も直感的（hover:, focus: など）

デメリット

  • classに大量のクラスが並び、見た目が煩雑になる
  • 独自のクラス名を覚える学習コストがある
  • カスタムデザインには設定ファイルの編集が必要
  • チーム全体での採用合意が必要
  • 複雑なスタイルの場合、可読性が下がる

よくある疑問に答える

Q1: Tailwind CSSってインラインスタイルと同じでは？

A: 全く違います。

インラインスタイルとTailwind CSSは見た目が似ていますが、本質的に異なります。

{/* インラインスタイル */}
<button style={{
  padding: '8px 16px',
  backgroundColor: '#3b82f6',
  color: '#ffffff',
  borderRadius: '6px',
  fontWeight: 500
}}>
  ボタン
</button>

{/* Tailwind CSS */}
<button className="px-4 py-2 bg-blue-500 text-white rounded-md font-medium">
  ボタン
</button>

主な違い

項目 インラインスタイル Tailwind CSS
CSSの再利用 不可（各要素に個別記述） 可能（クラスを共有）
擬似クラス 使えない（:hoverなど） 使える（hover:プレフィックス）
レスポンシブ 困難 簡単（md:, lg:など）
パフォーマンス 各要素が個別のスタイル クラスをまとめて最適化
デザインの一貫性 保ちにくい 設計トークンで統一

Q2: classが長すぎて読みにくくない？

A: 確かに長いですが、慣れると逆に読みやすくなります。

Tailwind CSSのクラス名は、一貫したパターンに従っています。

{/* パターンが分かると読みやすい */}
<div className="
  flex          {/* レイアウト */}
  items-center  {/* 配置 */}
  justify-between
  p-4           {/* スペーシング */}
  bg-white      {/* 背景色 */}
  rounded-lg    {/* 角丸 */}
  shadow-md     {/* 影 */}
  hover:shadow-lg  {/* ホバー時の影 */}
  transition-shadow {/* トランジション */}
">

さらに、コンポーネント化やカスタムクラスでまとめることもできます。

// 再利用可能なコンポーネント化
function Card({ children }) {
  return (
    <div className="bg-white border border-gray-200 rounded-lg p-6 shadow-sm">
      {children}
    </div>
  );
}

// または、カスタムクラスで定義
// tailwind.config.js
module.exports = {
  theme: {
    extend: {},
  },
  plugins: [
    function({ addComponents }) {
      addComponents({
        '.card': {
          '@apply bg-white border border-gray-200 rounded-lg p-6 shadow-sm': {},
        }
      })
    }
  ]
}

Q3: 既存のCSSプロジェクトからTailwindに移行できる？

A: 段階的に移行可能です。

Tailwind CSSは、既存のCSSと共存できます。

{/* 既存のCSSとTailwindを併用 */}
<div className="legacy-header px-4 py-2 bg-white">
  <h1 className="legacy-title text-2xl font-bold">タイトル</h1>
</div>

移行の流れ:

どの手法を選ぶべき？プロジェクト別ガイド

Tailwind CSSが向いているケース

  • プロトタイピングを重視する: 素早くUIを構築したい
  • デザインシステムの一貫性を保ちたい: 色やサイズを統一したい
  • コンポーネントベースの開発: React、Vue.jsなどを使用
  • チームでの開発: 命名規則の議論を減らしたい
  • レスポンシブ対応が重要: モバイル・タブレット・デスクトップ対応

従来のCSSが向いているケース

  • 小規模なサイト: 複雑な状態管理が不要
  • デザイナーとの協業が多い: CSSファイルを直接編集したい
  • 独自のデザインが多い: 既存のフレームワークに縛られたくない
  • 学習コストを抑えたい: 新しいツールを導入したくない

CSS Modulesが向いているケース

  • 中規模のアプリケーション: 適度なスコープ制御が必要
  • 従来のCSS記法を維持したい: BEMなどの手法を継続したい
  • グローバルスコープを避けたい: クラス名の衝突を防ぎたい

Tailwind CSSのベストプラクティス

1. コンポーネント化を積極的に活用

同じスタイルパターンが繰り返される場合は、コンポーネントに抽出しましょう。

// Bad: 同じスタイルを各所に記述
<button className="px-4 py-2 bg-blue-500 text-white rounded-md hover:bg-blue-600">
  送信
</button>
<button className="px-4 py-2 bg-blue-500 text-white rounded-md hover:bg-blue-600">
  保存
</button>

// Good: コンポーネント化
function PrimaryButton({ children, onClick }) {
  return (
    <button
      onClick={onClick}
      className="px-4 py-2 bg-blue-500 text-white rounded-md hover:bg-blue-600 transition-colors"
    >
      {children}
    </button>
  );
}

2. 設定ファイルでデザイントークンをカスタマイズ

プロジェクト固有の色やサイズは、設定ファイルで定義しましょう。

// tailwind.config.js
module.exports = {
  theme: {
    extend: {
      colors: {
        primary: '#3b82f6',
        secondary: '#8b5cf6',
        accent: '#f59e0b',
      },
      spacing: {
        '72': '18rem',
        '84': '21rem',
        '96': '24rem',
      },
    },
  },
}

3. レスポンシブデザインを活用

Tailwindのブレークポイントプレフィックスを使って、簡単にレスポンシブ対応できます。

<div className="
  grid
  grid-cols-1    {/* モバイル: 1列 */}
  md:grid-cols-2 {/* タブレット: 2列 */}
  lg:grid-cols-3 {/* デスクトップ: 3列 */}
  gap-4
">
  {/* カードコンポーネント */}
</div>

まとめ

Tailwind CSSは、従来のCSSアプローチとは異なる「ユーティリティファースト」という思想に基づいています。classに大量のクラス名が並ぶ見た目は確かに煩雑ですが、以下のような大きなメリットがあります。

Tailwind CSSの主なメリット

  • CSSファイルを書く必要がなく、コンポーネント内でスタイルが完結
  • クラス名の命名に悩む時間を削減
  • デザインシステムが標準で統一されている
  • レスポンシブ対応や状態管理が簡単

一方で、以下のような点に注意が必要

  • 学習コストがある（独自のクラス名体系）
  • 複雑なスタイルでは可読性が下がる可能性
  • チーム全体での採用合意が必要

最終的には、プロジェクトの特性やチームの好みによって最適な手法は変わります。本記事で紹介した比較を参考に、自信を持ってスタイリング手法を選択してください。

特にReactやVue.jsなどのコンポーネントベースのフレームワークを使っている場合、Tailwind CSSは非常に強力な選択肢となります。初めは慣れないかもしれませんが、一度慣れてしまうと、その生産性の高さに驚くはずです。

ぜひ、小さなプロジェクトから試してみて、自分に合ったスタイリング手法を見つけてください！

株式会社くりぼー
株式会社くりぼーPublication

「お客様、社員の明るい未来を創造する」 福岡市を拠点にしている、株式会社くりぼーのTechブログです。 フリーランスエンジニアの方も活躍中です！ 中途採用をご検討の方やフリーランスの方、お気軽にホームページよりお問い合わせください！

Discussion