最新消息:雨落星辰是一个专注网站SEO优化、网站SEO诊断、搜索引擎研究、网络营销推广、网站策划运营及站长类的自媒体原创博客

javascript - How do I make white shadows in Tailwind CSS? - Stack Overflow

programmeradmin1浏览0评论

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!

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!

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
Add a ment  | 

2 Answers 2

Reset to default 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)]">

发布评论

评论列表(0)

  1. 暂无评论