Shadcn template css should use tw-animate-css instead of tailwindcss-animate

[regunakyle]

Which project does this relate to?

Create Tanstack App

Describe the bug

Upstream shadcn has deprecated the use of @plugin "tailwindcss-animate":
https://ui.shadcn.com/docs/tailwind-v4 (scroll to the changelog section)

Need to use @import 'tw-animate-css' instead, otherwise things won't work (e.g. accordion animation does not work)

Your Example Website or App

None

Steps to Reproduce the Bug or Issue

1. Create a project with Tailwind and Shadcn
2. Run npx shadcn@latest add accordion
3. Use accordion in one of the route, e.g. this example from upstream docs:

import {
  Accordion,
  AccordionContent,
  AccordionItem,
  AccordionTrigger,
} from "@/components/ui/accordion"

export function AccordionDemo() {
  return (
    <Accordion
      type="single"
      collapsible
      className="w-full"
      defaultValue="item-1"
    >
      <AccordionItem value="item-1">
        <AccordionTrigger>Product Information</AccordionTrigger>
        <AccordionContent className="flex flex-col gap-4 text-balance">
          <p>
            Our flagship product combines cutting-edge technology with sleek
            design. Built with premium materials, it offers unparalleled
            performance and reliability.
          </p>
          <p>
            Key features include advanced processing capabilities, and an
            intuitive user interface designed for both beginners and experts.
          </p>
        </AccordionContent>
      </AccordionItem>
      <AccordionItem value="item-2">
        <AccordionTrigger>Shipping Details</AccordionTrigger>
        <AccordionContent className="flex flex-col gap-4 text-balance">
          <p>
            We offer worldwide shipping through trusted courier partners.
            Standard delivery takes 3-5 business days, while express shipping
            ensures delivery within 1-2 business days.
          </p>
          <p>
            All orders are carefully packaged and fully insured. Track your
            shipment in real-time through our dedicated tracking portal.
          </p>
        </AccordionContent>
      </AccordionItem>
      <AccordionItem value="item-3">
        <AccordionTrigger>Return Policy</AccordionTrigger>
        <AccordionContent className="flex flex-col gap-4 text-balance">
          <p>
            We stand behind our products with a comprehensive 30-day return
            policy. If you&apos;re not completely satisfied, simply return the
            item in its original condition.
          </p>
          <p>
            Our hassle-free return process includes free return shipping and
            full refunds processed within 48 hours of receiving the returned
            item.
          </p>
        </AccordionContent>
      </AccordionItem>
    </Accordion>
  )
}

4. Check the accordion collapse/expand animation (it does not work)

Expected behavior

The accordion collapse/expand animation works properly

Screenshots or Videos

No response

Platform

• OS: Linux
• Browser: Chrome
• Version: Latest (The current shadcn styles.css file in this repo contains the error)

Additional context

No response

[regunakyle]

Upstream fix (directly copied):

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.