Tailwind css dark mode does not enable

Question

I am trying to enable dark mode based on the system default using tailwind.

To accomplish this I am using the plugin: Tailwind dark mode.

My config fail for tailwind is as follows:

defaultTheme = require('tailwindcss/defaultTheme');
module.exports = {
    experimental: {
        darkModeVariant: true
    },
    purge: [],
  theme: {
      extend: {
          fontFamily: {
              sans: ['Nunito', ...defaultTheme.fontFamily.sans],
          },
          screens: {
              'dark': {'raw': '(prefers-color-scheme: dark)'},
              // => @media (prefers-color-scheme: dark) { ... }
          },
      },
  },
  variants: {
      backgroundColor: ['dark', 'dark-hover', 'dark-group-hover', 'dark-even', 'dark-odd'],
      borderColor: ['dark', 'dark-disabled', 'dark-focus', 'dark-focus-within'],
      textColor: ['dark', 'dark-hover', 'dark-active', 'dark-placeholder'],
      opacity: ['responsive', 'hover', 'focus', 'disabled']
  },
  plugins: [require('tailwindcss-dark-mode')()],
}


defaultTheme = require('tailwindcss/defaultTheme');

And in my html file I am adding the following:

<span class="dark:text-yellow-400">
    1
</span>

The plugin checks for my dark mode but the text wont turn yellow it stays black.

Does anyone know why it wont work?

For newer versions, dark mode should be implemented this way: ```module.exports = { darkMode: true, … },``` — BonisTech, Dec 08 '21 at 23:52

score 8 · Answer 1 · answered Jan 03 '21 at 04:26

First things first, now TailWIndCSS supports dark-mode out-of-the-box by adding the dark: prefix before any class after it is enabled. Not sure if it is related to the question, but thought you need to know.

The plugin you are using states the following use for enabling dark mode:

< tailwind.config.js >

...
plugins: [
  require('tailwindcss-dark-mode')()
]
// To enable dark mode for all classes:
variants: ['dark', 'dark-hover', 'dark-group-hover', 'dark-even', 'dark-odd', ...]

// To enable dark mode for only single utility class:
variants: {
  backgroundColor: ['dark', 'dark-hover', 'dark-group-hover', 'dark-even', 'dark-odd']
}
...

It also states that

Styles generated by this plugin are only used if the selector is applied to the <html> element. How you do that is up to you. prefers-dark.js is provided as an option, which is a simple script that enables dark mode based on the user's system theme.

So, to enable dark mode through the plugin, use:

< mypage.html >

...
<body class="mode-dark">
  <div class="bg-white dark:bg-black">
    <p class="text-black dark:text-white">
      My eyes are grateful.

      <a class="text-blue-300 hover:text-blue-400">
        Learn more
      </a>
    </p>
  </div>
...
</body>

Add that extra mode-dark class to the wrapper element (body in this case).

To change the theme based on user preferences through the plugin:

< mypage.html >

<head>
  <script src="to/prefers-dark.js"></script>
</head>

...
<body class="mode-dark">
  <div class="bg-white dark:bg-black">
    <p class="text-black dark:text-white">
      My eyes are grateful.

      <a class="text-blue-300 hover:text-blue-400">
        Learn more
      </a>
    </p>
  </div>
...
</body>

With the above, the theme will change as the user changes his/her preferences in the system settings.

P.S. If you wanna use dark mode, use the one in-built in TailWindCSS v2. Enable it like this:

< tailwind.config.js >

module.exports = {
  darkMode: 'media',
  ...
}

media can be changed to class.

Media: Now whenever dark mode is enabled on the user's operating system, dark:{class} classes will take precedence over unprefixed classes. The media strategy uses the prefers-color-scheme media feature under the hood.

Class: If you want to support toggling dark mode manually instead of relying on the operating system preference, use the class strategy instead of the media strategy.

Hope this helped you :)

score 1 · Answer 2 · answered Jan 18 '21 at 21:10

1

I had this problem due to forgetting to update tailwind.config.js:

I changed:

darkMode: false,

to

darkMode: 'class',

I have a simple watcher in Vue that toggles it via:

document.querySelector('html').classList.add('dark')

document.querySelector('html').classList.remove('dark')

You can read more here: https://tailwindcss.com/docs/dark-mode

answered Jan 18 '21 at 21:10

agm1984

15,500
6
89
113

Hmm doesn't work for me somehow – Eric Burel Dec 15 '22 at 08:53
Doesn't work for me either. – jayarjo Aug 25 '23 at 19:21

Tailwind css dark mode does not enable

2 Answers2