sasstailwind-csstailwind-css-4flyonui

Flyonui (Tailwindcss) collapse-open:rotate-180 not work

I have a problem with the Collapse component in FlyonUI. I'm using the following code:

<button type="button" class="collapse-toggle btn btn-primary" id="shadow-collapse" aria-expanded="false" aria-controls="shadow-collapse-heading" data-collapse="#shadow-collapse-heading" >
    Collapse
    <span class="icon-[tabler--chevron-down] collapse-open:rotate-180 size-4"></span>
</button>

<div id="shadow-collapse-heading" class="collapse hidden w-full overflow-hidden transition-[height] duration-300" aria-labelledby="shadow-collapse" >
    <div class="bg-primary/20 mt-3 rounded-md p-3">
        <p class="text-primary">
            The collapsible body remains concealed by default until the collapse plugin dynamically adds specific classes.
            These classes are instrumental in styling each element, dictating the overall appearance, and managing visibility
            through CSS transitions.
        </p>
    </div>
</div>

However, when I press the button, the animation for the icon doesn't work. I'm using Laravel 11, Tailwind v4, FlyonUI v2, and SASS.

Solution

  • Problem: SASS using with TailwindCSS v4 not supported

    TailwindCSS v4 does not support Sass, Less and Stylus preprocessors:

    Alternative #1 - Use TailwindCSS v3 with FlyonUI v1 and SASS

    If you want to get past the issue with minimal effort, you can use SASS with TailwindCSS v3, which also allows you to use FlyonUI v1.

    npm install tailwindcss@3 postcss autoprefixer
npm install -D flyonui@1

    Alternative #2 - Use TailwindCSS v4 with FlyonUI v2 without SASS

    If you can continue your project without SASS, it might be worth considering removing it. TailwindCSS, with the help of LightningCSS, aims to be a standalone replacement for Sass, Less, or Stylus preprocessors.

    Your code snippet working successfully without SASS:

    /* SOURCE: https://icon-sets.iconify.design/tabler/?icon-filter=chevron-down&keyword=tabler */
/* @iconify/tailwind4 does not added for this example */
/* added chevron-down manually here */
.icon-\[tabler--chevron-down\] {
  display: inline-block;
  width: 24px;
  height: 24px;
  --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%23000' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m6 9l6 6l6-6'/%3E%3C/svg%3E");
  background-color: currentColor;
  -webkit-mask-image: var(--svg);
  mask-image: var(--svg);
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
}
    <script src="https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4"></script>
<script src="https://cdn.jsdelivr.net/npm/flyonui@2.0.0/dist/collapse.js"></script>
<link href="https://cdn.jsdelivr.net/npm/flyonui@2.0.0/flyonui.min.css" rel="stylesheet">

<button type="button" class="collapse-toggle btn btn-primary" id="basic-collapse" aria-expanded="false" aria-controls="basic-collapse-heading" data-collapse="#basic-collapse-heading">
  Collapse
  
  <span class="icon-[tabler--chevron-down] collapse-open:rotate-180 size-4"></span>
</button>

<div id="basic-collapse-heading" class="collapse hidden w-full overflow-hidden transition-[height] duration-300" aria-labelledby="basic-collapse">
  <div class="border-base-content/25 mt-3 rounded-md border p-3">
    <p class="text-base-content/80">
      The collapsible body remains concealed by default until the collapse plugin dynamically adds specific classes. These classes are instrumental in styling each element, dictating the overall appearance, and managing visibility through CSS transitions.
    </p>
  </div>
</div>