Callback in theme properties is also the theme function

[philipp-spiess]

Something we noticed while testing the codemods on one of our codebases is that the callback passed to the theme function properties doesn't only expose some properties like colors, but it's also a function itself.

/** @type {import('tailwindcss').Config} */
export default {
  theme: {
    extend: {
      colors: (theme) => {
        // The `theme` is a theme function _and_ the object...
        console.log(theme('spacing.2'), theme.colors.red['500'])
        return {}
      },
    },
  },
  plugins: [],
}

E.g.: https://play.tailwindcss.com/eV7Jgv17X1?file=config

---

h/t to @RobinMalfait for the issue description

[RobinMalfait]

Nice!

[RobinMalfait]

Looks like we do have some type issues but otherwise this looks good

[thecrypticace]

I'm like 95% sure this is not documented anywhere. Pretty sure the types for v3 consider this usage invalid too. We'll still need to support it for B/C reasons but I think we should introduce a wrapper function that warns the first time its used.

cc @philipp-spiess @RobinMalfait thoughts?

[philipp-spiess]

See #14661