feat: add compatibility with tailwindcss v4

[zbigniewstefaniuk]

Hi there, huuge fan of tailwindcss-animate here

I've updated peer dependencies to play nicley with tailwind v4

@jamiebuilds

[kimonneuhoff]

@jamiebuilds can you please merge this pr? :)

[ktisakib]

please merge the pr we want to use v4 with this

[M-51]

In the meantime, you can override tailwindcss-animate peer dependency, by adding this:

 "overrides": {
    "tailwindcss-animate": {
      "tailwindcss": "$tailwindcss"
    }
  },

to your package.json.

tailwindcss-animate will use tailwindcss version specified in your package.json file.

[matthewgapp]

For those looking for a plug-n-play solution: I published a fork as a short-term workaround where I'm folding in some of the outstanding PRs, since this repo hasn't had activity in 2 years. https://github.com/nobie-org/tailwindcss-animate.

npm: https://www.npmjs.com/package/@nobie-org/tailwindcss-animate

[Wombosvideo]

I've translated this plugin to the new CSS-first format and uploaded the code to https://github.com/Wombosvideo/tailwindcss-animate-v4. Maybe this helps someone

EDIT: Renamed it and wrapped it in an NPM package for easy updating.

[adielhercules]

I was having the same issue and found a workaround, I found this is working properly:

In your app.css, you can add the plugin like this:

@import "tailwindcss";
@plugin "tailwindcss-animate";
/* ... rest of theme and styles */

This is described in their documentation:

Use the @plugin directive to load a legacy JavaScript-based plugin

Link: https://tailwindcss.com/docs/functions-and-directives#plugin-directive

[Wombosvideo]

@adielhercules Sure but you will still get some glitches

[markosmk]

I've translated this plugin to the new CSS-first format and uploaded the code to https://github.com/Wombosvideo/tailwindcss-animate-v4. Maybe this helps someone

This is the best response, and better adapted to the V4 of Tailwindcss, thanks

[altanbgn]

still not merged? It this project abandoned?

[WilsonNet]

@adielhercules Sure but you will still get some glitches

thank you so much, it worked, it is much prettier as a css file

[CarlosVergikosk]

@adielhercules thank you for merging this, im facing an issue where the vscode intellisense doesnt suggest me the animated classes. Any idea on how i can fix it? Thanks <3

[Wombosvideo]

im facing an issue where the vscode intellisense doesnt suggest me the animated classes.

Are you using a JavaScript or a CSS version of the plugin? If you are using a CSS version, v1.1 of tailwindcss-animate-v4 adds some IntelliSense suggestions. If you think some are still missing, feel free to create an issue or open a PR.

If you are using a JavaScript version, try checking the IntelliSense extension's log. My suggestions weren't working properly due to a missing config file.

[nikitadmitr]

I was having the same issue and found a workaround, I found this is working properly:

In your app.css, you can add the plugin like this:

@import "tailwindcss";
@plugin "tailwindcss-animate";
/* ... rest of theme and styles */

This is described in their documentation:

Use the @plugin directive to load a legacy JavaScript-based plugin

Link: https://tailwindcss.com/docs/functions-and-directives#plugin-directive

man, bless you

[GauthierPLM]

There was no commit for 2 years now. It's fair to consider the author is not maintaining this repo anymore.

[sina-ss]

I don't think this pr accept soon...

[Wombosvideo]

@markosmk @WilsonNet

I've updated tailwindcss-animate-v4, renamed it to tw-animate-css and wrapped in an NPM package for easy updating. Let me know if you run into any problems

https://github.com/wombosvideo/tw-animate-css

npm install tw-animate-css

@import "tw-animate-css"

[trenaryja]

#63 (comment)

@markosmk @WilsonNet

I've updated tailwindcss-animate-v4, renamed it to tw-animate-css and wrapped in an NPM package for easy updating. Let me know if you run into any problems

https://github.com/wombosvideo/tw-animate-css

npm install tw-animate-css

@import "tw-animate-css"

@Wombosvideo thank you for making this. Tested and working with tailwind v4.0.14 in a nextjs app. It's a single clean file as well, which makes it easy to just copy and place in into my own project. I hope more folks follow that approach, but I also hope @shadcn updates to point to tw-animate-css instead of tailwindcss-animate going forward for tailwind v4!

Thanks again, works like a charm!

[nrjdalal]

@Wombosvideo I've updated tailwindcss-animate-v4, renamed it to tw-animate-css.

tailwindcss's naming convention for plugins is like @tailwindcss/something

considering that isn't better name tailwindcss-animations, tailwindcss-animate-css, or just tailwind-animate

tw is considered for prefixing and merging libraries, tw isn't considered as an easy search either

[Wombosvideo]

tailwindcss's naming convention for plugins is like @tailwindcss/something

