Tailwind CSSでセマンティックカラートークンを作成
success、warning、danger、infoなどの意味のあるコンテキスト認識型カラートークンをTailwind設定で作成し、スケーラブルなデザインシステムを構築します。
Colors
詳細な説明
セマンティックカラートークン
green-500やred-600のような汎用的なカラー名の代わりに、セマンティックトークンは視覚的な外観ではなく目的に基づいてカラーに意味を与えます。
セマンティックトークンが重要な理由
| 汎用的 | セマンティック |
|---|---|
bg-green-500 |
bg-success |
text-red-600 |
text-danger |
border-yellow-400 |
border-warning |
セマンティックトークンを使うと、successカラーを緑からティールに変更する場合、プロジェクト全体で検索・置換するのではなく、設定の1つの値を更新するだけで済みます。
高度な使い方：複数シェードのセマンティックトークン
DEFAULTキーを使うと、サフィックスなしでbg-successを使用でき、bg-success-lightやbg-success-darkも利用可能になります。
ユースケース
複数ブランドに対応したり簡単にリテーマできるデザインシステムやコンポーネントライブラリを構築する際にセマンティックトークンを使用してください。