Tailwindcss v1.8 dark mode (experimental) issue

[vpcvdc]

Describe the problem:

🚫 Error: Your config mentions the "dark" variant, but "dark" doesn't appear to be a variant. Did you forget or misconfigure a plugin that supplies that variant?

Link to a minimal reproduction:

// tailwind.config.js
'use strict';

module.exports = {
  dark: 'class',
  experimental: 'all',
  future: {
    purgeLayersByDefault: true,
    removeDeprecatedGapUtilities: true,
  },
  purge: {
    content: [
      './public/**/*.html',
      './src/**/*.js',
    ],
  },
  theme: {
    extend: {
      colors: {
        'dark-gray': '#121212',
        gray: {
          '100': '#f5f5f5',
          '200': '#eeeeee',
          '300': '#e0e0e0',
          '400': '#bdbdbd',
          '500': '#9e9e9e',
          '600': '#757575',
          '700': '#616161',
          '800': '#424242',
          '900': '#212121',
        },
      },
      cursor: {
        'zoom-in': 'zoom-in',
        'zoom-out': 'zoom-out',
      },
    },
  },
  variants: {},
  plugins: [],
};

When run build command npx tailwindcss build -o src/index.css, getting the above error.

[adddz]

Having the same issue.

module.exports = {
    ...
    dark: 'media'
    experimental: {
        darkModeVariant: true,
    },
}

[RobinMalfait]

We're looking into it!

[ben-sommer]

@RobinMalfait How experimental is the dark mode support? Looking to use it in my project. Been using this method:

screens: {
  light: { raw: '(prefers-color-scheme: light)' },
  dark: { raw: '(prefers-color-scheme: dark)' },
},

[adamwathan]

@ben-sommer I don't have any concrete plans to change anything, just reserving the ability to do so if necessary. It will be a feature for 2.0 for sure (coming in November), so at best it won't change at all over the next two months, at worst there might be a class name tweak (maybe .dark becomes .scheme-dark) or something that will be documented in the changelog if/when it happens.

I'd just use it and be willing to make small updates if anything changes. I wouldn't hesitate to use it in my own projects personally.

[zaydek]

@ben-sommer That technique works more reliably for me. I was getting interference from using Tailwind UI, which breaks the new, experimental dark mode support. More information here: #2322 (comment).