EnglishEnglish العربيةالعربية PortuguêsPortuguês 日本語日本語

【Tailwind入門】コア概念：ユーティリティクラスとプレフィックスシステム

ユーティリティクラスの仕組み

Tailwind CSSの核心はユーティリティクラスです。各クラスは特定のCSSプロパティに対応しています。複数のユーティリティクラスを組み合わせることで、HTML内に直接複雑なスタイルを構築できます。

例

HTML 
<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>ユーティリティクラスの仕組み</title>
  <script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="min-h-screen bg-gray-100 p-8">
  <div class="bg-white rounded-lg shadow-md p-6 max-w-md mx-auto">
    <h2 class="text-2xl font-bold text-gray-800 mb-4">ユーティリティクラスデモ</h2>
    <p class="text-gray-600 leading-relaxed mb-4">
      各クラス名は1つのCSSプロパティに対応しています
    </p>
    <button class="bg-blue-500 text-white px-4 py-2 rounded hover:bg-blue-600 transition-colors">
      クリック
    </button>
  </div>
</body>
</html>
▶ 試してみよう

上記のコードで各クラスが何をするか：

Tailwindクラス 対応するCSS
bg-white background-color: #fff
rounded-lg border-radius: 0.5rem
shadow-md box-shadow: ...
p-6 padding: 1.5rem
text-2xl font-size: 1.5rem
font-bold font-weight: 700

従来のCSSとTailwindの比較 従来の方法ではセマンティックなクラス名（例：.card）を作成し、CSSファイルでスタイルを定義する必要がありますが、Tailwindは原子的なユーティリティクラスを直接使用し、CSSファイルの記述と保守を不要にします。

Hover/Focus状態プレフィックス

Tailwindは状態プレフィックスを使ってインタラクション状態を処理します。hover:、focus:、active:などがあり、構文は直感的で使いやすいです。

例

HTML 
<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>状態プレフィックスデモ</title>
  <script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="min-h-screen bg-gray-50 flex items-center justify-center gap-8">
  <!-- ホバーエフェクト -->
  <button class="bg-blue-500 text-white px-6 py-3 rounded-lg
                 hover:bg-blue-700 hover:shadow-lg hover:scale-105
                 transition-all duration-300">
    ホバーエフェクト
  </button>

  <!-- フォーカスエフェクト -->
  <input type="text" placeholder="クリックして効果を確認"
         class="px-4 py-3 border-2 border-gray-300 rounded-lg
                focus:border-blue-500 focus:ring-2 focus:ring-blue-200
                focus:outline-none transition-all">

  <!-- 状態の組み合わせ -->
  <button class="bg-green-500 text-white px-6 py-3 rounded-lg
                 hover:bg-green-600
                 focus:ring-2 focus:ring-green-300
                 active:bg-green-700
                 disabled:opacity-50 disabled:cursor-not-allowed">
    状態の組み合わせ
  </button>
</body>
</html>
▶ 試してみよう

従来のCSSとTailwindの比較 従来の方法では.button:hoverや.button:focusのような疑似クラスセレクタを書く必要がありますが、Tailwindはクラス名にhover:やfocus:プレフィックスを追加するだけで済みます。

💡 ポイント： よく使う状態プレフィックスには、hover:（ホバー）、focus:（フォーカス）、active:（アクティブ）、disabled:（無効）、first:（最初の要素）、last:（最後の要素）があります

レスポンシブプレフィックス

Tailwindはモバイルファーストの戦略に従い、レスポンシブプレフィックスを使って異なる画面サイズのスタイルを設定します：sm:、md:、lg:、xl:、2xl:。

例

