New Metronic Docs!Added Integration Docs with Starter Kits Apps for Laravel, Laravel Livewire, Angular, Vue, Symfony, Blazor Server, Django & Flask & more
Browse Docs

Issue Migrating from tailwindcss-animate to tw-animate-css in Vite/Tailwind Project (Based on ReUI Changelog)


Hello Metronic Support Team,

I'm currently working on a Metronic project that uses Tailwind CSS and the ReUI system. According to your latest changelog on https://reui.io/docs/changelog, it states:

Migrated from tailwindcss-animate to tw-animate-css.

I followed the migration steps as expected:

1-Uninstalled the old package:
npm uninstall tailwindcss-animate
2-Installed the new package:
npm install tw-animate-css
3-Imported the CSS in my styles.css file:
@import 'tw-animate-css/dist/tw-animate.css';

However, when running the project with Vite, I get the following error:
[vite] Internal server error:
Package path ./dist/tw-animate.css is not exported from package
node_modules/tw-animate-css (see exports field in package.json)

I understand that this is related to how Vite and modern bundlers handle the "exports" field in package.json. Since tw-animate-css does not expose the CSS file via the exports field, Vite blocks direct imports from node_modules.

I’d like to know:
What is the official recommendation for using tw-animate-css with Vite?

Could you please provide guidance on how this migration should be done properly with Vite-based projects?

Thank you for your support.


Text formatting options
Submit
Here's a how to add some HTML formatting to your comment:
  • <pre></pre> for JS codes block
  • <pre lang="html"></pre> for HTML code block
  • <pre lang="scss"></pre> for SCSS code block
  • <pre lang="php"></pre> for PHP code block
  • <code></code> for single line of code
  • <strong></strong> to make things bold
  • <em></em> to emphasize
  • <ul><li></li></ul>  to make list
  • <ol><li></li></ol>  to make ordered list
  • <h3></h3> to make headings
  • <a></a> for links
  • <img> to paste in an image
  • <blockquote></blockquote> to quote somebody
  • happy  :)
  • shocked  :|
  • sad  :(

Replies (1)


Hi,

Please try to import it as shown below:


@import "tailwindcss";
@import "tw-animate-css";


Regards,
Sean


Text formatting options
Submit
Here's a how to add some HTML formatting to your comment:
  • <pre></pre> for JS codes block
  • <pre lang="html"></pre> for HTML code block
  • <pre lang="scss"></pre> for SCSS code block
  • <pre lang="php"></pre> for PHP code block
  • <code></code> for single line of code
  • <strong></strong> to make things bold
  • <em></em> to emphasize
  • <ul><li></li></ul>  to make list
  • <ol><li></li></ol>  to make ordered list
  • <h3></h3> to make headings
  • <a></a> for links
  • <img> to paste in an image
  • <blockquote></blockquote> to quote somebody
  • happy  :)
  • shocked  :|
  • sad  :(
Text formatting options
Submit
Here's a how to add some HTML formatting to your comment:
  • <pre></pre> for JS codes block
  • <pre lang="html"></pre> for HTML code block
  • <pre lang="scss"></pre> for SCSS code block
  • <pre lang="php"></pre> for PHP code block
  • <code></code> for single line of code
  • <strong></strong> to make things bold
  • <em></em> to emphasize
  • <ul><li></li></ul>  to make list
  • <ol><li></li></ol>  to make ordered list
  • <h3></h3> to make headings
  • <a></a> for links
  • <img> to paste in an image
  • <blockquote></blockquote> to quote somebody
  • happy  :)
  • shocked  :|
  • sad  :(