active style for menu items not working in nx monorepo setup

[mnlbox]

Hi @saadeghi,
Thanks for this awesome UI library.
I turned one of my project to a monorepo based on NX. Previously everything was OK but after change to monorpo some styles stopped working. For example my menu active style not working anymore. This is the output for the menu active style:

<header class="navbar bg-neutral text-neutral-content">
   <div class="navbar-start">
      <div class="dropdown">
         <label tabindex="0" class="btn btn-ghost lg:hidden">
         </label>
         <ul tabindex="0" class="menu menu-compact dropdown-content mt-3 p-2 shadow bg-base-100 rounded-box w-52">
            <li><a class="active" href="/">Home</a></li>
            <li><a class="" href="/#blog">Blog</a></li>
            <li><a class="" href="/#about">About</a></li>
         </ul>
      </div>
      <a class="btn btn-ghost normal-case text-xl">Welcome</a>
   </div>
   <div class="navbar-center hidden lg:flex">
      <ul class="menu menu-horizontal px-1">
         <li><a class="active" href="/">Home</a></li>
         <li><a class="" href="/#blog">Blog</a></li>
         <li><a class="" href="/#about">About</a></li>
      </ul>
   </div>
   <div class="navbar-end"><a class="btn btn-secondary" href="https://my-new-website.com" target="_blank">New Website</a></div>
</header>

And this is the style of the element in my page:

.menu li > *:not(ul):not(.menu-title):not(details):active, .menu li > *:not(ul):not(.menu-title):not(details).active, .menu li > details > summary:active {
    --tw-bg-opacity: 1;
    background-color: var(--fallback-n,oklch(var(--n)/var(--tw-bg-opacity)));
    --tw-text-opacity: 1;
    color: var(--fallback-nc,oklch(var(--nc)/var(--tw-text-opacity)));
}

But the background-color is not set to primary color. Any idea?
Is there any specific configuration required to use daisyui with NX monorepos?

[saadeghi]

First make sure dependencies are updated. For example there was CSS issue similar to this in the early versions of Nextjs 13 where the CSS processor dependencies where ignoring some styles (it's fixed now in later versions of Nextjs 13)

Second, make sure the path to all markup files exist in content in tailwind.config.js because if the Tailwind CSS can't find the class names in the files listed in content array, it won't generate those styles.

If the issue still exists, I would need an example repo when I can reproduce and see the issue.

[mnlbox]

@saadeghi Thanks for your reply, the weird thing is that all the other styles working without any issue and the only broken part is the active class for the menu items. I'm trying to check the content section of tailwind config. Is there any other thing you suggest me to check?
Do we have any "breaking changes" for navbar and menu components. Maybe it's because I updated my daisyui to the latest version.
Is this navbar looks good from your side?

<header class="navbar bg-neutral text-neutral-content">
   <div class="navbar-start">
      <div class="dropdown">
         <label tabindex="0" class="btn btn-ghost lg:hidden">
         </label>
         <ul tabindex="0" class="menu menu-compact dropdown-content mt-3 p-2 shadow bg-base-100 rounded-box w-52">
            <li><a class="active" href="/">Home</a></li>
            <li><a class="" href="/#blog">Blog</a></li>
            <li><a class="" href="/#about">About</a></li>
         </ul>
      </div>
      <a class="btn btn-ghost normal-case text-xl">Welcome</a>
   </div>
   <div class="navbar-center hidden lg:flex">
      <ul class="menu menu-horizontal px-1">
         <li><a class="active" href="/">Home</a></li>
         <li><a class="" href="/#blog">Blog</a></li>
         <li><a class="" href="/#about">About</a></li>
      </ul>
   </div>
   <div class="navbar-end"><a class="btn btn-secondary" href="https://my-new-website.com" target="_blank">New Website</a></div>
</header>

I also found this link: https://stackoverflow.com/a/73528462

Do I need to create/ use a custom tailwindcss plugin to support active class (something like this)?

[mnlbox]

@saadeghi Also I realised the working CSS in the previous version was: (old daisyui and tailwindcss)

.menu :where(li:not(.menu-title):not(:empty))>:where(:not(ul).active), .menu :where(li:not(.menu-title):not(:empty))>:where(*:not(ul):active) {
    --tw-bg-opacity: 1;
    background-color: hsl(var(--p) / var(--tw-bg-opacity));
    --tw-text-opacity: 1;
    color: hsl(var(--pc) / var(--tw-text-opacity));
}

While the new one is generated something like this: (the broken one after turn to monorepo based on NX and update all the packages)

.menu li > *:not(ul):not(.menu-title):not(details):active, .menu li > *:not(ul):not(.menu-title):not(details).active, .menu li > details > summary:active {
    --tw-bg-opacity: 1;
    background-color: var(--fallback-n,oklch(var(--n)/var(--tw-bg-opacity)));
    --tw-text-opacity: 1;
    color: var(--fallback-nc,oklch(var(--nc)/var(--tw-text-opacity)));
}

[saadeghi]

I see. The menu colors changed in daisyUI 3. I guess you upgraded from v2 to v4.

1. Please upgrade to the latest version 4.4.3
2. Add text-base-content to dropdown-content because when you have text-neutral-content in the navbar all text inside navbar will have that color but looks like you want the dropdown to be a different color. so use text-base-content alongside bg-base-100
3. Remove menu-compact which was removed in daisyUI 3 and it doesn't do anything now. You can use menu-sm if you want smaller size

https://play.tailwindcss.com/OoxQqDwZPq?size=1064x720

Let me know if you have a question.

[saadeghi]

In daisyUI 2 the active item color was primary:
https://play.tailwindcss.com/eUer2pcA5j?size=1064x720

In daisyUI 3+ the active item color is neutral:
https://play.tailwindcss.com/E0GNEgmqm0?size=1064x720

Because it's better if primary color is being used for elements that need to be eye catching, like call-to-action buttons.

The problem is now that active item color is neutral and the background color you have for the navbar is neutral as well, it's not visible.
Regarding the fact that active class only applies the color to the menu item, you use another color instead of active class. For example bg-primary:
https://play.tailwindcss.com/7TN541pr8E?size=1064x720