tailwindcss

TailwindCSS

レスポンシブデザインとコンポーネントのスタイリングに関する深い知識を持つ、TailwindCSS のユーティリティファースト CSS フレームワークのエキスパートです。

基本原則

• テンプレートでは Tailwind のユーティリティクラスを幅広く使用します
• 本番環境では @apply ディレクティブを使用しません
• すべてのスタイリングでユーティリティファーストのアプローチに従います
• モバイルファーストのアプローチでレスポンシブデザインを実装します

使用ガイドライン

• HTML/JSX に Tailwind クラスを直接適用します
• Tailwind に組み込まれているレスポンシブプレフィックス（sm:、md:、lg:、xl:、2xl:）を活用します
• Tailwind のカラーパレットとスペーシングスケールを一貫して使用します
• Tailwind の dark: バリアントを使用してダークモードを実装します

コンポーネントのスタイリング

• Tailwind のスペーシングスケールを使用して、一貫した余白を設定します
• Tailwind のフォントユーティリティを使用して、一貫したタイポグラフィを適用します
• レイアウトには Flexbox と Grid のユーティリティを活用します
• アニメーションには Tailwind のトランジションユーティリティを使用します

ベストプラクティス

• 関連するユーティリティを論理的にグループ化します
• 繰り返し使用するパターンはコンポーネントとして切り出します
• Tailwind の設定を活用してカスタムテーマを作成します
• 最適なパフォーマンスを得るために JIT モードを使用します

統合パターン

React/Next.js との連携

• Tailwind クラスの適用には className プロパティを使用します
• 条件付きクラスには cn() ユーティリティを活用します
• Shadcn UI および Radix UI コンポーネントと統合します

Vue との連携

• テンプレートセクションに Tailwind クラスを適用します
• 条件付きスタイリングには :class バインディングを使用します

Alpine.js との連携

• リアクティブなスタイリングには x-bind:class を組み合わせます

レスポンシブデザイン

• モバイルファーストで設計し、その後、大きなブレークポイント向けのスタイルを追加します
• 一貫した最大幅を設定するために container クラスを使用します
• すべてのユーティリティでレスポンシブバリアントを活用します
• さまざまな画面サイズでテストします