-
-
Notifications
You must be signed in to change notification settings - Fork 183
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Add dark and light mode variants #142
Conversation
🎉 |
ad0a648
to
889f9aa
Compare
I'm currently using the class strategy and grouping them together does not seem to work:
|
That's really strange, both have the same output: import tw from 'twin.macro'
tw`dark:bg-black dark:text-white`
tw`dark:(bg-black text-white)`
// ↓ ↓ ↓ ↓ ↓ ↓
({
".dark &": {
"--bg-opacity": "1",
"backgroundColor": "rgba(0, 0, 0, var(--bg-opacity))",
"--text-opacity": "1",
"color": "rgba(255, 255, 255, var(--text-opacity))"
}
});
({
".dark &": {
"--bg-opacity": "1",
"backgroundColor": "rgba(0, 0, 0, var(--bg-opacity))",
"--text-opacity": "1",
"color": "rgba(255, 255, 255, var(--text-opacity))"
}
}); Mind making a small demo to demonstrate the issue? You can start with one of these sandboxes. |
Sorry! That was a mistake on my part, I forgot my build was using the tailwind dark addon which may have caused the conflict. After disabling that everything's working fine now. |
@ben-rogerson When I group my dark mode classes I get the error pointing to this page saying |
@garand Could you give me an example - just tested |
@ben-rogerson Yeah, just realized my problem.. 😞 User error sorry. I neglected the : after |
Following the new tailwind darkmode feature, twin has also added the dark mode variant:
Darkmode: Default
Darkmode: Class strategy
If you add
{ dark: 'class' }
to your config:With the class strategy, you'll need to add a className of
dark
on a parent element to make this strategy work (it can be dynamic too):Extra: Light mode
I've also added a light mode variant that works similarly:
Lightmode: Default
Lightmode: Class strategy
If you add
{ dark: 'class' }
(or{ light: 'class' }
) to your config:With the class strategy, you'll need to add a className of
light
on a parent element to make this strategy work (it can be dynamic too):