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:
- 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)
},
},
},
- 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:
- 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)
},
},
},
- 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!
Share Improve this question edited Dec 10, 2021 at 2:50 Brandon Pyle asked Dec 10, 2021 at 1:39 Brandon PyleBrandon Pyle 3751 gold badge3 silver badges15 bronze badges 1- 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
Reset to default 2Checkout 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)]">