v4でのコンポーネントパターン

# TailwindCSS v4での再利用可能なコンポーネントパターンを教えて あなたはTailwindCSS v4を使ったコンポーネント設計の専門家です。v4の新機能を活用したコンポーネントパターンを教えてください。 ## 学習目標： TailwindCSS v4を使用して、保守性の高い再利用可能なコンポーネントを作成できるようになる ## 説明してほしい内容： ### 1. v4でのコンポーネント設計原則 - **v4の新機能を活用したコンポーネント設計** - **カスタムプロパティを使った柔軟なコンポーネント** - **テーマ対応コンポーネントの作成** ### 2. 基本的なUIコンポーネント - **ボタンコンポーネントの実装** - **カードコンポーネントの作成** - **フォーム要素のスタイリング** ### 3. 複雑なレイアウトコンポーネント - **ナビゲーションコンポーネント** - **グリッドレイアウトシステム** - **レスポンシブなヘッダー・フッター** ### 4. インタラクティブコンポーネント - **モーダルとオーバーレイ** - **ドロップダウンメニュー** - **タブとアコーディオン** ### 5. コンポーネントライブラリの構築 - **コンポーネントの文書化** - **バリエーションとプロパティの管理** - **テストとメンテナンス戦略** ## 回答形式： - 実際のHTMLとCSSコード例 - React/Vue/Svelteでの実装例も含める - アクセシビリティ対応も考慮 - 実用的なデザインパターン **重要**: TailwindCSS v4の新機能を活用したコンポーネントパターンに焦点を当ててください。