カスタムプロパティ・Grid・コンテナクエリ・:has()・論理プロパティから、設計、Tailwind CSS v4、ダークモードまで。全20レッスンで「素の CSS と Tailwind を使い分けられる」ところまで進みます。CSS の挙動はブラウザ上でそのまま動かして確かめられます。
全20レッスンを5つの章に分けています。第1章から順に進めるのがおすすめですが、 気になるところだけ拾い読みしてもかまいません。 CSS の挙動はブラウザ内でそのままプレビューできます。第3章以降の Tailwind は、手元に Node.js があると実際にビルドしながら進められます。
カスタムプロパティ・Grid・コンテナクエリ・:has()・論理プロパティを、ブラウザで動かしながら確かめます。第5回まで進むと、メディアクエリと JavaScript に頼らずに書ける範囲が大きく広がります。
名前の付け方、詳細度との付き合い方、デザイントークンの決め方を順に固めます。最後は素の CSS だけで小さなデザインシステムを組み上げます。
Tailwind CSS v4 を実際に入れ、ユーティリティとバリアントの読み方、@theme でのトークン定義、@apply の使いどころまで扱います。生成された CSS を毎回その場で確認します。
ダークモード、状態（hover・focus・無効・エラー）の表現、アニメーションを、素の CSS と Tailwind の両方で書きます。どちらで書いても最終的に同じ CSS に落ちることを確かめます。
Tailwind が生成した CSS を実測して読み、素の CSS との使い分けを決めます。自分のプロジェクトでどちらを選ぶかを言葉にできるところまで進みます。
全20レッスンを終えたら、次はコンポーネントを組む React か Vue へ。メンバーシップで全コースが解放されます。