Tailwind CSSでの直接の子要素のスタイリング

問題の概要

HTML構造で親要素の直接の子要素だけを対象にスタイリングしたい場合があります。例えば、以下のような構造で.sectionクラスの直接の子要素（.headerと.content）のみを選択したい場合です：

<div class="section">
   <div class="header">header</div>
   <div class="content">
      <div>sub contents 1</div>              
      <div>sub contents 2</div>
   </div>
</div>

CSSではdiv.section > divというセレクタで実現できますが、Tailwind CSSではどのように実現するのでしょうか？

解決方法

Tailwind CSSではいくつかの方法で直接の子要素をスタイリングできます。バージョンによって利用可能な方法が異なりますので、プロジェクトの環境に合わせて適切な方法を選択してください。

方法1: 任意バリアント（Tailwind CSS v3.1以上）

もっとも簡単な方法は、任意バリアントを使用する方法です。角括弧内にCSSセレクタを記述します：

<div class="[&>*]:p-4 [&>*]:bg-blue-200">
  <p>すべての直接の子要素にパディングが適用されます</p>
  <div>別の要素にも適用されます</div>
</div>

<div class="[&>p]:mt-3 [&>p]:bg-yellow-200">
  <p>この段落はマージントップが適用されます</p>
  <p>この段落も同様です</p>
</div>

スペースの扱いについて

セレクタ内にスペースが必要な場合、アンダースコア（_）で置き換えます：

<div class="[&_*]:p-4"> <!-- すべての子孫要素を選択 -->
<div class="[&_p]:mt-0"> <!-- すべての子孫p要素を選択 -->

方法2: ネイティブの子セレクタ（Tailwind CSS v3.4以上）

v3.4からはネイティブの子セレクタが導入され、より簡潔に記述できます：

<div class="*:text-gray-200 hover:*:text-blue-500">
   <div class="header">header</div>
   <div class="content">content</div>
</div>

方法3: カスタムバリアントの作成

より再利用性の高い方法として、カスタムバリアントを定義する方法があります。

Tailwind CSS v4の場合

@custom-variant sub (& > *);
@custom-variant sub-div (& > div);
@custom-variant sub-para (& > p);

定義したバリアントは以下のように使用します：

<div class="sub:mt-3 sub:bg-yellow-100">
  <p>すべての直接の子要素に適用</p>
  <div>こちらも適用されます</div>
</div>

<div class="sub-div:mt-3 sub-div:bg-yellow-200">
  <p>div要素のみに適用（p要素は対象外）</p>
  <div>こちらは適用されます</div>
</div>

Tailwind CSS v3の場合

tailwind.config.jsでプラグインを追加します：

module.exports = {
  plugins: [
    function ({ addVariant }) {
      addVariant('child', '& > *');
      addVariant('child-hover', '& > *:hover');
    }
  ],
}

使用例：

<div class="child:text-gray-200 child-hover:text-blue-500">
   <div class="header">header</div>
   <div class="content">content</div>
</div>

方法4: グループ機能の利用

特定の状態（ホバーなど）を子要素に適用する場合は、グループ機能も有用です：

<div class="group">
    <p class="group-hover:text-blue-500">ホバー時に青色</p>
    <p class="group-hover:text-red-500">ホバー時に赤色</p>
</div>

バリアントの組み合わせ

カスタムバリアントは他のバリアントと組み合わせて使用できます：

<div class="sub:first:bg-yellow-100 sub:last:bg-yellow-200">
  <p>最初の子要素</p>
  <div>中間の子要素</div>
  <div>最後の子要素</div>
</div>

<div class="sub:even:bg-yellow-300 sub:odd:bg-yellow-400">
  <p>奇数番目の子要素</p>
  <div>偶数番目の子要素</div>
  <p>奇数番目の子要素</p>
</div>

バージョンごとの注意点

• v3ではバリアントの順序が重要です（odd:child:）
• v4では順序が簡素化されました（child:odd:）

実践例：テーブルのスタイリング

複雑な構造にもカスタムバリアントを適用できます：

@custom-variant table-th (& > thead > tr > th);
@custom-variant table-td (& > tbody > tr > td);

<table class="table-th:text-lg table-td:text-blue-500 table-td:hover:font-bold">
  <thead>
    <tr><th>見出し1</th><th>見出し2</th></tr>
  </thead>
  <tbody>
    <tr><td>データ1</td><td>データ2</td></tr>
    <tr><td>データ3</td><td>データ4</td></tr>
  </tbody>
</table>

推奨アプローチ

1. 最新のTailwind CSS（v3.4以上）を使用している場合：ネイティブの子セレクタ（*:）を使用すると最も簡潔です
2. 細かい制御が必要な場合：任意バリアント（[&>*]）が柔軟性があります
3. プロジェクト全体で繰り返し使用する場合：カスタムバリアントを定義すると一貫性を保てます
4. 状態の共有が必要な場合：グループ機能も検討してください

Tailwind CSSのバージョンに注意し、プロジェクトの要件に最適な方法を選択しましょう。