bug: Menu item hover styles persist through active styles due to importance

[exoRift]

What version of daisyUI are you using?

3.5.1

Describe your issue

I've had this issue in one project since I switched to react-daisyui version 4.0.0 where menu item hover styles are marked important, resulting in no click feedback due to the active styles being overridden by the hover styles.

However, I can't seem to narrow down the cause at all

This issue doesn't happen in my other projects, this is a relatively large project so it's tedious to try removing things until it stops, and it's not the fault of react-daisyui because those other projects where it doesn't happen also use it.

However, a possible solution to this would be to add a check for not :active alongside .active

daisyui/src/components/styled/menu.css

Line 30 in 433edcd

&:not(.active):hover {

I wish I could reproduce this issue, but I can't and this project is one that I cannot open to the public

What browsers are you seeing the problem on?

All browsers

Reproduction URL

No response

[saadeghi]

There's no important rule in daisyUI.
I'm not sure about react-daisyui but you may want to ask about it in react-daisyui repo.

Are you using any class name with ! prefix? because that makes the CSS rules !important

Can you share more details about your CSS setup?
How are you handling CSS?
How are you using the class names?

It's not easy to help when you don't provide a reproduction repo.

[exoRift]

I did make an issue in react-daisyui and was directed here. Unfortunately, I can't provide the code, but I can say that I'm not using any important styles

Though, I guess I should ask, why is is targeting .active and not :active?

[tronikelis]

I am experiencing the same thing.

It is so weird to me that I see !imporant on :hover

I am using the native package with solid.js and bundling everything with vite (no special config there)

my tailwind.config.cjs:

const defaultTheme = require("tailwindcss/defaultTheme");

/** @type {import('tailwindcss').Config} */
module.exports = {
    content: ["./src/**/*.{ts,tsx}"],

    theme: {
        extend: {
            fontFamily: {
                sans: ["Roboto", ...defaultTheme.fontFamily.sans],
            },
        },
    },
    plugins: [require("daisyui")],

    daisyui: {
        themes: [
            {
                my: {
                    primary: "#0c66e4",
                    secondary: "#a5b4fc",
                    accent: "#1dcdbc",
                    neutral: "#2b3440",
                    "base-100": "#ffffff",
                    info: "#3abff8",
                    success: "#36d399",
                    warning: "#fbbd23",
                    error: "#f87272",
                },
            },
        ],
    },
};

And I am literally just rendering the example provided in the docs:

 <ul class="menu bg-base-200 w-56 rounded-box">
        <li>
            <a>Item 1</a>
        </li>
        <li>
            <a>Item 2</a>
        </li>
        <li>
            <a>Item 3</a>
        </li>
</ul>

[tronikelis]

removing this line from my codebase fixes the problem:

<Button
      // ..
      outlined={!active()} // this one right here
      // ...
>

But this shouldn't impact the menu build styles, I don't understand what is happening

@exoRift check if you have !active ANYWHERE (where tailwind looks for classes) in your codebase,

This is truly a javascript moment when changing !active() to active() === false fixes your css

[tronikelis]

I am guessing that the tailwind build setup sees !active and messes with daisyui styles where it shouldn't

[exoRift]

Thanks for helping pinpoint it. Removing this line with !disabled fixes it.

Should this issue be transferred to Tailwind or is it still a Daisy thing?

[tronikelis]

Should this issue be transferred to Tailwind or is it still a Daisy thing?

I actually have no idea but i'm guessing it probably is a tailwind problem, because daisy ui does not apply important classes (the ones with !) anywhere. I searched the daisy codebase and did not find anything with important or ! classes

If anyone else comes across this and does not want to change their code, you can blocklist a class in the tailwind config like this:

blocklist: ["!active"]

https://tailwindcss.com/docs/content-configuration#discarding-classes

[tronikelis]

@saadeghi do you think it is possible that this is a daisy ui problem?

[saadeghi]

@tronikelis
This is not an issue from daisyUI.
daisyUI doesn't have any important rule and doesn't do any CSS processing about adding !important to styles. So it must be a processor issue.
I'm closing this issue because there's nothing I can do on my side but feel free to continue the conversation until there's a solution.

There was an issue in Tailwind CSS but it was fixed earlier this year:
tailwindlabs/tailwindcss#10582

The issue was, sometimes people had a specific string in their code which was similar to a class name. For example !menu (as a false variable name). Then Tailwind couldn't generate valid CSS for that. The issue is fixed as far as I know so I'm not sure if it's the same issue coming back or not.

It would be helpful if someone provides a reproduction repo or Tailwind Play page so we can also see the issue.

[exoRift]

I've opened an issue in the Tailwind repo

tailwindlabs/tailwindcss#12099

[Snyker]

I have the same problem when i use 'collapse', in the globals.css i do :

.mt-collapse {
  @apply collapse
}

.mt-collapse-content {
  @apply collapse-content
}

.mt-collapse-title {
  @apply collapse-title
}

this is exclude the !important

[saadeghi]

.mt-collapse {
  @apply collapse
}

.mt-collapse-content {
  @apply collapse-content
}

.mt-collapse-title {
  @apply collapse-title
}

This is not the same problem. you're only extending style from a class name, not all the CSS rules that are affecting that class name. For example, @apply collapse-content will not put the style .collapse:not(.collapse-close) > input[type="checkbox"]:checked ~ .collapse-content in your custom class name of course, so you can't expect it to work.

Some component class names like this, work in relation to each other. So extending them with @apply breaks the style. If you need a mt- prefix, just use the prefix config instead of manually extending each class name