[bug]: Missing dependency `tw-animate-css` when initializing new Next.js project with `npx shadcn@latest init` using base color "zinc"

[aritradevelops]

Describe the bug

📝 Issue Description

When initializing a new Next.js project using the command:

npx shadcn@latest init

…and selecting "zinc" as the base color, the generated project includes an import statement for:

@import "tw-animate-css";

inside the globals.css file. However, the dependency tw-animate-css is not automatically installed, resulting in a build error.

This issue persists even when using the following flags:

• --legacy-peer-deps
• --force

---

🛠️ Expected Behavior

The tw-animate-css dependency should either:

• Be installed automatically during the init process
• Or not be referenced if not included intentionally

Affected component/components

none

How to reproduce

1. Run: npx shadcn@latest init
2. Choose "zinc" as the base color
3. Wait for the project to scaffold
4. Run npm run dev (or equivalent)
5. Observe the error regarding missing tw-animate-css

Codesandbox/StackBlitz link

No response

Logs

Error evaluating Node.js code

./app/globals.css

Error evaluating Node.js code
Error: Can't resolve 'tw-animate-css' in '/<basepath>/web/app'
    [at finishWithoutResolve (/<basepath>/web/node_modules/enhanced-resolve/lib/Resolver.js:564:18)]
    [at /<basepath>/web/node_modules/enhanced-resolve/lib/Resolver.js:656:15]
    [at /<basepath>/web/node_modules/enhanced-resolve/lib/Resolver.js:718:5]
    [at eval (/<basepath>/web/node_modules/tapable/lib/HookCodeFactory.js:33:10)]
    [at /<basepath>/web/node_modules/enhanced-resolve/lib/Resolver.js:718:5]
    [at eval (/<basepath>/web/node_modules/tapable/lib/HookCodeFactory.js:33:10)]
    [at /<basepath>/web/node_modules/enhanced-resolve/lib/DescriptionFilePlugin.js:89:43]
    [at /<basepath>/web/node_modules/enhanced-resolve/lib/Resolver.js:718:5]
    [at eval (/<basepath>/web/node_modules/tapable/lib/HookCodeFactory.js:33:10)]
    [at /<basepath>/web/node_modules/enhanced-resolve/lib/Resolver.js:718:5]

System Info

- Node.js version: v23.6.0
- npm version: 10.9.2
- OS: macOS 14.x (Sonoma) – Apple Silicon (arm64)

Before submitting

• [x] I've made research efforts and searched the documentation
• [x] I've searched for existing issues

[dylanngph]

Same

[guopenghui]

I tried to run npm i --save-dev tw-animate-css and restart vite, but got these weird result:

[jackh-sh]

I have this exact same issue. The workaround I've found is to remove @import "tw-animate-css"; from globals.css. Not ideal and I'm not sure if it breaks functionality.

[kyawzinwai]

I'm having the same issue here.

[FrostBitzX]

I tried npm install -D tw-animate-css and it worked.

[Evanl-lai]

I tried to run npm i --save-dev tw-animate-css and restart vite, but got these weird result:

Yes, I also ran "pnpm install -D w-animate-css", but the shadcn ui didn't work either

The style is garbled

[guopenghui]

Later, I discovered that the issue was caused by my host environment being Chrome 108, which does not support nested CSS. Then, I resolved the problem by reinstalling Tailwind 3 @Evanl-lai

[DrMoshtael]

I got this when creating a next.js app first with create-next-app then doing shadcn init. It doesn't matter which base colour you choose (it failed with stone and slate for me). It did work without creating the next.js first (except for a moment when tailwind disappeared but it came back...)

[shravanbhati]

I'm facing the same issue, its very first time that I got this issue since I'm working with multiple projects at same time. I just initialized the shadcn and used zinc as base color and got this issue. btw I'm using Next.js 16 and someone in this thread suggested to download tw-animate-css globally but it did not worked for me.

npm install -D tw-animate-css

Hope this issue resolves soon

EDIT its working now idk what did I done but after downloading tw-animate-css manually I restarted the dev server, And it start working normally, but for some reason next boilerplate is showing light theme instead of dark not sure why is that.