在 Tailwind CSS 中使用彩色框阴影来实现 NProgress Glow 效果？答案

【问题标题】：Use colored Box Shadow in Tailwind CSS for NProgress Glow effect?在 Tailwind CSS 中使用彩色框阴影来实现 NProgress Glow 效果？
【发布时间】：2021-10-01 13:07:32
【问题描述】：

我想像https://codepen.io/brundolf/pen/YWEgLJ这样在接近结尾的进度条上做一个发光效果

我正在使用NProgress。这是用于创建发光效果的 CSS：

/* Fancy blur effect */
#nprogress .peg {
  display: block;
  position: absolute;
  right: 0px;
  width: 100px;
  height: 100%;
  box-shadow: 0 0 10px #29d, 0 0 5px #29d;
  opacity: 1.0;
  transform: rotate(3deg) translate(0px, -4px);
}

我将它转换为 Tailwind，例如：

/* Fancy blur effect */
#nprogress .peg {
  box-shadow: 0 0 10px #29d, 0 0 5px #29d;
  @apply block absolute right-0 w-[100px] h-full opacity-100 rotate-3 translate-x-0 -translate-y-1;
}

但只剩下box-shadow。有什么方法可以转换彩色的box-shadow？

我看到this answer 建议它可以使用签名drop-shadow 和filter。可以吗？

如果是，那怎么办？

【问题讨论】：

标签： html css tailwind-css

【解决方案1】：

您想稍后重用它吗？如果不是，您为什么还要将其转换为顺风？将其保留在 css 中。

无论如何，要制作顺风类，您需要将此阴影添加到配置中，如下所示：

  // tailwind.config.js
  module.exports = {
    theme: {
      boxShadow: {
        "nprogress": "0 0 10px #29d, 0 0 5px #29d"
      }
    }
  }

像代码中的shadow-nprogress一样使用它。

Docs

【讨论】：

我认为有一种方法可以使用链接的答案。没有。我认为 drop-shadow 和 filters 可能是一个解决方案或一些 CSS 变量 var(--tw-shadow) 这似乎更有可能，但 Tailwind 的创建者表示它正在为 v3 工作。目前留在 CSS 中，因为它只是一次性的 :)

【解决方案2】：

现在 Tailwind 从 v3.0 开始支持 colored box shadows。

<script src="https://cdn.tailwindcss.com"></script>

<div class="m-10 w-20 h-20 bg-gray-100 shadow-lg shadow-blue-500/50">
</div>

<div class="m-10 w-20 h-20 bg-gray-100 shadow-lg shadow-[#29d]">
</div>

【讨论】：

是的，刚刚看到！投赞成票:)