Tailwindcss background-image not working in dark mode

Question

I have my Tailwind classes defined like this:

<section class="dark:bg-gray-900 bg-hero-image bg-fixed">

So in the light version a background image is shown and on the dark version just gray-900 as background color.
The image is defined in tailwind.config.js like this:

theme: {
    extend: {
      backgroundImage: {
        'hero-image': "url('/header.jpg')"
      },

But this just doesn't work and still shows the image on dark mode.

Answer 1

You have to add backgroundImage to the variants in tailwind.config.js:

module.exports = {
  variants: {
    extend: {
      backgroundImage: ["dark"],
    },
  },

ALSO you have to add dark:bg-none for the background-image to be set to none.

<section class="dark:bg-gray-900 dark:bg-none bg-hero-image bg-fixed">

This is also nessessary for things like invert and many other classes. Check the corresponding section in the docs, whether or not the variants are included by default.

By default, only responsive variants are generated for invert utilities. https://v2.tailwindcss.com/docs/invert#variants