[Bug]: Accordion collapse animation does not work (in Nuxt)

[kennyhei]

Reproduction

Couldn't get codesandbox working

Describe the bug

Couldn't get codesandbox or stackblitz env working as I had problems with both when trying to setup nuxt + shadcn-vue + accordion component. Worked fine with e.g. button component though but got mysterious errors with accordion.

Here's my nuxt.config.ts:

import tailwindcss from "@tailwindcss/vite";

// https://nuxt.com/docs/api/configuration/nuxt-config
export default defineNuxtConfig({
  css: ["~/assets/css/tailwind.css"],
  vite: {
    plugins: [tailwindcss()],
  },
  compatibilityDate: "2024-11-01",
  devtools: { enabled: false },
  modules: ["@nuxt/eslint", "shadcn-nuxt"],
  shadcn: {
    /**
     * Prefix for all the imported component
     */
    prefix: "",
    /**
     * Directory that the component lives in.
     * @default "./components/ui"
     */
    componentDir: "./components/ui",
  },
  components: [{ path: "~/components", pathPrefix: false }],
});

I have also added @import "tw-animate-css"; in tailwind.css (and installed said package). Btw, instructions for installing tw-animate-css are missing from https://www.shadcn-vue.com/docs/installation/nuxt.html but are found in https://www.shadcn-vue.com/docs/installation/manual.html. Installing shadcn-nuxt did not automatically include it.

Anyway, animation does not work when collapsing / opening accordion item. It seems that --radix-accordion-content-height and --bits-accordion-content-height are not computed properly as they both are undefined when I inspected accordion item's CSS using Chrome DevTools.

System Info

System:
    OS: macOS 15.3.2
    CPU: (12) arm64 Apple M3 Pro
    Memory: 996.86 MB / 36.00 GB
    Shell: 5.9 - /bin/zsh
  Binaries:
    Node: 20.18.1 - ~/.nvm/versions/node/v20.18.1/bin/node
    Yarn: 1.22.22 - ~/.nvm/versions/node/v20.18.1/bin/yarn
    npm: 10.8.2 - ~/.nvm/versions/node/v20.18.1/bin/npm
  Browsers:
    Chrome: 135.0.7049.42
    Edge: 135.0.3179.54
    Safari: 18.3.1
  npmPackages:
    @vueuse/core: ^13.1.0 => 13.1.0 
    nuxt: ^3.16.2 => 3.16.2 
    shadcn-nuxt: ^2.0.0 => 2.0.0 
    vue: ^3.5.13 => 3.5.13

Contributes

• I am willing to submit a PR to fix this issue
• I am willing to submit a PR with failing tests

[Nordeast]

First thing I would check is if you can use any of the classes from Tailwind Animate this will ensure you have the dependency added and installed correctly as a tailwind plugin.

I think though that the underlying animation library needs to be updated per this issue on that repo jamiebuilds/tailwindcss-animate#63 (comment)

Edit: I guess there is an updated version it is referencing here tw-animate-css I would just make sure that you can use the classes yourself first to ensure that the package is installed correctly.

[peoray]

@kennyhei did you find a solution to this?

[kennyhei]

Yep, I have tw-animate-css installed:

  "dependencies": {
    "@nuxt/eslint": "^1.3.0",
    "@nuxtjs/i18n": "^9.5.3",
    "@tailwindcss/vite": "^4.1.3",
    "@vueuse/core": "^13.1.0",
    "class-variance-authority": "^0.7.1",
    "clsx": "^2.1.1",
    "eslint": "^9.24.0",
    "lucide-vue-next": "^0.487.0",
    "nuxt": "^3.16.2",
    "reka-ui": "^2.2.0",
    "tailwind-merge": "^3.2.0",
    "tailwindcss": "^4.1.3",
    "vue": "^3.5.13",
    "vue-router": "^4.5.0"
  },
  "devDependencies": {
    "prettier": "^3.5.3",
    "shadcn-nuxt": "^2.0.0",
    "tw-animate-css": "^1.2.5",
    "typescript": "^5.8.3"
  }

The basic examples mentioned here https://github.com/jamiebuilds/tailwindcss-animate/blob/main/README.md work. Also I have sheet component installed and the slide animation in it also works without problems.

[kennyhei]

I managed to find workaround by looking at reka-ui's documentation: https://reka-ui.com/docs/components/accordion#animating-content-size

I copied this CSS from there to my tailwind.css:

/* styles.css */
.AccordionContent {
  overflow: hidden;
}
.AccordionContent[data-state="open"] {
  animation: slideDown 300ms ease-out;
}
.AccordionContent[data-state="closed"] {
  animation: slideUp 300ms ease-out;
}

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

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

And then added AccordionContent class to AccordionContent component in components/ui/accordion/AccordionContent.vue. After that animation works!

EDIT: If you want to simplify this even further without the need of touching AccordionContent.vue, you can define your tailwind.css like this:

@theme inline {
  ...
  --animate-accordion-down: slideDown 0.3s ease-out;
  --animate-accordion-up: slideUp 0.3s ease-out;
}

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

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

And it should work.

[Abdo-reda]

Yes, I also faced this issue a week ago. Just adding more context. It seems that animations in tailwind V4 are using tw-animate-css, which is using the -radix-accordion-content-height to animate the accordion.

Not sure what is the best approach to do this, just wanted to point it out. Right now, I had to download the tw-animate-css file and modify it and include it manually.

Here is the file for reference file.