在 Tailwind CSS 中使用彩色框阴影获得 NProgress 发光效果？

Question

我想在接近尾声的进度条上做一个发光效果，比如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?

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

如果是，那怎么办？

Answer 1

你想稍后重用这个吗？如果不是，您为什么还要将其转换为顺风？留在 css.

无论如何，为了顺风 class 你需要将这个影子添加到配置中，就像这样：

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

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

Docs

Answer 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>

在 Tailwind CSS 中使用彩色框阴影获得 NProgress 发光效果？

Use colored Box Shadow in Tailwind CSS for NProgress Glow effect?

html

css

tailwind-css