Search code examples
javascriptcssreactjstailwind-css

How do I make white shadows in Tailwind CSS?

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.

You can find the full code here.

Here's what I've tried so far:

  1. I've tried defining my own custom shadow in tailwind.config.js using
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)
      },
    },
  },
  1. I've also tried using the shadows keyword instead of boxShadow:
theme: {
    extend: {
      shadows: {
        'red': 'rgba(255, 0, 0, 0.1)', //Red shadow (for testing puposes)
      }
    },
  },

For example, when I call

<div className = "dark:shadow-dark-sm">...</div>

or

<div className = "dark:shadow-red">...</div>

nothing happens, even if I try it with a different color and not in dark mode.

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!

Solution

  • Checkout the latest Tailwind CSS v3, it includes colored shadows. Reference link - https://tailwindcss.com/docs/box-shadow-color