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

Question

I want to make a glow effect on the progress bar near the end like https://codepen.io/brundolf/pen/YWEgLJ

glow effect

I am using NProgress. This is the CSS used to create glow effect:

/* 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);
}

I converted it to Tailwind like:

/* 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;
}

But only box-shadow is remaining. Is there any way to convert a colored box-shadow?

I saw this answer suggest that it can work usign drop-shadow & filter. Can it?

If so, then how?

user_5650447 · Answer

Do you want to reuse this later on? If not, why would you even want to convert it to tailwind? Leave it in css.

Anyway, to make tailwind class you need to add this shadow to config, like that:

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

Use it like shadow-nprogress in the code.

Docs

user_10698741 · Answer

Now Tailwind supports colored box shadows since v3.0.

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

2 Answers