I have a div with class bg-blue-100 text-blue-900 dark:bg-info where bg-info is linear-gradient(to right, hsla(240, 100%, 50%, 0.2), transparent 50%)

I get the light mode working fine but dark:bg-info doesn’t work as it uses background-image CSS property rather than background-color CSS property for light mode.

How do I make the dark mode work? There is a conflict between background-image in Dark Mode & background-color in Light Mode.

How to solve it?

I’ve made a Stackblitz demo showing the problem -> https://stackblitz.com/edit/github-6frqvs-tqnsnl?file=pages%2Findex.tsx

Open in New Window as Tailwind Dark Mode doesn’t show side-by-side on Stackblitz.

Notice, how it doesn’t show blue gradient on Dark Mode despite the code being:

<div className="p-4 m-4 h-20 w-96 bg-red-400 text-red-900 dark:bg-info">Hello hi</div>

Edit:

I’ve managed to make Dark Mode work on Tailwind Play so here’s the demo -> https://play.tailwindcss.com/fecClyOaIZ

Check only the 1st box. 2nd box is a demonstration of how it must really look in Dark Mode.

In Dark Mode, the 1st box should look like dark blue with a black gradient (see 2nd box)

Light Mode (1st box looks correct in light mode)

Dark Mode (1st box looks incorrect in dark mode. Should actually look like 2nd box)

The trick is to use dark:bg-transparent as CSS allows background-color & background-image at the same time.

<div class="h-screen m-0 p-0 dark:bg-black">
  <div class="flex flex-col justify-center items-center mx-20 text-center h-full">
    <div class="px-4 py-4 rounded-md bg-pink-100 text-pink-900 dark:bg-info dark:bg-transparent dark:text-white">This shouldn't look like this in Dark Mode</div>
    <button id="toggleDark" class="inline-flex justify-center px-4 py-2 text-sm font-medium mt-8 text-green-900 bg-green-100 border border-transparent rounded-md hover:bg-green-200 focus:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:ring-blue-500" onclick="document.documentElement.classList.toggle('dark');">Toggle Dark Mode</button>
    <div class="px-4 py-4 rounded-md dark:bg-info mt-8 dark:text-white">It should look like this in Dark Mode</div>
  </div>
</div>

Tailwind Play -> https://play.tailwindcss.com/ZWl7ZBwqnQ