Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Trying to upgrade a plugin to v4 #15315

Closed
KevinGrajeda opened this issue Dec 5, 2024 · 2 comments · Fixed by #15318
Closed

Trying to upgrade a plugin to v4 #15315

KevinGrajeda opened this issue Dec 5, 2024 · 2 comments · Fixed by #15318

Comments

@KevinGrajeda
Copy link

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?
@philipp-spiess philipp-spiess mentioned this issue Dec 6, 2024
Merged
philipp-spiess added a commit that referenced this issue Dec 9, 2024
@philipp-spiess
Expose flattenColorPalette (#15318)
a7ebc9c 
Resolves #15315 

It looks like we implemented this in Core but forgot to expose it from
the distributed package (the references are only used for testing
plugins internally right now). This exposes `flattenColorPalette` under
the old import path of `tailwindcss/lib/util/flattenColorPalette`.

## Test Plan

Added the following plugin to the Vite example and ensured it works as
expected:

```ts
import flattenColorPalette from 'tailwindcss/lib/util/flattenColorPalette'
import plugin from 'tailwindcss/plugin'

export default plugin(({ matchUtilities, theme }) => {
  matchUtilities(
    {
      'hover-bg': (value) => {
        return {
          '&:hover': {
            backgroundColor: value,
          },
        }
      },
    },
    { values: flattenColorPalette(theme('colors')) },
  )
})
```

<img width="462" alt="Screenshot 2024-12-06 at 11 47 44"
src="https://github.com/user-attachments/assets/11163390-053e-4c6e-8cb9-ae67184ad594">
@philipp-spiess
Copy link
Member

Hey! We're going to add back that API in the next beta version (hopefully out later this week).

@KevinGrajeda
Copy link
Author

thank you 🙌🙌

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

Successfully merging a pull request may close this issue.

Expose flattenColorPalette tailwindlabs/tailwindcss
2 participants
@philipp-spiess @KevinGrajeda