Tailwind CSS実践ガイド

従来のCSSとは異なるユーティリティファーストというアプローチと、Tailwind CSSがなぜ実務で広く使われるのかを解説します。

Next.js・ViteプロジェクトへのTailwind CSSインストールと基本設定、tailwind.config.tsの構造を解説します。

Tailwindのflex・grid系クラスを使って横並び・グリッドレイアウトを素早く組む方法を解説します。

Tailwindのスペーシングスケールの仕組みと、p・m・w・h系ユーティリティの使い方を解説します。

Tailwind CSSのtext-lg、text-base、text-smなどの文字サイズをpx・remで一覧化し、font-family、font-weight、leading、tracking、改行制御、レスポンシブ指定まで解説します。

Tailwindのカラーパレットの構造、bg・text・border系クラスの使い方、テーマカラーのカスタマイズ方法を解説します。

sm:・md:・lg:などのブレークポイントプレフィックスを使い、画面幅に応じてスタイルを切り替える方法を解説します。

hover:・focus:・active:・disabled:・group・peerなどTailwindの状態修飾子（擬似クラス）を、仕組みから実践パターン・早見表・ハマりどころまで網羅的に解説します。

Tailwindのdark:プレフィックスを使ったダークモード実装と、OS設定連動・手動切り替えの両対応方法を解説します。

ボタン・カード・バッジ・フォームなど、Tailwindで作るよく使うUIコンポーネントのパターンをまとめます。

Tailwindのデフォルト値を拡張・上書きして、プロジェクト固有のデザインシステムを構築する方法を解説します。

Reactコンポーネントでのクラス管理、cvaによるバリアント設計、cn()ユーティリティの活用など、実務で使うパターンをまとめます。