Support for experimental dark mode #10
Comments
|
also, FWIW, I'm using with emotion.sh: // .babelrc
{
"presets": [
"next/babel"
],
"plugins": [
"macros",
"@emotion/babel-plugin"
]
}Full stack trace |
|
Hello, what version of tailwindcss are you using? It should work on |
|
Ah, I was using Even with the plugins out there, it's deceptively challenging to get dark mode done "right" and to have it support classname strategies! Thanks :) |
|
Ah, that's an easy fix. @tailwindcssinjs/macro has to generate a custom Please try one of these steps and it should work fine again:
Next's heavy caching sometimes causes problems when changing/updating modules. if it still doesn't work you can disable this feature |
|
Thanks! That worked. I ended up writing my own dark mode plugin that replicates the dark // tailwind.conf.js
// ...
plugins: [
require('@tailwindcss/typography')({
modifiers: []
}),
require('@tailwindcss/ui'),
require('./src/plugin-darkmode')
],
// ...// plugin-darkmode.js
const plugin = require('tailwindcss/plugin')
module.exports = plugin(function ({ addVariant, e }) {
addVariant('dark', ({ container, separator }) => {
container.walkRules(rule => {
const clone = rule
clone.selector = `html.dark .${e(
`dark${separator}${rule.selector.slice(1)}`
)}`
})
})
})// browser-script.js
function checkDarkMode() {
return (
window.matchMedia &&
window.matchMedia('(prefers-color-scheme: dark)').matches
)
}
function watchDarkMode() {
if (!window.matchMedia) return
window
.matchMedia('(prefers-color-scheme: dark)')
.addListener(addDarkModeSelector)
}
function addDarkModeSelector() {
if (checkDarkMode()) {
document.documentElement.classList.add('dark')
} else {
document.documentElement.classList.remove('dark')
}
}
addDarkModeSelector()
watchDarkMode() |
|
Awesome! Yea that will be the more stable solution until tailwindcss figures it out. Btw These are my custom plugins, might be of interest: Add keyframes to tailwindcss base css //Add keyframes to tailwindcss base file
plugin(function ({ addBase, addUtilities, e, theme, variants }) {
const keyframesConfig = theme('keyframes')
const keyframesStyles = Object.fromEntries(
Object.entries(keyframesConfig).map(([name, keyframes]) => {
return [`@keyframes ${name}`, keyframes]
})
)
addBase(keyframesStyles)
})Add !important variant: //Add !important variant: important
plugin(function ({ addVariant }) {
addVariant('important', ({ container }) => {
container.walkRules(rule => {
rule.selector = `.\\!${rule.selector.slice(1)}`
rule.walkDecls(decl => {
decl.important = true
})
})
})
}) |
|
Thanks! The |
|
and thanks for the tailwindui / typography tip. I was wondering why my classes were duplicated! |
|
hey, reopening so it delivers a notification (not sure how exactly Github determines when to ping you). It turns out that for dark mode to fully traverse typography correctly, it needs a little more elbow grease. I found this approach, but the macro doesn’t seem to like the nested colon syntax for If I rename the variant to Maybe WAI and too edge casey to care about, but figured I’d ping :) |
|
Interesting, the tailwind classes parser only knows about the separator. It thinks its 2 different variants (dark variant and typography variant). Since this can be confusing I would argue that you made the better/clearer choice with I could add the variants list to the classes parser to fix this but since this is indeed an edge case I'll leave it for now. |
|
I wonder how you do the dark mode now. With tailwind 1.9.x @Arthie Thanks |
@sondh0127 you'll have to add the dark mode plugin from tailwindcss in your Example: //tailwind.config.js
module.exports = {
// ... config options
dark: 'media', // or 'class'
experimental: "all",
future: "all",
plugins: [
require("tailwindcss/lib/flagged/darkModeVariantPlugin").default
]
} |
Hi there,
When I try to use experimental dark mode, I get an error:
Here's the snippet:
Here's the config file:
Interestingly, the vscode plugin renders a tooltip correctly:
Any thoughts? :)
The text was updated successfully, but these errors were encountered: