fix(shadcn): only add tw-animate-css if no tailwindcss-animate (#6972)

* feat(shadcn): fix existing tailwindcss-animate

* docs: changelog

* tests(shadcn): update snapshots

apps/www/content/docs/tailwind-v4.mdx

@@ -294,6 +294,24 @@ function AccordionItem({
 
 ## Changelog
 
+### March 19, 2025 - Deprecate `tailwindcss-animate`
+
+We've deprecated `tailwindcss-animate` in favor of `tw-animate-css`.
+
+New project will have `tw-animate-css` installed by default.
+
+For existing projects, follow the steps below to migrate.
+
+1. Remove `tailwindcss-animate` from your dependencies.
+2. Remove the `@plugin 'tailwindcss-animate'` from your globals.css file.
+3. Install `tw-animate-css` as a dev dependency.
+4. Add the `@import "tw-animate-css"` to your globals.css file.
+
+```diff showLineNumbers
+- @plugin 'tailwindcss-animate';
++ @import "tw-animate-css";
+```
+
 ### March 12, 2025 - New Dark Mode Colors
 
 We've revisted the dark mode colors and updated them to be more accessible.

packages/shadcn/src/utils/updaters/update-css-vars.ts

@@ -5,6 +5,7 @@ import {
   registryItemTailwindSchema,
 } from "@/src/registry/schema"
 import { Config } from "@/src/utils/get-config"
+import { getPackageInfo } from "@/src/utils/get-package-info"
 import { TailwindVersion } from "@/src/utils/get-project-info"
 import { highlighter } from "@/src/utils/highlighter"
 import { spinner } from "@/src/utils/spinner"
@@ -83,10 +84,20 @@ export async function transformCssVars(
   }
 
   if (options.tailwindVersion === "v4") {
-    plugins = [
-      addCustomImport({ params: "tw-animate-css" }),
-      addCustomVariant({ params: "dark (&:is(.dark *))" }),
-    ]
+    plugins = []
+
+    // Only add tw-animate-css if project does not have tailwindcss-animate
+    if (config.resolvedPaths?.cwd) {
+      const packageInfo = getPackageInfo(config.resolvedPaths.cwd)
+      if (
+        !packageInfo?.dependencies?.["tailwindcss-animate"] &&
+        !packageInfo?.devDependencies?.["tailwindcss-animate"]
+      ) {
+        plugins.push(addCustomImport({ params: "tw-animate-css" }))
+      }
+    }
+
+    plugins.push(addCustomVariant({ params: "dark (&:is(.dark *))" }))
 
     if (options.cleanupDefaultNextStyles) {
       plugins.push(cleanupDefaultNextStylesPlugin())

packages/shadcn/test/utils/updaters/update-css-vars.test.ts

@@ -202,7 +202,6 @@ describe("transformCssVarsV4", () => {
       )
     ).toMatchInlineSnapshot(`
       "@import "tailwindcss";
-      @import "tw-animate-css";
 
       @custom-variant dark (&:is(.dark *));
 
@@ -261,7 +260,6 @@ describe("transformCssVarsV4", () => {
       )
     ).toMatchInlineSnapshot(`
       "@import "tailwindcss";
-      @import "tw-animate-css";
 
       @custom-variant dark (&:is(.dark *));
               :root {
@@ -326,7 +324,6 @@ describe("transformCssVarsV4", () => {
       )
     ).toMatchInlineSnapshot(`
       "@import "tailwindcss";
-      @import "tw-animate-css";
 
       @custom-variant dark (&:is(.dark *));
               :root {
@@ -392,7 +389,6 @@ describe("transformCssVarsV4", () => {
       )
     ).toMatchInlineSnapshot(`
       "@import "tailwindcss";
-      @import "tw-animate-css";
 
       @custom-variant dark (&:is(.dark *));
               :root {
@@ -468,7 +464,6 @@ describe("transformCssVarsV4", () => {
       )
     ).toMatchInlineSnapshot(`
       "@import "tailwindcss";
-      @import "tw-animate-css";
 
       @custom-variant dark (&:is(.dark *));
               :root {
@@ -530,7 +525,6 @@ describe("transformCssVarsV4", () => {
       )
     ).toMatchInlineSnapshot(`
       "@import "tailwindcss";
-      @import "tw-animate-css";
 
       @custom-variant dark (&:is(.dark *));
 
@@ -581,7 +575,6 @@ describe("transformCssVarsV4", () => {
       )
     ).toMatchInlineSnapshot(`
       "@import "tailwindcss";
-      @import "tw-animate-css";
 
       @custom-variant dark (&:is(.dark *));
 
@@ -632,7 +625,6 @@ describe("transformCssVarsV4", () => {
       )
     ).toMatchInlineSnapshot(`
       "@import "tailwindcss";
-      @import "tw-animate-css";
 
       @custom-variant dark (&:is(.dark *));
 
@@ -681,7 +673,6 @@ describe("transformCssVarsV4", () => {
       )
     ).toMatchInlineSnapshot(`
       "@import "tailwindcss";
-      @import "tw-animate-css";
 
       @custom-variant dark (&:is(.dark *));
 
@@ -737,7 +728,6 @@ describe("transformCssVarsV4", () => {
       )
     ).toMatchInlineSnapshot(`
       "@import "tailwindcss";
-      @import "tw-animate-css";
             @custom-variant dark (&:is(.dark *));
             :root {
               --radius: 0.125rem;
@@ -779,7 +769,6 @@ describe("transformCssVarsV4", () => {
       )
     ).toMatchInlineSnapshot(`
       "@import "tailwindcss";
-      @import "tw-animate-css";
 
       @custom-variant dark (&:is(.dark *));
 
@@ -823,7 +812,6 @@ describe("transformCssVarsV4", () => {
       "@import "tailwindcss";
 
       @plugin "tailwindcss-animate";
-      @import "tw-animate-css";
 
       @custom-variant dark (&:is(.dark *));
 
@@ -859,7 +847,6 @@ describe("transformCssVarsV4", () => {
       )
     ).toMatchInlineSnapshot(`
       "@import "tailwindcss";
-      @import "tw-animate-css";
 
       @custom-variant dark (&:is(.dark *));
               @plugin "tailwindcss-animate";
@@ -901,7 +888,6 @@ describe("transformCssVarsV4", () => {
       @plugin '@tailwindcss/typography';
 
       @plugin 'tailwindcss-animate';
-      @import "tw-animate-css";
 
       @custom-variant dark (&:is(.dark *));
 
@@ -946,7 +932,6 @@ describe("transformCssVarsV4", () => {
       )
     ).toMatchInlineSnapshot(`
       "@import "tailwindcss";
-      @import "tw-animate-css";
 
       @custom-variant dark (&:is(.dark *));
 
@@ -1023,7 +1008,6 @@ describe("transformCssVarsV4", () => {
       )
     ).toMatchInlineSnapshot(`
       "@import "tailwindcss";
-      @import "tw-animate-css";
 
       @custom-variant dark (&:is(.dark *));
 
@@ -1092,7 +1076,6 @@ describe("transformCssVarsV4", () => {
       )
     ).toMatchInlineSnapshot(`
       "@import "tailwindcss";
-      @import "tw-animate-css";
 
       @custom-variant dark (&:is(.dark *));
 
@@ -1167,7 +1150,6 @@ describe("transformCssVarsV4", () => {
       )
     ).toMatchInlineSnapshot(`
       "@import "tailwindcss";
-      @import "tw-animate-css";
 
       @custom-variant dark (&:is(.dark *));
               @theme inline {