Theme resolution order

Understanding merge order removes 90% of "why is my token missing" questions. The resolved theme is computed as:

built-in defaults  ←  presets[]  ←  theme  ←  theme.extend

• Defaults — the full built-in token set (22 palettes, spacing scale, screens…).
• Presets — applied left to right; later presets win on conflict.
• theme — replaces whole keys you name.
• theme.extend — deep-merges into the result of the above.

Worked example#

{
  theme: {
    colors: { brand: { 500: '#6d28d9' } }, // only 'brand' + defaults survive
  },
  // vs.
  theme: {
    extend: { colors: { brand: { 500: '#6d28d9' } } }, // adds 'brand', keeps all defaults
  }