opacity issues with tailwind bg #560

[areebbbb]

[vercel[bot]]

Someone is attempting to deploy a commit to the shadcn-pro Team on Vercel.

A member of the Team first needs to authorize it.

[jocarrd]

Interesting, please provide a brief description of the improvement so that I can understand it better. I think it's a great option to be able to give opacity using the following format if I'm not mistaken: border-[#ff0000/50]

[areebbbb]

yes, you are right it could be done that way but the problem is when we are using pre-defined variables and changing their opacity it runs into issues and in this project, we are using hsl format which is not compatible which what you are suggesting.

currently after update previously before update which would not work

[dan5py]

I still don't understand why not just use bg-[#ff0000]/50

[areebbbb]

it will work fine in this way but we are using hsl variables in this project either we have to use hex variable or for hsl we would need to change to legacy way of tailwind cause bg-primary/90 will not work with hsl variables

[dan5py]

So tell me if I got it right:

You want to use bg-primary/90 with this configuration:

/* globals.css */
@layer base {
  :root {
    --primary: 222.2 47.4% 11.2%;
  } 
}

/* tailwind.config.js*/
colors: {
        primary: {
          DEFAULT: "hsl(var(--primary))",
          foreground: "hsl(var(--primary-foreground))",
        },
}

[areebbbb]

you are right I want to use it with this configuration but the issue is that hsl takes opacity inside the brackets so if we are using it inside this way the opacity will not work

...
.hover\:bg-primary\/50:hover {
    background-color: hsl(var(--primary)) / 0.5;
}

...

...
.hover\:bg-primary\/50:hover {
    background-color: hsl(var(--primary) / 0.5);
}

...

it works this way

...
.hover\:bg-primary\/50:hover {
    background-color: hsl(var(--primary), 0.5);
}
...

[dan5py]

This is the modern hsl syntax (and it works just fine):

...
.hover\:bg-primary\/50:hover {
    background-color: hsl(var(--primary) / 0.5);
}
...

When you set the opacity with bg-primary/50, that's the generated code. Check it in this Tailwind Playground.

[areebbbb]

It is working in the playground but it is not working in my project I had to use the other but thanks

[samuelpetroline]

I'm having the exact same problem. What fixed for me was changing the tailwind.config.ts colors from hsl(var(--primary)) to hsla(var(--primary))

[areebbbb]

should we create a PR about it or something?

[mamlzy]

I'm having the exact same problem. What fixed for me was changing the tailwind.config.ts colors from hsl(var(--primary)) to hsla(var(--primary))

i was facing this bg opacity issue. but after using hsla(), it's fixed! now my background-color working fine with opacity