This may be true for their plugins due to being authored by tailwindcss. Generally the @ prefix for an NPM package indicates a specific ownership, or more specifically, a scope. Check the NPM docs on this. Also, I am sure the Tailwind team themselves will migrate their legacy JavaScript plugins to CSS files eventually (or integrate their functionality in Tailwind itself) as they are only in the v3 docs but not in the v4 docs.

considering that isn't better name tailwindcss-animations, tailwindcss-animate-css, or just tailwind-animate

While these names are good suggestions, those packages already exist or are too similar to packages which already exist. NPM actively prevents you from naming packages like this, see this comment.

tw is considered for prefixing and merging libraries

tw are two letters many people use to abbreviate the name Tailwind. They are in no way reserved for specific purposes.

tw isn't considered as an easy search either

Yes, I totally agree and I sadly also noticed this. I try to work around this by using tailwind in the keywords and README.

[nrjdalal]

tailwindcss's naming convention for plugins is like @tailwindcss/something

This may be true for their plugins due to being authored by tailwindcss. Generally the @ prefix for an NPM package indicates a specific ownership, or more specifically, a scope. Check the NPM docs on this. Also, I am sure the Tailwind team themselves will migrate their legacy JavaScript plugins to CSS files eventually (or integrate their functionality in Tailwind itself) as they are only in the v3 docs but not in the v4 docs.

considering that isn't better name tailwindcss-animations, tailwindcss-animate-css, or just tailwind-animate

While these names are good suggestions, those packages already exist or are too similar to packages which already exist. NPM actively prevents you from naming packages like this, see this comment.

tw is considered for prefixing and merging libraries

tw are two letters many people use to abbreviate the name Tailwind. They are in no way reserved for specific purposes.

tw isn't considered as an easy search either

Yes, I totally agree and I sadly also noticed this. I try to work around this by using tailwind in the keywords and README.

was not talking about @ prefix, I know @tailwindcss is taken by team tailwindcss, that aside, congratulation amigo, it made it in shadcn

what do you think bout adding, accordion animations directly to tw-animate-css, so shadcn config can be all about colors

  --animate-accordion-down: accordion-down 0.2s ease-out;
  --animate-accordion-up: accordion-up 0.2s ease-out;

  @keyframes accordion-down {
    from {
      height: 0;
    }
    to {
      height: var(--radix-accordion-content-height);
    }
  }

  @keyframes accordion-up {
    from {
      height: var(--radix-accordion-content-height);
    }
    to {
      height: 0;
    }
  }

[Wombosvideo]

that aside, congratulation amigo, it made it in shadcn

Thank you very much!

what do you think bout adding, accordion animations directly to tw-animate-css, so shadcn config can be all about colors

While this is a great idea, I wrote this CSS file with shadcn-svelte in mind, which uses different variable names (bits instead of radix) for the heights. Sure, I could just add multiple CSS variables and let the browser handle falling back to the next variable name if one does not exist. My prefered approach to this, however, would be to name it more generally (collapse-open and collapse-close) or something like that. Let's further discuss this in a new feature request or discussion so we can include the community in the decision-making.

[nrjdalal]

that aside, congratulation amigo, it made it in shadcn

Thank you very much!

what do you think bout adding, accordion animations directly to tw-animate-css, so shadcn config can be all about colors

While this is a great idea, I wrote this CSS file with shadcn-svelte in mind, which uses different variable names (bits instead of radix) for the heights. Sure, I could just add multiple CSS variables and let the browser handle falling back to the next variable name if one does not exist. My prefered approach to this, however, would be to name it more generally (collapse-open and collapse-close) or something like that. Let's further discuss this in a new feature request or discussion so we can include the community in the decision-making.

created an pull request just in case before getting your reply, will take it forward from there

Wombosvideo/tw-animate-css#12

[nrjdalal]

@Wombosvideo added accordion with support for both bits and radix in the PR

Wombosvideo/tw-animate-css#12

[nrjdalal]

that aside, congratulation amigo, it made it in shadcn

Thank you very much!

what do you think bout adding, accordion animations directly to tw-animate-css, so shadcn config can be all about colors

While this is a great idea, I wrote this CSS file with shadcn-svelte in mind, which uses different variable names (bits instead of radix) for the heights. Sure, I could just add multiple CSS variables and let the browser handle falling back to the next variable name if one does not exist. My prefered approach to this, however, would be to name it more generally (collapse-open and collapse-close) or something like that. Let's further discuss this in a new feature request or discussion so we can include the community in the decision-making.

also changing the naming convention to collapse-open and collapse-close would mean changing the shadcn accordion component in the registry, and would have impact on legacy migration where people won't update the components themselves

plus if you had to do that manually previously, to add support for bits, it's your decision as author to create better future and support for upcoming devs and create an impact

it is highly unlikely that we would have major voting participation in fast moving sense, be the change you seek in the world 😄

[Wombosvideo]

reduces 20 lines of code

No, it just moves them to your package