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)
      },
    },
  },

2. 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!

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)
      },
    },
  },

2. 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!

• javascript
• css
• reactjs
• tailwind-css

• 1 Is it possible to upgrade to Tailwind CSS v3? It came out today and it supports box shadow color - You can customize like this tailwindcss./docs/box-shadow-color#customizing-your-theme – dance2die Commented Dec 10, 2021 at 5:08

2 Answers 2

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

You can give a custom shadow value as follows

<div class="shadow-[0_35px_60px_-15px_rgba(255,255,255,0.3)]">