Support for experimental dark mode about xwind HOT 12 CLOSED

Awesome! Yea that will be the more stable solution until tailwindcss figures it out.

Btw @tailwindcss/ui includes @tailwindcss/typography you can remove this dependency if you'd like.

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: important:bg-red-300

  //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
        })
      })
    })
  })

from xwind.

also, FWIW, I'm using with emotion.sh:

// .babelrc
{
    "presets": [
        "next/babel"
    ],
    "plugins": [
        "macros",
        "@emotion/babel-plugin"
    ]
}

Full stack trace

Error: Utility with variant class 'dark' not found"
    at @tailwindcssinjs/tailwindcss-data/lib/transformers/getGenerateTwClassSubstituteRoot.js:52:27
    at transformTwClassesToStyleObjects (@tailwindcssinjs/tailwindcss-data/lib/transformers/transformTwClassesToStyleObject.js:104:27)
    at Object.transformTwClassesToStyleObject (@tailwindcssinjs/tailwindcss-data/lib/transformers/transformTwClassesToStyleObject.js:114:26)
    at tailwind (@tailwindcssinjs/macro/lib/tailwindcssinjs.js:28:46)

from xwind.

Hello, what version of tailwindcss are you using? It should work on "tailwindcss": "1.8.7",. Later versions broke it again. The current implementation of dark mode in tailwindcss is really unstable.

from xwind.

Ah, I was using 1.8.10. Moving to 1.8.7 breaks it differently (below).

Even with the plugins out there, it's deceptively challenging to get dark mode done "right" and to have it support classname strategies!

Thanks :)

error - TypeError: corePlugins is not a function or its return value is not iterable
    at Object.tailwindData (/Users/timfee/Developer/timfeeley.com/site/node_modules/@tailwindcssinjs/tailwindcss-data/lib/tailwindcssData.js:39:59)
    at tailwindcssinjs (/Users/timfee/Developer/timfeeley.com/site/node_modules/@tailwindcssinjs/macro/lib/tailwindcssinjs.js:18:163)
    at eval (webpack-internal:///./pages/_app.tsx:24:94)
    at Module../pages/_app.tsx (/Users/timfee/Developer/timfeeley.com/site/.next/server/pages/_app.js:104:1)
    at __webpack_require__ (/Users/timfee/Developer/timfeeley.com/site/.next/server/pages/_app.js:23:31)
    at Object.0 (/Users/timfee/Developer/timfeeley.com/site/.next/server/pages/_app.js:137:18)
    at __webpack_require__ (/Users/timfee/Developer/timfeeley.com/site/.next/server/pages/_app.js:23:31)
    at /Users/timfee/Developer/timfeeley.com/site/.next/server/pages/_app.js:91:18
    at Object.<anonymous> (/Users/timfee/Developer/timfeeley.com/site/.next/server/pages/_app.js:94:10)

from xwind.

Ah, that's an easy fix. @tailwindcssinjs/macro has to generate a custom coreplugins file to support hot reloading on tailwind.config.js changes.

Please try one of these steps and it should work fine again:

• Delete the .next folder this contains chached files that will be regenerated when you run next dev
• Delete node_modules and lock file and reinstall your modules.

Next's heavy caching sometimes causes problems when changing/updating modules.

if it still doesn't work you can disable this feature developmentMode: false, in the babel macro config

from xwind.

Thanks! That worked.

I ended up writing my own dark mode plugin that replicates the dark class strategy that plays nicely:

// 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()

from xwind.

Thanks! The important one will be super handy :)

from xwind.

and thanks for the tailwindui / typography tip. I was wondering why my classes were duplicated!

from xwind.

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 addVariant("dark:typography", ({ modifySelectors, separator })

If I rename the variant to darktypography, it works fine.

Maybe WAI and too edge casey to care about, but figured I’d ping :)

from xwind.

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 darktypography or dark-typography.

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.
Thanks!

from xwind.

I wonder how you do the dark mode now. With tailwind 1.9.x @Arthie Thanks

from xwind.

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 tailwind.config.js. This will be necessary until dark mode becomes a non-experimental feature.

Example:

//tailwind.config.js
module.exports = {
  // ... config options
  dark: 'media', // or 'class'
  experimental: "all",
  future: "all",
  plugins: [
    require("tailwindcss/lib/flagged/darkModeVariantPlugin").default
  ]
}

from xwind.