「MedTimer お薬タイマー」という、薬を服用できる時間がわかるWebアプリを個人開発しています。
開発ログ↓
ReactとTailwind CSSで作っているのですが、ボタンにマウスを乗せたら色が変わる動きや、スマホとパソコンで並び方を変える指定を、これまでAIに任せきりにしていました。（ホバーアクションについてはモバイルファーストにしたため外しました。）
コードを見ると hover:bg-accent とか md:grid-cols-2 のように、クラスの前に hover: や md: が付いています。
この「:（コロン）の前にくっついている部分」が何なのか、ずっとふわっとしたままでした。
今回そこを調べたので、わかったことをまとめておきます。
これは私が実際に使い込んだというより、コードを読み解くために調べた内容が中心です。
同じように hover: や md: で「これ何だろう」と止まっている方の役に立ったらうれしいです。
プレフィックスは「どんなときに効かせるか」の条件
調べてわかったのは、hover: や md: のような部分はプレフィックス（接頭辞）と呼ばれる「条件」だということでした。
ふつうのクラスは、いつでもそのスタイルが効きます。
ここでは、下記の色を使いたいと思います↓
bg-accent /* いつでも青の背景 */これは、あらかじめ定義しておいたもので、実際に使うときは自分で決めたのを使ってください！
詳しい内容は下記記事をご参照ください
ここにプレフィックスを付けると、「その条件のときだけ効く」という意味になります。
hover:bg-accent /* マウスを乗せたときだけ青の背景 */つまり クラスの前についた条件 + 本体のクラス という組み立てなんですね。
「いつ効かせるか」を前に、「何を効かせるか」を後ろに書く、と考えると読みやすくなりました。
よく出てくるプレフィックス
調べた範囲で、よく見かけるものを整理しておきます。
状態で変わるもの（hover / focus / active など）
マウスの動きや入力の状態に反応するプレフィックスです。
| プレフィックス | 効くタイミング |
|---|---|
| hover: | マウスを乗せたとき |
| focus: | 入力欄などを選択（フォーカス）したとき |
| active: | クリックしている最中 |
| disabled: | 無効化されているとき |
たとえばボタンなら、こういう書き方になります。
<button class="bg-accent hover:bg-accent-soft">
ボタン
</button>ふだんは bg-accent、マウスを乗せたときだけ bg-accent-soft に変わる、という意味です。
お薬タイマーの色の変数（--color-accent など）については別の記事に書いたので、そちらとあわせて読むとつながると思います。
画面幅で変わるもの（sm / md / lg など）
こちらは、画面の幅に応じてスタイルを切り替えるプレフィックスです。
スマホとパソコンでレイアウトを変えたいときに使う、レスポンシブ対応の部分です。
| プレフィックス | 効き始める画面幅 |
|---|---|
| （なし） | すべて（スマホ基準） |
| sm: | 640px以上 |
| md: | 768px以上 |
| lg: | 1024px以上 |
| xl: | 1280px以上 |
ここで大事だと思ったのが、Tailwindは「スマホ基準」で考えるという点です。
プレフィックスを付けないクラスがスマホ用の土台になり、md: などは「その画面幅以上になったら上書きする」という足し算の形で効きます。
<div class="grid-cols-1 md:grid-cols-2">この場合、スマホでは1列（grid-cols-1）、768px以上になったら2列（md:grid-cols-2）に変わります。
「小さい画面をまず作って、大きい画面で調整を足す」という順番で考えると、レスポンシブの指定が読みやすくなりました。
プレフィックスは重ねられる
調べていて「なるほど」と思ったのが、プレフィックスは2つ以上重ねられることでした。
md:hover:bg-accent-softこれは「768px以上の画面で、かつマウスを乗せたときだけ bg-accent-soft にする」という意味になります。
条件を左から順につなげていくイメージです。
スマホにはマウスのホバーがないので、パソコンでだけ色を変えたい、というときにこういう重ねがけをするようです。
つまずきやすいポイント
調べる中で「これは知らないとハマりそう」と思った点をまとめておきます。
スマホ用に md: を付けてしまう勘違い
レスポンシブで一番間違えやすいのがここのようです。
「スマホでは1列にしたい」と思って md:grid-cols-1 と書いてしまうと、意図と逆になります。
md: は「768px以上で効く」条件なので、これだとパソコンのときに1列になってしまいます。
スマホ用はプレフィックスなしで書く、というのが基本です。
/* 正しい：スマホ1列、PC2列 */
grid-cols-1 md:grid-cols-2
/* 勘違いしやすい：スマホの指定にmdを付けてしまう */
md:grid-cols-1 grid-cols-2クラス名を変数で組み立てると効かない
これは余白の記事にも書いたことですが、プレフィックス付きのクラスでも同じでした。
Tailwindは、ソースコードにそのままの文字列で書かれたクラスしか生成しないので、hover: や md: の部分を変数でつなぐと拾ってもらえません。
// 効く：hover:bg-accent がそのまま書いてある
className="hover:bg-accent"
// 効かない：状態を変数で連結している
className={`${state}:bg-accent`}プレフィックスも含めて、クラスは完成した文字列で書く、と覚えておこうと思いました。
focus: のリングが出ない・気づかない
focus: は入力欄を選んだときに効きますが、見た目の変化を自分で指定しないと何も起きません。
よく使われるのが、フォーカス時に枠（リング）を出す指定のようです。
focus:ring-2 focus:ring-accent入力欄を選んだときに、アクセント色の枠が2pxで出る、という意味になります。
フォームの使いやすさやアクセシビリティに関わる部分なので、余裕が出てきたら私も意識して入れたいところだと思いました。
まとめ
今回調べてわかったのは、hover: や md: のようなプレフィックスは「どんなときにそのスタイルを効かせるか」という条件で、条件を前・本体のクラスを後ろに書く組み立てになっている、ということでした。
状態で変わるもの（hover: focus: active:）と、画面幅で変わるもの（sm: md: lg:）があって、md:hover: のように重ねると条件を組み合わせられます。
レスポンシブはスマホをプレフィックスなしの土台にして、大きい画面で上書きを足すという考え方が基本で、スマホ用に md: を付けてしまうのが一番の勘違いポイントのようです。
私自身はまだAIが書いたコードを読み解いている段階で、自分でゼロから状態変化やレスポンシブを組めるところまでは来ていません。
それでも「この hover: は条件なんだ」とわかっただけで、コードを見たときの怖さが少し減りました。
Tailwindの基本のクラス一覧は別のチートシート記事にまとめているので、値の逆引きはそちらが便利だと思います。
余白のしくみや色の変数について書いた記事もあります。
