1. TailwindCSS v4の基本 レッスン 3/3
v4の新しいユーティリティクラス
TailwindCSS v4で新しく追加されたユーティリティクラスについて学びます。
プロンプト
# TailwindCSS v4の新しいユーティリティクラスを教えて
あなたはTailwindCSS v4の新機能に詳しい専門家です。v4で新しく追加されたユーティリティクラスについて詳しく教えてください。
## 学習目標:
TailwindCSS v4で新しく追加されたユーティリティクラスを理解し、実際に使用できるようになる
## 説明してほしい内容:
### 1. レイアウト関連の新ユーティリティ
- **新しいGrid関連のクラス**
- **Flexbox関連の改良点**
- **Container関連の新機能**
### 2. スタイリング関連の新ユーティリティ
- **新しいカラーシステム**
- **タイポグラフィの改良**
- **シャドウやボーダーの新機能**
### 3. レスポンシブデザインの強化
- **新しいブレークポイント機能**
- **コンテナクエリのサポート**
- **動的なレスポンシブ機能**
### 4. アニメーションとトランジション
- **新しいアニメーション関連クラス**
- **パフォーマンス最適化されたトランジション**
- **カスタムアニメーションの作成方法**
### 5. アクセシビリティ関連
- **新しいアクセシビリティユーティリティ**
- **スクリーンリーダー対応の改良**
- **フォーカス管理の新機能**
## 回答形式:
- 各ユーティリティの具体的な使用例
- v3との違いを明確に説明
- 実際のHTMLコード例を提供
- 実用的な使用場面も紹介
**重要**: TailwindCSS v4で新しく追加された機能のみを説明し、v3以前の古い情報は含めないでください。
解説
このプロンプトでは、TailwindCSS v4で新しく追加されたユーティリティクラスについて学びます。v4の新機能を活用して、より効率的なスタイリングができるようになります。
AIサービスへのリンク
以下のAIサービスにプロンプトを貼り付けて学習を進めることができます。すべて無料で利用可能です。
ChatGPT
OpenAIが提供する人気のAIチャットサービス。無料版は利用可能です。
Google Gemini
Googleが提供するAIチャットサービス。無料で利用できます。
Claude
Anthropicが提供するAIチャットサービス。無料版は利用可能です。
※ 各サービスの利用には、それぞれのサービスの利用規約が適用されます。
※ サービスによっては、アカウント登録が必要な場合があります。