[Bug]: Tailwind dark mode (dark:hidden) won't hide image or div that contains image.

[sklawik]

What version of Tailwind CSS are you using?

v2.0.4

What build tool (or framework if it abstracts the build tool) are you using?

Create React App

What version of Node.js are you using?

v14.16.0

What browser are you using?

Firefox 88.0 (64-bit)

What operating system are you using?

Linux manjaro 5.11.16-2-MANJARO #1 SMP PREEMPT Thu Apr 22 09:53:11 UTC 2021 x86_64 GNU/Linux

Reproduction repository

https://github.com/Hy4e/tailwindcss-bug

Describe your issue

The dark: prefix only works on bg-color, but will not hide div that contains <img/> tag or image itself.
The div will be hidden if it doesn't contain an img tag, or if the div is not the img tag.

[adamwathan]

Hey! You need to enable the dark variant for the display plugin, it's not enabled for all plugins by default.

https://tailwindcss.com/docs/dark-mode#enabling-for-other-utilities

[sklawik]

Thank you Adam, that's very kind of you.
For readers, here is ready answer to copy-paste to your project so that the problem is fixed.

tailwind.config.js

module.exports = {
  purge: [],
  darkMode: 'class', // or 'media' or 'class'
  theme: {
    extend: {},
  },
  variants: {
    extend: {
      display: ['dark']
    },
  },
  plugins: [],
}