v5: How to use @apply with daisy classes

[amir20]

Thank you for the amazing library. I am trying to upgrade to v5. Many things break but the first one I noticed is this one:

@utility active-primary {
  --n: var(--p);
  --nc: var(--pc);
  @apply active;
}

According to docs, active has been renamed to menu-active. However, that still breaks:

@utility active-primary {
  --n: var(--p);
  --nc: var(--pc);
  @apply menu-active;
}

[vite:css] [postcss] Cannot apply unknown utility class: menu-active
file: /Users/amirraminfar/Workspace/dozzle/assets/main.css:undefined:NaN

At the top, I have:

@import "tailwindcss";
@plugin "daisyui";
@config '../tailwind.config.ts';

I assume I need to some how to import so that is visible to tailwind.

[saadeghi]

Thanks for reaching out.
There are 2 challenges here:

1. Color variable names are changed according to Tailwind CSS 4 variables: https://v5.daisyui.com/docs/v5-beta/#improved-color-variables
2. @apply menu-active won't work anymore, as both daisyUI 5 and Tailwind CSS 4 use native CSS nesting. they are working as a modifier, not an individual class name that Tailwind can simply extract from a nested tree and extend it into another class name.

But I see the challenge here. Remapping the color names and extending a modifier class name to another one shouldn't be needed to do in the first place.
Right now you can do something like this https://play.tailwindcss.com/PUyU2Fr1OP?file=css to move on from this blocker, but that's not good enough. I will add component specific variables for this so changing the color of active menu item would be easier, without needing to remap color variables.
It will be available in daisyUI 5 beta.2 this week.

[amir20]

Thanks for the quick response. I should have mentioned that I was aware the var changes. I was mostly trying to use menu-active which I ran into this problem.

I will take a look at this. Perhaps, there is a better way to do this where I don't need to use apply. I have been slowly trying to convert all apply functions inline classes. It's not always possible though.

[amir20]

Your suggestion works now.

@utility menu-active {
  &,
  &:active {
    --color-neutral: var(--color-primary);
  }
}

As you mentioned, would be nice to be able to override this.