bug: order of button layers

[saadeghi]

Reproduction URL (Required)

https://play.tailwindcss.com/XrLQyZKN7t

What version of daisyUI are you using?

No response

Which browsers are you seeing the problem on?

No response

Describe your issue

When using collapse and button together, layer order definition of collapse changes the layer order of button.

Expected:

Current behavior:

[github-actions]

Thank you @saadeghi for reporting issues. It helps daisyUI a lot 💚
I'll be working on issues one by one. I will help with this one as soon as a I find a solution.
In the meantime providing more details and reproduction links would be helpful.

[pdanpdan]

I was able to reduce the test case in play to https://play.tailwindcss.com/eTyHF4vj87
and this will generate the layers in the wrong order:

@layer utilities {
  .collapse-arrow {
    @layer daisyui.modifier {
      > .collapse-title:after {
        ...
      }
    }
  }

  .collapse {
    @layer daisyui.component {
      ...
    }
  }
}

The only thing I can identify is that in collapse CSS collapse-title is defined in component layer after some other classes are defined in modifier - but there are other files that do the same (ex card) and do not break the layers order.

Maybe another bug in tailwind?

[saadeghi]

As far as I understood Tailwind CSS gives order priority to selectors with more properties, regardless of the order we register them.

I think we should either find a way to define the order of layers like @layer daisyui.component, daisyui.color, daisyui.modifier,...

Or put them all inside each other like a cascade. This way we can be sure the outer layers always have more priority than inner ones.

[pdanpdan]

You mean daisyUI.modifier.component
I think it would be horror :)
Can't you force a @layer enumeration to be placed at the start?

[SamuNatsu]

same issue, button style corrupted while using collapse

[saadeghi]

You mean daisyUI.modifier.component I think it would be horror :)

Yes. it's wont look good but it works.

Can't you force a @layer enumeration to be placed at the start?

No. We only can put them in base layer which won't be helpful for the utilities.

[pdanpdan]

I found a stupid solution: force loading of a class with higher priority (diff)

@import "tailwindcss";
@plugin "daisyui"{
  themes: light --default;
}

/* this */
@source inline("diff");

You can choose one from diff, modal, fab, tooltip, tab, menu.

https://play.tailwindcss.com/1asFH15c6R?file=css

[hliang]

i had similar issue while using solidjs+tailwindcss+daisyui

  "dependencies": {
    "@solidjs/router": "^0.13.0",
    "@tailwindcss/vite": "^4.1.16",
    "daisyui": "^5.3.9",
    "solid-icons": "^1.1.0",
    "solid-js": "^1.8.15"
  },
  "devDependencies": {
    "autoprefixer": "^10.4.18",
    "postcss": "^8.4.35",
    "tailwindcss": "^4.1.16",
    "typescript": "^5.3.3",
    "vite": "^5.1.4",
    "vite-plugin-solid": "^2.10.2"
  }

fixed by

1. installing "@tailwindcss/postcss": "^4.1.16", and adding .postcssrc.json file

{
  "plugins": {
    "@tailwindcss/postcss": {}
  }
}

2. change my index.css

/* old css */
/* @tailwind base; */
/* @tailwind components; */
/* @tailwind utilities;  */

/* new css */
@import "tailwindcss";
@plugin "daisyui";