Skill.md検索

Tailwind CSS v4 の正規クラス名（canonical classes）を使用し、suggestCanonicalClasses 警告を回避できます。 v3 からの移行で変わったシャドウ・リング・角丸・opacity 修飾子の正しい記法を理解し、適切に置き換えられます。 CSS 変数ベースのセマンティックカラー（primary、secondary、muted、accent、destructive、sidebar など）を使い、ハードコードされた色指定を排除できます。 ダークモード対応をセマンティックカラーで一元管理し、明暗切り替え時の色の自動反映を実現できます。 shadcn/ui (New York) との統合により、コンポーネント層のカラー設計を統一できます。 Tailwind CSS v4 への移行を進めるフロントエンドエンジニアの人 デザインシステムをセマンティックカラーで統一管理したい UI デザイナー・開発チームの人 shadcn/ui を導入し、theme カスタマイズを効果的に行いたい人 ダークモード対応を簡潔に実装したい開発者の人 v4 正規クラス名への変更点：shadow-sm → shadow-xs、shadow → shadow-sm、drop-shadow-sm → drop-shadow-xs、ring → ring-3、ring-inset → inset-ring、rounded → rounded-md、blur → blur-sm、text-opacity-50 → text-[color]/50、bg-opacity-50 → bg-[color]/50、flex-shrink → shrink、flex-grow → grow。opacity 修飾子はスラッシュ記法で指定（例：bg-primary/50 text-foreground/80）し、v3 の bg-opacity-* 形式は廃止。カラーはセマンティックトークンを使用（bg-primary、text-foreground、bg-muted、border-border など）し、ハードコードを禁止。チャート用に bg-chart-1 ～ bg-chart-5 の5色を使用。サイドバーは専用トークン（bg-sidebar、text-sidebar-foreground など）で管理。ダークモードは dark: バリアントを使い、セマンティックカラー組み込みで自動対応。CSS変数ベースのデザイントークンにより、テーマ変数の追加・変更・ダークモード対応を統一的に行える。