hi. i was developing my blog application and all in the sudden I faced a problem during development.

I'm currently creating a css.module for my navbar and i notice that if i use the @apply rule the it successfuly create it's own unique css class
ex:
navbar.module.css:
.navbar{
@apply fixed top-0 inset-x-0 z-10;
@apply font-chivo font-bold shadow-sm;
}
<nav class={navbarStyles.navbar}
end result:
<nav class="Navbar_navbarO5hVe">

but this does not work if i want to apply tailwind dark: attributes.
ex:
.navbar{
@apply fixed top-0 inset-x-0 z-10;
@apply font-chivo font-bold shadow-sm;
@apply dark:bg-black;
}
<nav class={navbarStyles.navbar}
end result:
<nav class="Navbar_navbarO5hVe">

this forces me to write css inline and make my code a little bit more messy without separation of concerns.