AccordionItem close/open icon not rotating

[100tomtomas100]

Hey

I am using Next.js 14.2.5 and I have copied the same code from an example in the documentation.

"use client"
import React from 'react'
import { Accordion, AccordionItem } from "@nextui-org/accordion";
const page = () => {
   const defaultContent =
     "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.";

  return (
    <>
      <Accordion>
        <AccordionItem key="1" aria-label="Accordion 1" title="Accordion 1">
          {defaultContent}
        </AccordionItem>
        <AccordionItem key="2" aria-label="Accordion 2" title="Accordion 2">
          {defaultContent}
        </AccordionItem>
        <AccordionItem key="3" aria-label="Accordion 3" title="Accordion 3">
          {defaultContent}
        </AccordionItem>
      </Accordion>
    </>
  );
}

export default page

However when i open and close the AccordionItem the icon is not rotating.
Any ideas how to fix this ?

Thank you !

[wingkwong]

I'm not able to reproduce the issue. Can you provide a minimal reproducible environment like stackblitz?

[100tomtomas100]

Hey

I can not reproduce it as well as in another application it is working as expected and in current application I have accordion in several places and in all the places the icon is not turning. It must be the way the application is set but I have no idea what could cause this.
:(

[jeremylee34]

+1 on this

[100tomtomas100]

So the problem was for me that I have not added the components in the tailwind.config.js

[jeremylee34]

How did you do that?

[wingkwong]

@jeremylee34 see https://www.heroui.com/docs/guide/installation#tailwind-css-setup-1. Probably you missed adding accordion there as well.