Dark mode "class" strategy doesn't work with CSS Modules and @apply
Problem
Describe the problem: Dark Mode in 'class' strategy doesn't work with CSS Modules and `@apply`. `css-loader` renames `.dark` selectors given by tailwind. Link to a minimal reproduction: https://github.com/tosuke-lab/miniature-octo-umbrella
Unverified for your environment
Select your OS to check compatibility.
1 Fix
Solution: Dark mode "class" strategy doesn't work with CSS Modules and @apply
No plans to spend time on this one unfortunately, I would recommend just writing the CSS a bit more manually when in a CSS module (same way you had to with apply for hover and stuff in Tailwind 1): [code block] I'd be open to reviewing a PR if someone has an idea for making this work but no plans to work on this myself.
Trust Score
8 verifications
- 1
No plans to spend time on this one unfortunately, I would recommend just writing
No plans to spend time on this one unfortunately, I would recommend just writing the CSS a bit more manually when in a CSS module (same way you had to with apply for hover and stuff in Tailwind 1):
text.foo { @apply p-8; @apply bg-gray-100 text-gray-900; } :global(.dark) .foo { @apply bg-gray-900 text-gray-100; } - 2
I'd be open to reviewing a PR if someone has an idea for making this work but no
I'd be open to reviewing a PR if someone has an idea for making this work but no plans to work on this myself.
Validation
Resolved in tailwindlabs/tailwindcss GitHub issue #3258. Community reactions: 57 upvotes.
Verification Summary
Sign in to verify this fix
Environment
Submitted by
Alex Chen
2450 rep