Theme extend arrays are not merged

[flybayer]

Describe the problem:

v2 now deeply merges theme extensions, so I also expected arrays to be merged.

I.e. I want the below to keep the default fontFamily.sans config but add Inter Var to the beginning.

module.exports = {
  theme: {
    extend: {
      fontFamily: {
        sans: ["Inter var"],
      },
    },
  },
}

Link to a minimal reproduction:

https://play.tailwindcss.com/VWhUl3yiv2?file=config

[jacobdalamb]

put const defaultTheme = require('tailwindcss/defaultTheme'); at the top before module.exports & ['Inter var', ...defaultTheme.fontFamily.sans]`

[flybayer]

Yeah, that's what I'm doing as a workaround.

[jacobdalamb]

(arrays like in fontFamily are not deep merged)
#2679

[flybayer]

Yeah, I know. I'm suggesting that be changed :)

The docs indicated that everything would be merged, hence why I initially thought this was a bug.

[jacobdalamb]

Yeah, I know. I'm suggesting that be changed :)

The docs indicated that everything would be merged, hence why I initially thought this was a bug.

Ohhh gotcha

[adamwathan]

@flybayer If we merged arrays you couldn't override a single font-family without overriding all of them and not using extend. It's also unintuitive that arrays are merged by adding things to the beginning (makes sense for font-family, but that feels like an edge-case).

It would also be annoying if you wanted to override the shadow-xl shadow without your own shadow-xl only to find that your shadows were combined (since shadows can be defined as arrays too).

So no plans to change this for now unfortunately.