Nested box shadows

[martinstanicio]

In my tailwind.config.js I can replace the default box shadows with something like this:

module.exports = {
  theme: {
    boxShadow: {
      red: `0 0 10px red`,
      green: `0 0 10px green`,
      blue: `0 0 10px blue`,
    },
  }
}

And classes shadow-red, shadow-green and shadow-blue would work.

However, something like this would not work, even though Visual Studio Code extension gives the right classes:

module.exports = {
  theme: {
    boxShadow: {
      red: {
        default: `0 0 10px red`,
        big: `0 0 15px red`
      },
      green: {
        default: `0 0 10px green`,
        big: `0 0 15px green`
      },
      blue: {
        default: `0 0 10px blue`,
        big: `0 0 15px blue`
      },
    },
  }
}

Above I expect the classes shadow-color and shadow-color-big, but it seems like no classes are generated or applied.

[adamwathan]

Yeah this is correct behavior at the moment anyways, only the colors object supports this sort of nesting currently.

[Aniganesh]

Is it expected that the other keys will receive deep nesting support any time soon? It seems like all we need is a function that does the same job as flattenColorPalette but for non colour values and call it every time we pass the second prop for matchUtilities like this { values: flattenGenericObject(theme('lineClamp')) } instead of { values: theme('lineClamp') }.

I only did a cursory glance at the repo and felt this would add the feature. Is there something I'm missing? Performance issues or something else? I could open a PR for this.