Search code examples
cssbootstrap-4tailwind-css

Accordion closing imediately after opening with tailwind css

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:

enter image description here

I expect to see this:

enter image description here

I have determined that unselecting the following css features via browser inspector gives me what I want:

enter image description here

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?

Solution

  • 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:

    1. In tailwind.config.js add this property:
    
    corePlugins: {
      visibility: false
    },
    1. In src/css/style.css add this:
    
@layer utilities {
  .visible {
    visibility: visible;
  }
  .invisible {
    visibility: hidden;
  }
}