Support for experimental dark mode

Hi there,

When I try to use experimental dark mode, I get an error:

Error: Utility with variant class 'dark' not found"
    at @tailwindcssinjs/tailwindcss-data/lib/transformers/getGenerateTwClassSubstituteRoot.js:52:27

Here’s the snippet:

tw`dark[from-blue-400 via-pink-500 to-red-400 bg-gradient-to-tr]`

Here’s the config file:

module.exports = {
  experimental: {
    darkModeVariant: true
  },
  future: {
    removeDeprecatedGapUtilities: true,
    purgeLayersByDefault: true
  },
  purge: {
    content: ['./src/**/*.{js,ts,jsx,tsx}', './pages/**/*.{js,ts,jsx,tsx}']
  },
  important: true,
  dark: 'class',
  plugins: [
    require('@tailwindcss/typography')({
      modifiers: []
    }),
    require('@tailwindcss/ui')
  ]
}

Interestingly, the vscode plugin renders a tooltip correctly:

Any thoughts? 😃

[Arthie]

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

[Arthie]

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
  ]
}