Skip to content

tailwind @apply dark mode in css module is dismissed #22439

@fredericrous

Description

@fredericrous

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

Metadata

Metadata

Assignees

No one assigned

    Labels

    bugIssue was opened via the bug report template.

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions