Make gradient in dark mode `background-image` work with simple background `background-color` in light mode in Tailwind CSS?

user_6141587 0
Viewed 1007

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)

light-mode

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

dark-mode

tailwind-css css
1 Answers

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

dark-mode

user_61415870
Related