Accordion closing imediately after opening with tailwind css - css

Question

I have the following accordion item:
<div class="accordion-item mb-5 overflow-hidden rounded-lg border border-jacarta-100 dark:border-jacarta-600">
<h2 class="accordion-header" id="faq-heading-1">
<button class="accordion-button relative flex w-full items-center justify-between bg-white px-4 py-3 text-left font-display text-jacarta-700 dark:bg-jacarta-700 dark:text-white" type="button" data-bs-toggle="collapse" data-bs-target="#faq-1" aria-expanded="false" aria-controls="faq-1">
<span>What is tax and legal advisory?</span>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24" class="accordion-arrow h-4 w-4 shrink-0 fill-jacarta-700 transition-transform dark:fill-white">
<path fill="none" d="M0 0h24v24H0z"></path>
<path d="M12 13.172l4.95-4.95 1.414 1.414L12 16 5.636 9.636 7.05 8.222z"></path>
</svg>
</button>
</h2>
<div id="faq-1" class="accordion-collapse" aria-labelledby="faq-heading-1" data-bs-parent="#accordionFAQ">
<div class="accordion-body border-t border-jacarta-100 bg-white p-4 dark:border-jacarta-600 dark:bg-jacarta-700">
<p class="dark:text-jacarta-200">Learn how to create your very first NFT and how to create your NFT collections. Unique.
</p>
</div>
</div>
</div>
This item closes immediately after opening:
I expect to see this:
I have determined that unselecting the following css features via browser inspector gives me what I want:
For some reason the collapse class is added twice when I toggle the accordion. Why is the css created in a style sheet and both inline? I only have one file and it is separate. How can I fix this accordion button?

Answer 1

The problem arises because tailwind adds the collapse property which should be empty. Reference is below:
https://github.com/tailwindlabs/tailwindcss/issues/9663
For short term solution do the following:
In tailwind.config.js add this property:
corePlugins: {
visibility: false
},
In src/css/style.css add this:
#layer utilities {
.visible {
visibility: visible;
}
.invisible {
visibility: hidden;
}
}