bug: !important needed to override some styles in DaisyUI

[withden]

In some cases, DaisyUI styles require important overrides, which can cause issues when customizing styles.

If you've faced similar issues where DaisyUI styles are difficult to override, please comment below with the class. We will add into this list

Bug List

• [ ] Badge (badge badge-outline !border-base-300)

[github-actions[bot]]

Thank you @withden 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.

[PruthviPraj00]

Hello @withden,

The reason for this is that in Tailwind V4, the addComponents function now places the CSS under @layer utilities.

As for the DaisyUI style for badges, the border color of the outline badge uses the current text color. Instead of modifying the border, you should adjust the text color like this:

text-base-300

This issue will persist until Tailwind Labs decides to revert the changes. @saadeghi has also raised this issue in Tailwind:
https://github.com/tailwindlabs/tailwindcss/issues/15045

[CoderJo-Pro]

Yes! This is also what I ran into. I just came from https://github.com/tailwindlabs/tailwindcss/issues/15045, wish this could be fixed as fast as they could. I override the .btn class of v5, made it hover:scale-95 and translate-none. If I let it go with the utilities layer, it just won't override.

@import "tailwindcss";
@plugin "daisyui";

@layer base, components, utilities, daisyui-override;

@layer daisyui-override {
  .btn {
    @apply translate-none;

    transition: scale 0.1s ease-in-out;
    
    &:hover {
      @apply active:scale-95;
    }
  }

  & .btn-ghost {
    /* --btn-ghost-bg: oklch(from var(--color-base-content) l c h / calc(alpha - 0.8)); */
    --btn-ghost-bg: color-mix(in oklab, var(--color-base-content), transparent 80%);

    &:hover {
      --btn-bg: color-mix(in oklab, var(--btn-color, var(--btn-ghost-bg)), black 7%);
    }

    &:active:not(.btn-active) {
      --btn-bg: color-mix(in oklab, var(--btn-color, var(--btn-ghost-bg)), black 5%);
      --btn-border: color-mix(in oklab, var(--btn-color, var(--btn-ghost-bg)), black 7%);
    }
  }
}

[withden]

Hey,

@saadeghi I face this issue again with the latest changes in the badge component.

[saadeghi]

@withden for border color?

[withden]

Yes, for border-color, we need to use !border-base-300 (it will work with important)

[lemachinarbo]

Hi, Is my first time using DaisyUi and I just tried a very basic customization as shown in the customize docs:

<button class="btn rounded-full">rounded-full not working</button>
<button class="btn rounded-full!">rounded-full working</button>

I expected rounded-full to override the button’s border radius. However, it only works when I add the ! (important) modifier: rounded-full!.

Is this a temporal default/expected behavior due to the Tailwind v4 change described in https://github.com/tailwindlabs/tailwindcss/issues/15045? or should this work without the important override and I’m missing something?

Thanks!

[saadeghi]

@lemachinarbo rounded-full work as expected:
https://play.tailwindcss.com/7yFvAsKZ5j

There are only a few cases where ! is needed. For example the case in this issue. Simple customizations like rounded-full is not one of them.
If rounded-full is not working please share a minimal reproduction so I can help.

[lemachinarbo]

Thanks for the quick response @saadeghi

It might be a bundling issue? I’m using Rspack I’ll test and report back if I find anything relevant. In case you’re curious, I created this minimal example: https://codesandbox.io/p/devbox/3ldt2t

[saadeghi]

@lemachinarbo Thanks for the link.
Yes seems like it is a bundler issue!
Looking at the output CSS:

It is changing the style, adding those .btn:not(:is(:lang(ae), :lang(ar)... with higher while it should be just .btn! Those selectors are not from daisyUI.

I couldn't reproduce the same issue with a fresh setup tho. It works with that setup 🤔

[pdanpdan]

I think this can be closed

• the original problem should now be fixed in 5.3.0
• the other problems are related to bundlers/CSS processors not related to DaisyUI