theme vs theme.extend — when you add tokens and when you replace them, with merge examples.
Syntax#
nakshora.config.js
export default {
theme: {
extend: {
colors: { brand: { 500: '#6d28d9' } }, // keeps all defaults
},
},
};Details & defaults#
Deep-merges into the resolved theme. Objects merge key-by-key; arrays append. This is the option you want 95% of the time.
Worked examples#
- Add
brandcolors without touching the 22 defaults - Add a spacing step:
extend.spacing[18] = "4.5rem" - Add a screen:
extend.screens["3xl"] = "1920px"(already built in on 3.1)
Related options#
See the configuration/index|configuration hub for the full option table, and api/theme-resolution|theme resolution for how options merge.
