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.

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.

• sass
• tailwind-css
• tailwind-css-4
• flyonui

• How did you install it? – rozsazoltan Commented Mar 31 at 11:03
• Sass? TailwindCSS v4 does not support Sass, Less and Stylus preprocessors: Deprecated: Sass, Less and Stylus preprocessors support – rozsazoltan Commented Mar 31 at 11:04

1 Answer 1

Problem: SASS using with TailwindCSS v4 not supported

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

• Deprecated: Sass, Less and Stylus preprocessors support
• Compatibility - TailwindCSS v4 Docs
• tailwindlabs/tailwindcss #15716 by Robin Malfait:
  Migration tool doesn't recognize .scss files - GitHub
• tailwindlabs/tailwindcss #16793 by Philipp Spiess:
  TailwindCSS v4 why ignores .scss files - GitHub

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

• How to install TailwindCSS v3 with Laravel - TailwindCSS v3 Docs
• How to install FlyonUI v1 with TailwindCSS v3 - FlyonUI v1 Docs

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.

• How to install TailwindCSS v4 with Laravel without SASS - TailwindCSS v4 Docs
• How to install FlyonUI v2 with TailwindCSS v4 - FlyonUI v2 Docs

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./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/npm/@tailwindcss/browser@4"></script>
<script src="https://cdn.jsdelivr/npm/[email protected]/dist/collapse.js"></script>
<link href="https://cdn.jsdelivr/npm/[email protected]/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>