How can I use the 'dark:' prefix to target my own custom classes?

[PaulHaze]

So I have been pulling my hair out all morning trying to figure out why a custom class wasn't being applied in dark mode in an Astro project I am working on. Basically I have a rather complicated glass effect I want to apply in dark mode if a menu is active. If its light mode the class is much simpler and can be handled by tailwind utility classes.

I thought it would be a simple case of doing something like this

const activeClass = 'bg-white border-black ring ring-stone-700/50 dark:my-glass';

and then conditionally applying it with the cn utility. But no matter what, my-glass would never be applied. Then digging deeper it seems no matter what custom class I make, it wouldn't be applied with a dark prefix.

After asking claude.ai it seems that custom classes aren't able to applied this way?! Has this always been the case? What would be the best practice for applying something like this? Just make a general menu-active class, and apply all the styles within that, including the conditional dark/light styles?

It would be really nice to be able to implement my own custom styles with the dark prefix though. Is this possible?

[wongjn]

You'd need to use the @utility directive like:

@utility my-glass {
  …
}

[PaulHaze]

Yep, after fiddling around with a few solutions, I found the best way was to use the @Utility directive....