Callback in theme properties is also the theme function

CHANGELOG.md

@@ -12,6 +12,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 - Add support for `tailwindcss/colors.js`, `tailwindcss/defaultTheme.js`, and `tailwindcss/plugin.js` exports ([#14595](https://github.com/tailwindlabs/tailwindcss/pull/14595))
 - Support `keyframes` in JS config file themes ([#14594](https://github.com/tailwindlabs/tailwindcss/pull/14594))
 - Support the `color` parameter in JS theme configuration callbacks ([#14651](https://github.com/tailwindlabs/tailwindcss/pull/14651))
+- Support using the object parameter in the JS theme configuration callback as `theme()` function ([#14659](https://github.com/tailwindlabs/tailwindcss/pull/14659))
 - _Upgrade (experimental)_: Migrate v3 PostCSS setups to v4 in some cases ([#14612](https://github.com/tailwindlabs/tailwindcss/pull/14612))
 - _Upgrade (experimental)_: Automatically discover JavaScript config files ([#14597](https://github.com/tailwindlabs/tailwindcss/pull/14597))
 - _Upgrade (experimental)_: Migrate legacy classes to the v4 alternative ([#14643](https://github.com/tailwindlabs/tailwindcss/pull/14643))

packages/tailwindcss/src/compat/config/resolve-config.test.ts

@@ -202,6 +202,10 @@ test('theme keys can read from the CSS theme', () => {
             // Gives access to the colors object directly
             primary: colors.green,
           }),
+          transitionColor: (theme) => ({
+            // The parameter object is also the theme function
+            ...theme('colors'),
+          }),
         },
       },
       base: '/root',
@@ -237,6 +241,10 @@ test('theme keys can read from the CSS theme', () => {
           '950': '#052e16',
         },
       },
+      transitionColor: {
+        red: 'red',
+        green: 'green',
+      },
     },
   })
 })

packages/tailwindcss/src/compat/config/resolve-config.ts

@@ -116,8 +116,9 @@ export function mergeThemeExtension(
   return undefined
 }
 
-export interface PluginUtils {
-  theme(keypath: string, defaultValue?: any): any
+type ThemeFunction = (keypath: string, defaultValue?: any) => any
+export type PluginUtils = ThemeFunction & {
+  theme: ThemeFunction
   colors: typeof colors
 }
 
@@ -176,14 +177,15 @@ function extractConfigs(ctx: ResolutionContext, { config, base, path }: ConfigFi
 }
 
 function mergeTheme(ctx: ResolutionContext) {
-  let api: PluginUtils = {
-    theme: createThemeFn(ctx.design, () => ctx.theme, resolveValue),
+  let themeFn = createThemeFn(ctx.design, () => ctx.theme, resolveValue)
+  let theme = Object.assign(themeFn, {
+    theme: themeFn,
     colors,
-  }
+  })
 
   function resolveValue(value: ThemeValue | null | undefined): ResolvedThemeValue {
     if (typeof value === 'function') {
-      return value(api) ?? null
+      return value(theme) ?? null
     }
 
     return value ?? null