こんにちは、フロントエンドエンジニアのあおきです。
実務で役立つ Tailwind CSSのテクニック をシリーズ形式で紹介しています。
第4回の今回は、「静的なデザインを動的に変える、状態と構造の制御」 についてです。
モディファイア（Modifiers）の活用
モダンなUI制作において、スタイルは常に静的ではありません。
ボタンのホバー、リストの偶数行、最後以外の要素への余白など、「状態（State）」や「構造（Structure）」によってスタイルを出し分ける必要があります。
Tailwindなら、これらすべてをHTML上のクラスだけで、宣言的に記述できます。
UIは「状態」で変化する
「擬似クラス ＝ hover」だと思っていませんか？
実務で求められるのは、ユーザーの操作（hover, focus）だけでなく、HTMLの並び順（first, last, nth-child）に応じた緻密な制御です。
CSSファイルに複雑なセレクタを書く時代は終わりました。Tailwindの擬似クラス（Variant）をマスターして、ロジックの見えるHTMLを書きましょう。
【コラム】「n番目の要素」に泣かない！Family.scssとTailwindの知恵
Tailwind CSSで実現する「Family.scss」ライクな柔軟な要素指定
SCSSユーザーにはおなじみの、 Family.scss というライブラリをご存知でしょうか？between(3, 5) のように、複雑な nth-child 指定を直感的な名前で書ける素晴らしいツールです。
「あの便利さをTailwindでも使いたい！」という場合、実は Arbitrary values（任意の値） を使えば、ライブラリ不要で同じロジックが再現できます。
複雑な範囲指定の対応表
「あの書き方、どうやるんだっけ？」と迷ったら、Family.scssのサイトでロジックを確認し、そのままブラケット [] に流し込むのが実務的で効率的です。
| 指定したい範囲 | Tailwind CSS での記述例（任意セレクタ） |
|---|---|
| 最初から3つ目まで | [&_li:nth-child(-n+3)]:font-bold |
| 3番目から5番目まで | [&_li:nth-child(n+3):nth-child(-n+5)]:bg-yellow-100 |
| 最後から3つ | [&_li:nth-last-child(-n+3)]:opacity-50 |
| 4番目以降すべて | [&_li:nth-child(n+4)]:mt-2 |
実務で多用する！厳選擬似クラス
Tailwindの擬似クラス（Variant）は、大きく分けて「構造（どこにあるか）」と「状態（何をしているか）」の2種類で考えます。
構造を制御する（Structure）
要素の並び順によってスタイルを出し分ける、レイアウトの要です。
first / last：最初と最後だけを狙い撃ち
活用例： first:mt-0 / last:mb-0
解説： リストの外側に余計な余白を作らないための「鉄板」指定です。
even / odd：1行おきにスタイルを変える
活用例： odd:bg-gray-100
解説： nth-child を使った縞々（ゼブラ）模様のテーブルが、これだけで作れます。
not-last：最後「以外」にすべて適用
活用例： not-last:mb-4
解説： 「最後だけマージンを消す」のではなく「最後以外にマージンを付ける」という逆転の発想。v3.4からの新機能で、劇的にコードが短くなります。
※以前のバージョンなら [&:not(:last-child)]:mb-4 と書きます。
状態を制御する（State）
ユーザーの操作に反応して、UIに動きを与えます。
hover：マウスが乗ったとき
活用例： hover:bg-blue-500
解説： ボタンやリンクの反応など、最も基本的なインタラクションです。
focus-within：内側の要素にフォーカスがあるとき
活用例： focus-within:ring-2
解説： 例えば、「入力フォーム（input）をクリックしたときに、その親である div 全体の枠線を光らせる」といったリッチな表現が、これ一つで可能です。
【実務例】テーブルレイアウトを1行で制御する
表（Table）の実装は、擬似クラスのパワーを最も実感できる場面です。
<tr class="even:bg-gray-50 hover:bg-blue-50 transition-colors">
<td class="p-4">ユーザー名</td>
<td class="p-4">ステータス</td>
</tr>even:bg-gray-50：1行おきに背景色を敷き、可読性を高める。hover:bg-blue-50：今どの行を見ているか、視覚的なフィードバックを返す。
高度な組み合わせ：状態 × 構造
これまで学んだ arbitrary selector と組み合わせることで、さらに強力な制御が可能になります。
例：hover:[&>p]:text-red-500
「親にホバーした時、その直下の pタグ だけを赤くする」
このように、「いつ（ホバー時）」「どこを（直下のpタグ）」というロジックをクラス名だけで完結させることができます。
DOM構造を理解して擬似クラスを使いこなす
TailwindでCSSを書かないための秘訣は、「DOM構造を正しく理解し、ロジックを組み立てる力」にあります。
CSSを書かないためのロジック
「ここに隙間がほしい」ではなく「最後以外の要素にマージンを付ける」と論理的に考える。
DOM構造への理解
first や nth-child がどの要素を指しているのか。親と子の関係を正確に捉えることで、複雑なレイアウトもJavaScriptなしで実装可能になります。
コードだけで動きを操る！Tailwind 擬似クラスで作るダイナミックUI
『この行だけ色を変えたい』『最後以外の要素にだけ余白を付けたい』。
こうした複雑な条件指定も、Tailwindの擬似クラスを使えばCSSファイルに触れることなく、HTML上のクラス名だけで完結します。
ユーザーの操作に反応する hover や focus はもちろん、nth-child を使った賢い構造制御まで、実際の挙動をデモで確認してみましょう！
See the Pen Tailwind CSS 実務テクニック集｜ 擬似クラス活用デモ by あおき (@himlinfq-the-encoder) on CodePen.
💡 デモの見どころ・チェックポイント
- 自動で色づくゼブラテーブル
even:bg-slate-50 を一行書くだけで、行数が増えても自動で1行おきに色がつきます。hover時のハイライト効果も必見です。 - 最後「以外」の要素を操作（not-last）
not-last:mb-4 という逆転の発想で、「最後の要素だけマージンを消す」という面倒な処理を1クラスで解決しています。 - 親要素ごと光るフォーム（focus-within）
入力欄をクリックすると、親の div 自体が光りだすリッチなフォーカス表現。JavaScriptなしでここまでできる利便性を体感してください。 - 状態 × 構造の高度な組み合わせ
親要素をホバーした時だけ、その中にある特定のテキストを強調させる group-hover テクニックを紹介しています。
まとめ：擬似クラスはUI制御のコア
擬似クラスを使いこなすことは、単に見た目を変えることではありません。
- UI制御のコア：動的な変化をクラスで記述できる
- 設計ツールへの進化：Tailwindを「ただの便利ツール」から、一貫性のある「UI設計ツール」へと変える
擬似クラスは、エンジニアがHTMLに「意思」を込めるためのツールです。構造を味方につけて、美しく管理しやすいコードを目指しましょう。
