title: Make gradient in dark mode `background-image` work with simple background `background-color` in light mode in Tailwind CSS?
body: <p>I have a <code>div</code> with class <code>bg-blue-100 text-blue-900 dark:bg-info</code> where <code>bg-info</code> is <code>linear-gradient(to right, hsla(240, 100%, 50%, 0.2), transparent 50%)</code></p>
  <p>I get the light mode working fine but <code>dark:bg-info</code> doesn't work as it uses <code>background-image</code> CSS property rather than <code>background-color</code> CSS property for light mode.</p>
  <p>How do I make the dark mode work? There is a conflict between <code>background-image</code> in Dark Mode &amp; <code>background-color</code> in Light Mode.</p>
  <p>How to solve it?</p>
  <p>I've made a Stackblitz demo showing the problem -&gt; <a href="https://stackblitz.com/edit/github-6frqvs-tqnsnl?file=pages%2Findex.tsx" rel="nofollow noreferrer">https://stackblitz.com/edit/github-6frqvs-tqnsnl?file=pages%2Findex.tsx</a></p>
  <p>Open in New Window as Tailwind Dark Mode doesn't show side-by-side on Stackblitz.</p>
  <p>Notice, how it doesn't show blue gradient on Dark Mode despite the code being:</p>
  <pre class="lang-html prettyprint-override"><code>&lt;div className=&quot;p-4 m-4 h-20 w-96 bg-red-400 text-red-900 dark:bg-info&quot;&gt;Hello hi&lt;/div&gt;
  </code></pre>
  <h1>Edit:</h1>
  <p>I've managed to make Dark Mode work on Tailwind Play so here's the demo -&gt; <a href="https://play.tailwindcss.com/fecClyOaIZ" rel="nofollow noreferrer">https://play.tailwindcss.com/fecClyOaIZ</a></p>
  <p>Check only the 1st box. 2nd box is a demonstration of how it must really look in Dark Mode.</p>
  <p>In Dark Mode, the 1st box should look like dark blue with a black gradient (see 2nd box)</p>
  <h1>Light Mode (1st box looks correct in light mode)</h1>
  <p><img src="https://user-images.githubusercontent.com/16436270/127772617-cccbb7eb-49c1-48ff-b520-c518d557cba0.png" alt="light-mode" /></p>
  <h1>Dark Mode (1st box looks incorrect in dark mode. Should actually look like 2nd box)</h1>
  <p><img src="https://user-images.githubusercontent.com/16436270/127772626-5026b20a-788a-4b11-971d-ad8c93b56dda.png" alt="dark-mode" /></p>