状態に反応させる（hover:とfocus:）

前の回で覚えた「接頭辞を付ける」という書き方は、画面幅だけでなく状態にも使えます。仕組みはまったく同じなので、新しく覚えるのは接頭辞の名前だけです。

<button class="bg-orange-500 hover:bg-orange-600">
  送信する
</button>

hover:bg-orange-600が「マウスを乗せたとき背景をorange-600にする」。素のCSSに戻すとこうです。

button {
  background-color: #f97316;
}
button:hover {
  background-color: #ea580c;
}

CSSの擬似クラスが、そのまま接頭辞になっているだけです。

よく使う接頭辞

組み合わせて重ねられるのもポイントです。

<!-- 768px以上で、マウスを乗せたとき -->
<a class="text-slate-600 md:hover:text-orange-500">リンク</a>

接頭辞は左から順に条件が積み上がります。読み方は「md:のとき、hoverしたら」。

ボタンの定番セット

押せるものを作るときは、これをひとかたまりとして覚えてしまうのが早いです。

<button class="px-6 py-3 bg-orange-500 text-white font-bold rounded-full
               hover:bg-orange-600
               focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2
               active:scale-95
               transition duration-200">
  送信する
</button>

1行ずつの意味はこうです。

• 1行目——ふだんの見た目（余白・色・太字・丸み）
• hover:——マウスを乗せたら少し濃くする
• focus-visible:——キーボードで来たとき、囲みを出す
• active:scale-95——押している最中に少し縮む（押した感）
• transition duration-200——変化を0.2秒でなめらかに

transitionを忘れると固く見える

hover:だけだと、見た目がパッと瞬間で切りかわります。なめらかにしたいならtransitionを足します。

transition duration-200をひとかたまりで覚えて、押せるものには必ず付ける——これだけで手ざわりが一段よくなります。

group——親に反応して子を変える

カード全体にマウスを乗せたとき、中のタイトルの色を変えたい。素のCSSだとこう書きます。

.card:hover .card__title {
  color: #f97316;
}

Tailwindでは、親にgroupという目印を付けて、子にgroup-hover:を書きます。

<a href="#" class="group block p-4 bg-white rounded-xl hover:shadow-lg transition">
  <p class="font-bold group-hover:text-orange-500 transition">しまちゃんのページ</p>
  <p class="text-sm text-slate-500">クリックで開きます</p>
</a>

groupはスタイルを持たない目印で、「この子たちは、この親の状態を見ていいよ」という宣言です。カードのリンク全体を押せるようにする定番の作りなので、覚えておくと出番が多いです。

dark:——ダークモードに対応する

端末がダークモードのときだけ効く指定も、接頭辞で書けます。

<div class="bg-white text-slate-800 dark:bg-slate-800 dark:text-slate-100 p-4 rounded-xl">
  どちらのモードでも読めます
</div>

明るいほうを土台にして、dark:で上書きするのが基本の形です。md:と同じ発想なので、書き方に迷いません。

気をつけたいのは指定を1組でセットにすることです。dark:bg-slate-800だけ書いて文字色を忘れると、暗い背景に暗い文字という読めない組み合わせになります。背景を変えるなら文字色も、と対で考えてください。

一覧の行を交互に塗る

odd:とeven:は、表や一覧で便利です。

<ul>
  <li class="p-2 odd:bg-slate-50">1行目</li>
  <li class="p-2 odd:bg-slate-50">2行目</li>
  <li class="p-2 odd:bg-slate-50">3行目</li>
</ul>

素のCSSの:nth-child(odd)と同じで、同じクラスを全部の行に書いておけば、奇数行だけに効きます。行が増えても書き方は変わりません。

このレッスンのまとめ

1. 擬似クラスも接頭辞で書ける。md:とまったく同じ仕組み
2. 押せるものにはhover:＋focus-visible:＋transitionの3点セット
3. hover:だけだとキーボードで操作する人に伝わらない
4. groupを親に付ければ、親の状態で子のスタイルを変えられる
5. dark:は明るい方を土台に上書き。背景と文字色は必ず対で指定する
6. 接頭辞は1クラスごとに付け直す——まとめて効かせることはできない

書き方はここまでで一通りそろいました。最後の回では、書いてきて感じたはずの「これは素のCSSのほうが早いな」という感覚を、判断の基準として言葉にします。