この問題集の使い方と前提
Tailwind CSS は「クラス名 → 生成される CSS」の対応と、その CSS がどの順で出力されるかが分かれば迷わなくなります。この問題集は Tailwind CSS v4（CSS ファイル側の @import "tailwindcss" と @theme で設定する方式）を前提にし、v3 の tailwind.config.js との違いは問題文で明示します。正解は実際に Tailwind v4 でクラスをコンパイルして確かめています（subjects/tailwind/tests/）。
| ユーティリティと優先順位 | 同じプロパティを持つクラスが並んだときどちらが効くか、!、任意値、@layer。 |
|---|---|
| レスポンシブと状態 | sm: などのブレークポイント、hover: focus-visible: dark:、group / peer / has-[] / data-[]、重ねる順序。 |
| 設計トークンと @theme | 色・余白・書体を @theme で定義し、ユーティリティと CSS 変数の両方から使う。 |
| 設定とソース検出 | どのファイルからクラスを拾うか（@source）、動的クラス名が消える理由、ビルドツールとの組み合わせ。 |
| コンポーネント化と再利用 | @apply の使いどころ、clsx + tailwind-merge（cn()）、バリアントの設計。 |
| NativeWind | React Native で Tailwind のクラスを使うときに、Web と同じもの・違うもの。 |
学習モードでは選択肢を選ぶと正誤と解説が表示されます。解説末尾の「参考」は tailwindcss.com の該当ページです。
問題文・解説は本問題集独自のものです。正解は Tailwind CSS v4 で実際にコンパイルして確認しています。各解説の末尾に参照した公式ドキュメントへのリンクを示しています。 ご意見・LP 制作の事例を送る →