tailwind-best-practices

Tailwind CSS v4 のベストプラクティス

MCP ツールを使って、最新の Tailwind CSS ドキュメントを参照できます。正確で最新の情報を提供するために、これらのツールを使用してください。

利用可能な MCP ツール

mcp__tailwindcss__search_tailwind_docs

Tailwind の機能、ユーティリティ、概念について質問された場合に使用します。

mcp__tailwindcss__get_tailwind_utilities

特定の CSS プロパティに対応するユーティリティクラスが必要な場合に使用します。

mcp__tailwindcss__get_tailwind_colors

色、カラーパレット、色関連のユーティリティについて質問された場合に使用します。

mcp__tailwindcss__convert_css_to_tailwind

Tailwind のユーティリティクラスに変換したい CSS がある場合に使用します。

mcp__tailwindcss__generate_component_template

Tailwind のスタイルを適用したコンポーネントテンプレートが必要な場合に使用します。

---

参考ファイル

詳細なパターン、コード例、ドキュメントの URL については、関連するファイルを参照してください。

docs-urls.md — 公式ドキュメントの URL

カテゴリ（Getting Started、Core Concepts、Layout、Spacing、Sizing、Typography、Backgrounds & Borders、Effects、Transforms & Animation、Interactivity）ごとに整理された URL の表です。MCP ツールを利用できない場合は、WebFetch と併用してください。

v4-syntax.md — Tailwind CSS v4 の基本構文

重要：v4 では v3 から大幅に変更されています。CSS ベースの設定（色、フォント、間隔）に使用する @import "tailwindcss"、@theme ディレクティブ、クラス検出に使用する @source、ダークモードに使用する @variant dark、抽出に使用する @layer components、プラグインに使用する @plugin について説明しています。

best-practices.md — ベストプラクティス

クラスの順序に関する規約（レイアウト → 間隔 → サイズ → タイポグラフィ → 色 → エフェクト → インタラクティブ）、レスポンシブデザイン（モバイルファースト、ブレークポイントの一覧）、コンポーネントの抽出ルール（3 回以上使用する場合）、ハードコード値よりテーマ変数を優先する方法、アクセシビリティ（focus-visible、sr-only、コントラスト）について説明しています。

anti-patterns.md — v4 のアンチパターン

v3 から v4 への移行表（tailwind.config.js → @theme、@tailwind → @import など）と、よくある間違い（インラインスタイル、px 値、重複または競合するユーティリティ）について説明しています。

quick-reference.md — クイックリファレンス

Tailwind のサポートに関する回答ガイドライン、回答例の流れ、間隔のスケール表、よく使われるユーティリティのパターン（コンテンツの中央寄せ、カード、レスポンシブグリッド、テキストの切り詰め、グラデーション、固定ヘッダー）を掲載しています。

---

最新のドキュメントについては、常に https://tailwindcss.com/docs を参照してください。