0

In a project built with tailwind & post-CSS, I'm trying to assign RGB values, to variables and in some cases, they need to be used with opacity, but if I use the new format, it's now shown in the editor via extensions. Is there another way to make it work?

I've tried various modifiers and samples, what is missing, what is the correct format?

Here is what I have tried so far;

:root{
    /*Does not work on browser*/
    --alternative: rgb(84, 35, 231) ;
    --btnAlternative: var(--alternative) / 50%;

    /*Does not work*/
    --alternative2: rgb(84, 35, 231);
    --btnAlternative2: rgb(from var(--alternative2) r g b / 50%);

    /*Works on browser but I can't see the color*/
    --alternative3: 84, 35, 231;
    --btnAlternative3: rgb(var(--alternative3) / 50%);

    /*Does not work*/
    --alternative4: rgb(84, 35, 231);
    --btnAlternative4: alpha (var(--alternative4), 50%);

    /*Does not work*/
    --alternative5: rgb(84, 35, 231);
    --btnAlternative5: rgba (var(--alternative5), 0.5);
}

And this is how editor reacts;

sample CSS code with color visualization

Using with @apply

Using with applying with custom modifier

P.S. It's not a duplicate of this question This is PostCSS that is SASS, as you can see in examples I've tried. The question is can the color preview feature and var with opacity be used together?

siniradam
  • 2,727
  • 26
  • 37
  • [Please don't post screenshots of text](https://meta.stackoverflow.com/a/285557/354577). They can't be searched or copied, or even consumed by users of adaptive technologies like screen readers. Instead, paste the code as text directly into your question. If you select it and click the `{}` button or Ctrl+K the code block will be indented by four spaces, which will cause it to be rendered as code. – ChrisGPT was on strike Oct 19 '22 at 21:12
  • @Chris Screenshot was meant to show editor behavior, didn't think that code might be needed to be copied. – siniradam Oct 20 '22 at 01:51

1 Answers1

0

It's not possible to add alpha to a color, but you could use the answer of this question: How do I apply opacity to a CSS color variable

Sifi_crafter
  • 99
  • 1
  • 7