On gists

CSS Colors: color opacity (tailwind)

Tailwind CSS CSS CSS trick

index.html Raw #

<!--
https://ishadeed.com/article/css-relative-colors/#adjust-the-opacity-with-color-mix
-->

<!-- works only for color from config not defined like css variables -->

<!--v2 -->
<div class="ring-msp-red-default/30"></div>

<!--v3 -->
<div class="ring-msp-red-default ring-opacity-30"></div>

<!-- Hack if color is defined like css variable in config -->
'my-red': 'var(--primary-color)', // '#ba0c2f',

<!--v2 hack -->
does not exist

<!--v3 hack -->
ring-[color-mix(in_srgb,theme(colors.my-red)_50%,transparent)]

<!--v4 -->
no hack needed, v4 is functional (read doc)