tailwind-best-practices

Tailwind のベストプラクティス

概要

Mastra Playground の UI スタイリングに関するルーティングと優先度のガイドです。3 つのカテゴリにわたる 5 つのルールをまとめています。ルールファイルには、デザインシステムの一貫性を確保し、トークンの逸脱を防ぎ、コンポーネントライブラリの整合性を維持するための詳細な説明、例、レビューのガイダンスが記載されています。

適用範囲

• packages/playground-ui
• packages/playground

適用するタイミング

次の場合に、これらのガイドラインを参照してください。

• Tailwind スタイルを使った新しい React コンポーネントを作成するとき
• スタイリングの一貫性についてコードをレビューするとき
• 既存のスタイル付きコンポーネントをリファクタリングするとき
• UI 要素を追加または変更するとき

優先度順のガイドライン

ルールは影響度に応じて優先順位が付けられています。

優先度	カテゴリ	影響度
1	コンポーネントの使用	CRITICAL
2	デザイントークン	CRITICAL
3	ClassName の使用	HIGH

クイックリファレンス

重要なパターン（最初に適用）

コンポーネントの使用：

• @playground-ui/ds/components/ にある既存のコンポーネントを使用します（component-use-existing）
• ds/ フォルダーに新しいコンポーネントを作成しないでください

デザイントークン：

• @playground-ui の tailwind.config.ts にあるトークンのみを使用します（tokens-use-existing）
• デザイントークンや tailwind.config.ts を変更しないでください（tokens-no-modification）

影響度の高いパターン

ClassName の使用：

• height と width を除き、任意の Tailwind 値を使用しないでください（classname-no-arbitrary）
• DialogContent と Popover の h-／w- を除き、DS コンポーネントに className プロパティを指定しないでください（classname-no-ds-override）

参照資料

ルールファイルは、詳細なガイダンスと例を確認するための正式な情報源です。

• references/tailwind-best-practices-reference.md - カテゴリの順序とルールファイルのパスを含むルール一覧
• references/rules/ - カテゴリ別に整理された正式な個別ルールファイル

特定のスタイリングルールを実装またはレビューするときは、関連するルールファイルのみを読み込んでください。すべての例を読み込まずに、一覧から適切なルールを選んでください。

特定のパターンを探すには、rules ディレクトリで grep を実行します。

grep -l "component" references/rules/
grep -l "token" references/rules/
grep -l "className" references/rules/

references/rules/ 内のルールカテゴリ

• component-* - コンポーネントの使用ルール（1 ルール）
• tokens-* - デザイントークンのルール（2 ルール）
• classname-* - ClassName の使用ルール（2 ルール）