Tailwind ConfigのExtend vs Override
tailwind.config.jsのtheme.extendと直接のtheme上書きの重要な違いと、それぞれのアプローチをいつ使うべきかを理解します。
General
詳細な説明
Extend vs Override
これはTailwind設定の最も重要な概念の一つであり、初心者にとってバグの一般的な原因です。
違い
ExtendはTailwindのデフォルトと並んで値を追加します。Overrideはセクション全体を置き換えます。
いつExtendを使うか
- いくつかのカスタム値を追加する場合（最も一般的）
- すべてのデフォルトユーティリティを保持したい場合
いつOverrideを使うか
- デザインシステムがデフォルトスケールを完全に置き換える場合
- 利用可能な値を厳密に制御したい場合
よくある間違い
デフォルトを保持するつもりで、theme.extend.colorsの代わりにtheme.colorsに値を配置してしまうこと。これによりTailwindの組み込みカラーがすべて誤って削除されます。
ユースケース
設定値をtheme.extendに置くか、直接themeの下に置くかを決定する際にこのガイドを参照してください。