diff --git a/CHANGELOG.md b/CHANGELOG.md index 5af6d0fdd..b049c4cf7 100644 --- a/CHANGELOG.md +++ b/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)) diff --git a/packages/tailwindcss/src/compat/config/resolve-config.test.ts b/packages/tailwindcss/src/compat/config/resolve-config.test.ts index d755cf8e1..ebe455059 100644 --- a/packages/tailwindcss/src/compat/config/resolve-config.test.ts +++ b/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', + }, }, }) }) diff --git a/packages/tailwindcss/src/compat/config/resolve-config.ts b/packages/tailwindcss/src/compat/config/resolve-config.ts index fbbf807ab..b0d78de2e 100644 --- a/packages/tailwindcss/src/compat/config/resolve-config.ts +++ b/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