HTML 
<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>レスポンシブプレフィックスデモ</title>
  <script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="min-h-screen bg-gray-100 p-4">
  <div class="max-w-6xl mx-auto">
    <h1 class="text-xl md:text-2xl lg:text-4xl font-bold text-center mb-8">
      レスポンシブ見出し
    </h1>
    
    <!-- レスポンシブGrid -->
    <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-4">
      <div class="bg-white p-4 rounded-lg shadow">カード 1</div>
      <div class="bg-white p-4 rounded-lg shadow">カード 2</div>
      <div class="bg-white p-4 rounded-lg shadow">カード 3</div>
      <div class="bg-white p-4 rounded-lg shadow">カード 4</div>
      <div class="bg-white p-4 rounded-lg shadow">カード 5</div>
      <div class="bg-white p-4 rounded-lg shadow">カード 6</div>
      <div class="bg-white p-4 rounded-lg shadow">カード 7</div>
      <div class="bg-white p-4 rounded-lg shadow">カード 8</div>
    </div>

    <!-- レスポンシブ表示/非表示 -->
    <div class="mt-8">
      <p class="block md:hidden text-center text-red-500">小画面でのみ表示</p>
      <p class="hidden md:block lg:hidden text-center text-blue-500">中画面でのみ表示</p>
      <p class="hidden lg:block text-center text-green-500">大画面でのみ表示</p>
    </div>
  </div>
</body>
</html>
▶ 試してみよう

ブレークポイント参照：

プレフィックス 最小幅 代表的なデバイス
sm: 640px 大きめのスマホ、小型タブレット
md: 768px タブレット
lg: 1024px ノートPC
xl: 1280px デスクトップモニター
2xl: 1536px 大型ディスプレイ

従来のCSSとTailwindの比較 従来の方法では@mediaクエリ内に多数のレスポンシブルールを書く必要がありますが、TailwindはHTML内でプレフィックスを使って直接レスポンシブ動作を宣言します。

ダークモードプレフィックス

dark:プレフィックスを使えば、ダークモード対応が簡単になります。ダークモード用の異なるスタイルを定義するだけです。

例

HTML 
<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>ダークモードデモ</title>
  <script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="min-h-screen bg-white dark:bg-gray-900 transition-colors">
  <div class="max-w-2xl mx-auto p-8">
    <h1 class="text-3xl font-bold text-gray-800 dark:text-white mb-6">
      ダークモードの例
    </h1>
    
    <div class="bg-gray-100 dark:bg-gray-800 rounded-xl p-6 mb-6">
      <p class="text-gray-600 dark:text-gray-300 leading-relaxed">
        このテキストはライトモードでは濃い灰色、ダークモードでは薄い灰色で表示されます。
        背景色もそれに応じて切り替わります。
      </p>
    </div>

    <div class="flex gap-4">
      <button class="bg-blue-500 dark:bg-blue-600 text-white px-6 py-3 rounded-lg
                     hover:bg-blue-600 dark:hover:bg-blue-700 transition-colors">
        プライマリボタン
      </button>
      <button class="border border-gray-300 dark:border-gray-600
                     text-gray-700 dark:text-gray-300 px-6 py-3 rounded-lg
                     hover:bg-gray-100 dark:hover:bg-gray-800 transition-colors">
        セカンダリボタン
      </button>
    </div>
  </div>

  <script>
    // ダークモード切替のサンプルコード
    function toggleDarkMode() {
      document.documentElement.classList.toggle('dark');
    }
  </script>
</body>
</html>
▶ 試してみよう

従来のCSSとTailwindの比較 従来の方法ではダークモード用に別のCSSクラスを書くか、[data-theme="dark"]セレクタを使う必要がありますが、Tailwindはクラス名にdark:プレフィックスを追加するだけで済みます。

⚠️ 注意： ダークモードを有効にするには、Tailwindの設定でdarkMode: 'class'を設定するか、<html>タグにdarkクラスを追加してください。

任意値構文

Tailwindの任意値構文を使うと、角括弧[]を使って任意のCSS値を挿入でき、最大限の柔軟性が得られます。

例

