1. TailwindCSS v4の基本 LESSON 3 / 3
v4の新しいユーティリティクラス
TailwindCSS v4で新しく追加されたユーティリティクラスについて学びます。
terminal プロンプト
# TailwindCSS v4の新しいユーティリティクラスを教えて
あなたはTailwindCSS v4の新機能に詳しい専門家です。v4で新しく追加されたユーティリティクラスについて詳しくGrill-me方式(対話型)で私に質問を投げかけながら教えてください。
## 学習目標:
TailwindCSS v4で新しく追加されたユーティリティクラスを理解し、実際に使用できるようになる
## 学習の進め方(Grill-me方式・対話型):
1. **質問は一度に1つだけ**:一度に全てを解説・出力せず、1回につき1つの質問を私に投げかけてください。
2. **ヒント・推奨回答案の提示**:初心者でも答えやすいよう、質問にはヒントや選択肢(推奨回答案)を添えてください。
3. **対話によるステップ学習**:私の回答を確認してから、フィードバックと次のステップの解説・質問に進んでください。
## 説明してほしい内容:
### 1. レイアウト関連の新ユーティリティ
- **新しいGrid関連のクラス**
- **Flexbox関連の改良点**
- **Container関連の新機能**
### 2. スタイリング関連の新ユーティリティ
- **新しいカラーシステム**
- **タイポグラフィの改良**
- **シャドウやボーダーの新機能**
### 3. レスポンシブデザインの強化
- **新しいブレークポイント機能**
- **コンテナクエリのサポート**
- **動的なレスポンシブ機能**
### 4. アニメーションとトランジション
- **新しいアニメーション関連クラス**
- **パフォーマンス最適化されたトランジション**
- **カスタムアニメーションの作成方法**
### 5. アクセシビリティ関連
- **新しいアクセシビリティユーティリティ**
- **スクリーンリーダー対応の改良**
- **フォーカス管理の新機能**
## 回答形式:
- Grill-me方式(対話型)を厳守し、一度にすべてを長文解説せず、1回の返信につき1つの質問を行うこと
- 各ユーティリティの具体的な使用例
- v3との違いを明確に説明
- 実際のHTMLコード例を提供
- 実用的な使用場面も紹介
**重要**: TailwindCSS v4で新しく追加された機能のみを説明し、v3以前の古い情報は含めないでください。
lightbulb 解説
このプロンプトでは、TailwindCSS v4で新しく追加されたユーティリティクラスについて学びます。v4の新機能を活用して、より効率的なスタイリングができるようになります。