Support the color property in JS theme configuration callbacks (#14651

) While working on some fixes for #14639 I noticed that the following v3 configuration file would not load properly in v4: ```ts import { type Config } from 'tailwindcss' export default { content: ['./src/**/*.{js,jsx,ts,tsx}'], theme: { extend: { colors: ({ colors }) => ({ gray: colors.neutral, }), }, } satisfies Config ``` The reason for this is that we did not pass the `colors` property to the callback function. Since we have colors available now, we can easily add it. --------- Co-authored-by: Adam Wathan <[email protected]>
tailwindlabs · Oct 11, 2024 · c009c9c · c009c9c
1 parent e6d3fa0
commit c009c9c
Show file tree

Hide file tree

Showing 3 changed files with 23 additions and 0 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -11,6 +11,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))
 - _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
@@ -198,6 +198,10 @@ test('theme keys can read from the CSS theme', () => {
             // Reads from the --color-* namespace directly
             secondary: theme('color.green'),
           }),
+          caretColor: ({ colors }) => ({
+            // Gives access to the colors object directly
+            primary: colors.green,
+          }),
         },
       },
       base: '/root',
@@ -218,6 +222,21 @@ test('theme keys can read from the CSS theme', () => {
         primary: 'green',
         secondary: 'green',
       },
+      caretColor: {
+        primary: {
+          '50': '#f0fdf4',
+          '100': '#dcfce7',
+          '200': '#bbf7d0',
+          '300': '#86efac',
+          '400': '#4ade80',
+          '500': '#22c55e',
+          '600': '#16a34a',
+          '700': '#15803d',
+          '800': '#166534',
+          '900': '#14532d',
+          '950': '#052e16',
+        },
+      },
     },
   })
 })
diff --git a/packages/tailwindcss/src/compat/config/resolve-config.ts b/packages/tailwindcss/src/compat/config/resolve-config.ts
@@ -1,4 +1,5 @@
 import type { DesignSystem } from '../../design-system'
+import colors from '../colors'
 import type { PluginWithConfig } from '../plugin-api'
 import { createThemeFn } from '../plugin-functions'
 import { deepMerge, isPlainObject } from './deep-merge'
@@ -117,6 +118,7 @@ export function mergeThemeExtension(
 
 export interface PluginUtils {
   theme(keypath: string, defaultValue?: any): any
+  colors: typeof colors
 }
 
 function extractConfigs(ctx: ResolutionContext, { config, base, path }: ConfigFile): void {
@@ -176,6 +178,7 @@ function extractConfigs(ctx: ResolutionContext, { config, base, path }: ConfigFi
 function mergeTheme(ctx: ResolutionContext) {
   let api: PluginUtils = {
     theme: createThemeFn(ctx.design, () => ctx.theme, resolveValue),
+    colors,
   }
 
   function resolveValue(value: ThemeValue | null | undefined): ResolvedThemeValue {