Object syntax for other CSS properties?

[severinlandolt]

Hey everyone! I am wondering if it's true, that the object syntax only works for colors in the tailwind config?

Example of color object syntax here: https://tailwindcss.com/docs/customizing-colors#color-object-syntax

I want to do something like this:

boxShadow: {
+      customname: {
          sm: "0 1px 2px 0 rgb(0 0 0 / 0.05)",
          DEFAULT: "0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1)",
          md: "0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1)",
          lg: "0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1)",
        },
      },

[wongjn]

The object syntax only works for colors in Tailwind configuration. This is because for the core plugins that use colors, they convert the object into a flat dictionary:

tailwindcss/src/corePlugins.js

Line 2139 in 0e171fd

{ values: flattenColorPalette(theme('textColor')), type: ['color', 'any'] }

However, core plugins that do not use colors don't do not expect a variable depth object of values and so they do not flatten the values:

tailwindcss/src/corePlugins.js

Line 2342 in 0e171fd

{ values: theme('boxShadow'), type: ['shadow'] }

[severinlandolt]

Thank you!