Tailwind css custom color in hsl with opacity does not work as intended

Issue

I am using Next.js with tailwind css config. In my global.css, I have this defined:

@layer base{
   --primary: 256, 92%, 63%, 1;
   --primary-foreground: 210 40% 98%;
}

And in my tailwind.config.js, I have this configuration:

extend: {
   colors: {
     primary: {
          DEFAULT: 'hsl(var(--primary))',
          foreground: 'hsl(var(--primary-foreground))',
        },
   }
}

So, I can use it in my component as follow:

<div className="min-h-[380px] rounded-2xl border-2 border-dashed border-primary/75">
...
</div>

However, the output looks really different, it's not the same color as the primary with lesser opacity, rather it looks more white. However, if I just hard code the hex version of the color, it just works:

<div className="min-h-[380px] rounded-2xl border-2 border-dashed border-[#784AF7]/75">
...
</div>

I am not sure why this is the case but I think I don't understand how hsl works.

If this post is answered elsewhere, please feel free to provide it as I did not really find anything closer to my problem.

Solution

I don't think tailwind is relevant here. Your --primary is not even remotely the same as your --primary-foreground

In HSL(hue, saturation, and lightness), if you want a colour which is lighter, you'd just increase your L value. However, it seems you want to decrease your opacity instead so you just provide an alpha value as the fourth parameter (see block 4). Although I would recommend just increasing the L value, if you have control over the actual colours as compared to changing alpha value (see block 5). I recommend this because, this will avoid issues you might have with seepage of colours from the background if the opacity is low enough (see block 6)

:root {
  --primary: 256, 92%, 63%, 1;
  --primary-foreground: 210 40% 98%;
  --reduced-op: 256, 92%, 63%, 0.75;
  --increased-light: 256, 92%, 75%, 1;
  --very-low-op: 256, 92%, 63%, 0.1;
}

body {
  background-color: skyblue;
}

.blocks {
  display: flex;
  gap: 1rem;
}

[class*="block-"] {
  height: 5rem;
  width: 5rem;
  background-color: hotpink;
}

.block-1 {
  background-color: hsl(var(--primary));
}

.block-2 {
  background-color: hsl(var(--primary-foreground));
}

.block-3 {
  background-color: #784AF7;
}

.block-4 {
  background-color: hsl(var(--reduced-op));
}

.block-5 {
  background-color: hsl(var(--increased-light));
}

.block-6 {
  background-color: hsl(var(--very-low-op));
}

<section class="blocks">
  <div class="block-1"></div>
  <div class="block-2"></div>
  <div class="block-3"></div>
  <div class="block-4"></div>
  <div class="block-5"></div>
  <div class="block-6"></div>
</section>

Answered By - rishi