La documentación de Tailwind sobre su configuración hace múltiples usos de la propiedad extend , pero no aclara la diferencia de hacer personalizaciones en la propiedad del theme VS la propiedad theme.extend .
module.exports = { content: ['./src/**/*.{html,js}'], theme: { colors: { 'blue': '#1fb6ff', 'purple': '#7e5bef', 'pink': '#ff49db', }, extend: { spacing: { '8xl': '96rem', '9xl': '128rem', }, } }, }¿Cual es la diferencia aquí? Lo probé y es posible cambiar los colores y las propiedades de espaciado y todavía funcionan.
Es bastante fácil, extend extiende el tema predeterminado, mientras que no usar extender anulará completamente el tema predeterminado para esa propiedad.
Entonces, en su ejemplo, solo tendrá 3 colores en total, porque se anularán todos los predeterminados.
Pero el espaciado se ampliará con valores adicionales al mismo tiempo que se conservan los valores predeterminados.