Repository: tailwindlabs/tailwindcss

Problem statement:
Trying to upgrade a plugin to v4
<!-- Please provide all of the information requested below. We're a small team and without all of this information it's not possible for us to help and your bug report will be closed. -->

**What version of Tailwind CSS are you using?**

v4

**What build tool (or framework if it abstracts the build tool) are you using?**

"vite": "^6.0.1"

**What version of Node.js are you using?**

v20.18.0

**What browser are you using?**

N/A

**What operating system are you using?**

macOS

**Reproduction URL**

new vite project with tailwind and tailwindcss-motion
https://github.com/KevinGrajeda/plugin-v4

**Describe your issue**

I'm the developer of https://github.com/romboHQ/tailwindcss-motion and I'm trying to check the compatibility of the plugin with Tailwind v4 and when I run the project it throws me this error:


```
[plugin:@tailwindcss/vite:generate:serve] Package subpath './lib/util/flattenColorPalette' is not defined by "exports" in 
/Users/yokev/dev/rombo/example/upgrade-to-v4/node_modules/.pnpm/tailwindcss-motion@0.4.3-beta_tailwindcss@4.0.0-
beta.5/node_modules/tailwindcss/package.json
```

I'm using flattenColorPalette to add animations with the theme colors

https://github.com/romboHQ/tailwindcss-motion/blob/09ceaeca9654598bca430872f1c967eb066ca4a5/src/baseAnimations.js#L472-L473 

Is there a new approach for doing this? What can I do?


Hints:

Patch:
diff --git a/packages/tailwindcss/src/compat/flatten-color-palette.ts b/packages/tailwindcss/src/compat/flatten-color-palette.ts
--- a/packages/tailwindcss/src/compat/flatten-color-palette.ts
+++ b/packages/tailwindcss/src/compat/flatten-color-palette.ts
@@ -4,7 +4,7 @@ type Colors = {
   [key: string | number]: string | Colors
 }
 
-export function flattenColorPalette(colors: Colors) {
+export default function flattenColorPalette(colors: Colors) {
   let result: Record<string, string> = {}
 
   for (let [root, children] of Object.entries(colors ?? {})) {
diff --git a/packages/tailwindcss/tsup.config.ts b/packages/tailwindcss/tsup.config.ts
--- a/packages/tailwindcss/tsup.config.ts
+++ b/packages/tailwindcss/tsup.config.ts
@@ -10,6 +10,7 @@ export default defineConfig([
       plugin: 'src/plugin.ts',
       colors: 'src/compat/colors.ts',
       'default-theme': 'src/compat/default-theme.ts',
+      'flatten-color-palette': 'src/compat/flatten-color-palette.ts',
     },
   },
   {
@@ -21,6 +22,7 @@ export default defineConfig([
       lib: 'src/index.cts',
       colors: 'src/compat/colors.cts',
       'default-theme': 'src/compat/default-theme.cts',
+      'flatten-color-palette': 'src/compat/flatten-color-palette.cts',
     },
   },
 ])


Test patch:
diff --git a/packages/tailwindcss/src/compat/config.test.ts b/packages/tailwindcss/src/compat/config.test.ts
--- a/packages/tailwindcss/src/compat/config.test.ts
+++ b/packages/tailwindcss/src/compat/config.test.ts
@@ -1,7 +1,7 @@
 import { describe, expect, test, vi } from 'vitest'
 import { compile, type Config } from '..'
 import { default as plugin } from '../plugin'
-import { flattenColorPalette } from './flatten-color-palette'
+import flattenColorPalette from './flatten-color-palette'
 
 const css = String.raw
 
diff --git a/packages/tailwindcss/src/compat/flatten-color-palette.test.ts b/packages/tailwindcss/src/compat/flatten-color-palette.test.ts
--- a/packages/tailwindcss/src/compat/flatten-color-palette.test.ts
+++ b/packages/tailwindcss/src/compat/flatten-color-palette.test.ts
@@ -1,5 +1,5 @@
 import { expect, test } from 'vitest'
-import { flattenColorPalette } from './flatten-color-palette'
+import flattenColorPalette from './flatten-color-palette'
 
 test('it should handle private __CSS_VALUES__ to resolve to the right value', () => {
   expect(