-
Notifications
You must be signed in to change notification settings - Fork 30k
Description
What version of Next.js are you using?
10.0.5
What version of Node.js are you using?
14.3.0
What browser are you using?
Chrome
What operating system are you using?
macOS
How are you deploying your application?
yarn dev
Describe the Bug
Dark mode doesn't get applied when declared inside a css module with @apply directive
Expected Behavior
I would expect the dark:border-white in the steps to reproduce example to be applied when dark mode is activated
To Reproduce
BurgerMenu.js
import styles from './BurgerMenu.module.css'
export default function BurgerMenu() {
return (
<div className={styles.menuBtn} />
)
}BurgerMenu.module.css:
.menu-btn {
width: 40px;
height: 40px;
@apply border-2 border-dark dark:border-white;
}it's working in tailwind playground => https://play.tailwindcss.com/RpfeDooXVs
tailwind is working just fine on the rest of the app, I used https://github.com/leerob/leerob.io as a starter app. Lee was talking about css modules in his stream so I gave it a try. It works but doesn't look compatible with dark mode.
My workaround is to do the following:
<div className={styles.menuBtn + " border-2 dark:border-white border-dark"}
but using the @apply would be sexier...
Also the button blinks when I use a css module, but that's a different issue