Tailwind's documentation on its configuration makes multiple uses of the extend property, but doesn't clarify the difference of making customizations on the theme property VS the theme.extend property.
module.exports = {
content: ['./src/**/*.{html,js}'],
theme: {
colors: {
'blue': '#1fb6ff',
'purple': '#7e5bef',
'pink': '#ff49db',
},
extend: {
spacing: {
'8xl': '96rem',
'9xl': '128rem',
},
}
},
}
What is the difference here? I've tested and it's possible to switch the colors and spacing properties around and they still work.
It's pretty easy, extend extends default theme, while not using extend will completely override default theme for that property.
So in your example you will only have 3 colors in total, because all the default ones will be overridden.
But the spacing will be extended with additional values while preserving defaults too.