スキル自身の言葉で
Tailwind CSS v4（2024年以降）上で本番運用可能な設計システムを構築します。app.css 内の @theme が tailwind.config.ts を置き換える CSS ファーストの設定、OKLCH で記述されたセマンティックカラートークン、キーフレームが @theme 内に配置される radius・アニメーショントークン、@custom-variant で宣言されるクラスベースのダークモード、@layer base に適用されるベーススタイルまでを解説します。
また、ブランドからセマンティック、コンポーネントトークンへと至るトークン階層、ベーススタイル・バリアント・サイズ・状態・オーバーライドを実行するコンポーネントアーキテクチャ、そしてレスポンシブでアクセシブルなコンポーネントパターンについても説明します。コンポーネントライブラリを作成するチーム、コードベース全体でUIパターンを標準化するチーム、Tailwind v3から移行するチームに向けて書かれています。
仕組み
- 01CSSエントリーポイントで Tailwind をインポートする
app.css は、v3の @tailwind base/components/utilities ディレクティブではなく、単一の @import から始まります。
- 02@theme 配下にセマンティックトークンセットを宣言する
background、foreground、primary、secondary、muted、accent、destructive、border、ring、card はすべて OKLCH のカラートークンとして宣言されます。
- 03キーフレーム付きのアニメーショントークンを追加する
--animate-fade-in と --animate-fade-out は0.2sで実行され、--animate-slide-in と --animate-slide-out は0.3sで実行され、それぞれに対応する @keyframes ブロックが @theme 内で宣言されます。
- 04.dark 配下で同じトークン名をオーバーライドする
dark ブロックは新しい名前を導入するのではなく、すべてのトークンを再割り当てし、background、foreground、primary、secondary、muted、accent、destructive、border、ring、card、ring-offset を反映します。
- 05ベースレイヤーのデフォルトを設定する
@layer base はすべての要素に border-border を適用し、body にはテーマに沿った background、foreground の色、そしてアンチエイリアスを与えます。
- 06レイヤー順にコンポーネントを構築する
コンポーネントは、ベーススタイル、バリアント、サイズ、状態、オーバーライドの順に進みます。