title: How do I make white shadows in Tailwind CSS?
body: <p>I'm currently in the process of making a portfolio website with a light and dark mode. In light mode, the cards on the site have a shadow to create a sense of distance from the background. I want to make that same effect in dark mode, but I can't figure out how to make a white shadow in tailwind. I have looked up on the documentation, other questions on similar topics, and still no luck.</p>
  <p>You can find the full code <a href="https://github.com/bpyle02/portfolio" rel="nofollow noreferrer">here</a>.</p>
  <p>Here's what I've tried so far:</p>
  <ol>
  <li>I've tried defining my own custom shadow in tailwind.config.js using</li>
  </ol>
  <pre><code>theme: {
      extend: {
        boxShadow: {
          'dark-sm': '0 1px 2px 0 rgba(255, 255, 255, 0.05)', //White shadow
          blue: '0 1px 3px 0 rgba(0, 0, 255, 0.1), 0 1px 2px 0 rgba(0, 0, 255, 0.06)', //Blue shadow (for testing purposes)
        },
      },
    },
  </code></pre>
  <ol start="2">
  <li>I've also tried using the shadows keyword instead of boxShadow:</li>
  </ol>
  <pre><code>theme: {
      extend: {
        shadows: {
          'red': 'rgba(255, 0, 0, 0.1)', //Red shadow (for testing puposes)
        }
      },
    },
  </code></pre>
  <p>For example, when I call</p>
  <pre><code>&lt;div className = &quot;dark:shadow-dark-sm&quot;&gt;...&lt;/div&gt;
  </code></pre>
  <p>or</p>
  <pre><code>&lt;div className = &quot;dark:shadow-red&quot;&gt;...&lt;/div&gt;
  </code></pre>
  <p>nothing happens, even if I try it with a different color and not in dark mode.</p>
  <p>There was one time when I was able to change the color using the boxShadow method, but it doesn't work any more and I have no idea why. Any help would be appreciated!</p>