How to lighten a color without using opacity?

[wuarmin]

Hey,
I want to lighten a color. I.e. this lightens the primary color, but with the help of opacity.

background-color: hsla(var(--p) / 0.3);

The problem with this approach is, that the element, for which I want to set the background color, must not become transparent under any circumstances.

Do you have hint?
Thanks

[saadeghi]

changing the opacity value of background color will make the background color transparent:

<div class="p-4 text-5xl bg-primary/50">😀</div>
<div class="p-4 text-5xl bg-primary/75">😀</div>
<div class="p-4 text-5xl bg-primary/100">😀</div>

Another way is to apply brightness-* class names but it changes the brightness for whole element (not only the background color)

<div class="p-4 text-5xl bg-primary brightness-50">😀</div>
<div class="p-4 text-5xl bg-primary brightness-75">😀</div>
<div class="p-4 text-5xl bg-primary brightness-100">😀</div>

The most practical way is to change the value of a CSS variable using Tailwind CSS arbitrary class names:

<!-- `259 94% 51%` is the primary color of light theme, but we can change it on the go -->
<div class="p-4 text-5xl bg-primary [--p:259_94%_51%]">😀</div>
<div class="p-4 text-5xl bg-primary [--p:259_94%_70%]">😀</div>
<div class="p-4 text-5xl bg-primary [--p:259_94%_80%]">😀</div>

See this example: https://play.tailwindcss.com/BzTkbXYNsZ

In the future, color-mix() function will make it easier to manipulate colors but currently, browsers are not supporting it.