How to change the duration of the animation of the AccordionContent using only TailwindCSS?

[alamenai]

I have an accordion component:

<Accordion type='single' collapsible>
                <AccordionItem value='item-1' className='border-none bg-slate-100 px-4 rounded-xl text-[15px]'>
                  <AccordionTrigger className='border-none'>Erfahren Sie mehr</AccordionTrigger>
                  <AccordionContent className='leading-7'>
                    {ELECTRICITY_DEMAND_DESCRIPTION.moreContent}
                  </AccordionContent>
                </AccordionItem>
              </Accordion>

I wanted to change the duration of the slide down and slide up using only TailwindCSS but I could not figure out the solution.

I tried to change these values (accordion-up and accordiona-down) but there was no impact:

 keyframes: {
      scroll: {
        to: {
          transform: "translate(calc(-50% - 0.5rem))",
        },
      },
      "accordion-down": {
        from: { height: 0 },
        to: { height: "var(--radix-accordion-content-height)" },
      },
      "accordion-up": {
        from: { height: "var(--radix-accordion-content-height)" },
        to: { height: 0 },
      },
    },
    animation: {
      scroll: "scroll var(--animation-duration, 40s) var(--animation-direction, forwards) linear infinite",
      "accordion-down": "accordion-down 5000ms ease-out",
      "accordion-up": "accordion-up 5000ms ease-out",
    },

[flixlix]

Try setting duration-1000 to the AccordionContent

[AurelianSpodarec]

Didn't work.

[flixlix]

this worked for me

[flixlix]

or like this

[gianpaj]

You have to update the animation classes in the tailwind.config.cjs (for example)

/** @type {import('tailwindcss').Config} */
module.exports = {
    // ...
    extend: {
      keyframes: {
        'accordion-down': {
          from: {
            height: '0',
          },
          to: {
            height: 'var(--radix-accordion-content-height)',
          },
        },
        'accordion-up': {
          from: {
            height: 'var(--radix-accordion-content-height)',
          },
          to: {
            height: '0',
          },
        },
      },
      animation: {
        'accordion-down': 'accordion-down 0.3s ease-out',  // <--- here
        'accordion-up': 'accordion-up 0.3s ease-out',      // <--- here
      },