HTML 
<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>任意値構文デモ</title>
  <script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="min-h-screen bg-gray-100 p-8">
  <div class="max-w-4xl mx-auto space-y-8">
    <!-- カスタム幅と高さ -->
    <div class="bg-white p-6 rounded-lg shadow">
      <h3 class="font-semibold mb-4">カスタムサイズ</h3>
      <div class="w-[300px] h-[200px] bg-blue-200 rounded flex items-center justify-center">
        300px × 200px
      </div>
    </div>

    <!-- カスタムカラー -->
    <div class="bg-white p-6 rounded-lg shadow">
      <h3 class="font-semibold mb-4">カスタムカラー</h3>
      <div class="flex gap-4">
        <div class="w-20 h-20 bg-[#ff6b6b] rounded-lg"></div>
        <div class="w-20 h-20 bg-[#4ecdc4] rounded-lg"></div>
        <div class="w-20 h-20 bg-[rgb(102,51,153)] rounded-lg"></div>
        <div class="w-20 h-20 bg-[hsl(207,90%,54%)] rounded-lg"></div>
      </div>
    </div>

    <!-- カスタム間隔 -->
    <div class="bg-white p-6 rounded-lg shadow">
      <h3 class="font-semibold mb-4">カスタム間隔</h3>
      <div class="space-y-[15px]">
        <div class="bg-gray-200 p-3 rounded">間隔 15px</div>
        <div class="bg-gray-200 p-3 rounded">間隔 15px</div>
        <div class="bg-gray-200 p-3 rounded">間隔 15px</div>
      </div>
    </div>

    <!-- カスタムフォントサイズ -->
    <div class="bg-white p-6 rounded-lg shadow">
      <h3 class="font-semibold mb-4">カスタムフォント</h3>
      <p class="text-[22px] leading-[32px] text-[#333]">
        カスタム22pxフォントサイズ、32px行の高さ
      </p>
    </div>
  </div>
</body>
</html>
▶ 試してみよう

対応する任意値の形式：

構文 例 説明
固定値 w-[100px] ピクセル値
カラー値 bg-[#ff0000] 16進数カラー
RGB text-[rgb(255,0,0)] RGBカラー
CSS変数 p-[var(--spacing)] CSS変数の使用
計算値 w-[calc(100%-2rem)] calc式

従来のCSSとTailwindの比較 従来の方法では特殊な値のためにカスタムCSSルールを作成する必要がありましたが、Tailwindの任意値構文を使えば、追加設定なしでクラス名に直接任意のCSS値を使用できます。

💡 ポイント： 任意値内のスペースはアンダースコアに置き換える必要があります。例えば、grid-cols-[1fr_2fr_1fr]はgrid-template-columns: 1fr 2fr 1frを表します。

❓ よくある質問

Q ユーティリティクラスでHTMLが肥大化しませんか？
A HTML内のクラス名は増えますが、開発中はコンポーネント（React、Vueコンポーネントなど）を通じてコードを再利用できます。本番ビルドでは、Tailwindが未使用のクラスを自動的に削除するため、最終的なCSSファイルは非常に小さくなります。
Q レスポンシブプレフィックスはモバイルファーストですか、デスクトップファーストですか？
A Tailwindはモバイルファーストの戦略に従っています。プレフィックスなしのスタイルはすべての画面に適用され、sm:以上は対応するブレークポイント以上で有効になります。
Q システム設定と手動のダークモード切替の両方に対応するにはどうすればよいですか？
A darkMode: 'selector'設定を使用し、JavaScriptで<html>のdarkクラスを切り替えることで対応できます。prefers-color-schemeメディアクエリと組み合わせれば自動検出も可能です。
Q 任意値構文はパフォーマンスに影響しますか？
A 任意値はビルド時に処理されるため、ランタイムのパフォーマンスへの影響はありません。ただし、よく使う値はテーマ設定に抽出して、コードの一貫性を保つことをお勧めします。

📖 まとめ

📝 課題

  1. ⭐ 通常、ホバー、フォーカス、無効の各状態を持つボタングループを作成し、異なる状態間のスタイル変化を示してみましょう

  2. ⭐⭐ モバイルで1段、タブレットで2段、デスクトップで3段、大画面で4段になるレスポンシブカードリストを作成し、ライト/ダークモードの切替も実装してみましょう

  3. ⭐⭐⭐ 任意値構文を使って、不均等な段幅分布（例：1:2:1の比率）とカスタム間隔を持つカスタムサイズのGridレイアウトを作成してみましょう

100%