Using arbitrary color as rgba()

[WhitWaldo]

With the new 3.0 release, we can use arbitrary colors (hooray!) in the markup.

If I do something like bg-[#f03232], it correctly registers the background color as such, but I'm unable to do the same with an rgba notation. Doing something like bg-[rgba(240, 50, 50, 0.75] doesn't register as any color at all and I can't find any notes in the documentation that indicate this isn't allowed.

Is rgba notation allowed in arbitrary attributes?

[eliottchampault]

@WhitWaldo, with [email protected] you could do something like this bg-{color}-{variationNumber}/{opacity}. You can also do something like bg-[rgb(#,#,#)]/{opacity}.
Here is an example:
bg-orange-500/50 would apply an opacity 0.5 to your orange background-color.

Let me know if this helps.

E

[WhitWaldo]

Perfect - thank you!

[Slamik]

@WhitWaldo, with [email protected] you could do something like this bg-{color}-{variationNumber}/{opacity}. You can also do something like bg-[rgb(#,#,#)]/{opacity}. Here is an example: bg-orange-500/50 would apply an opacity 0.5 to your orange background-color.

Let me know if this helps.

E

Is it possible to do the same with var?
Ex. bg-[var(--main-color)]/50

[howard-repos]

@eliottchampault bg-[rgb(255, 50, 50)]/50 not working in my project. Did I miss something?

[eliottchampault]

Hey there, try with no spaces. bg-[rgb(255,50,50)]/50

This should work. Let me know. E

[howard-repos]

Thanks. That works.

[dy]

The joke is that esbuild and ostensibly other CSS processors format rgb(255,255,255) to rgb(255, 255, 255)

[adamsaparudin]

Correct code is using this bg-[rgb(255,50,50)]/[.10] mean background: rgba(255, 50, 50, 0.1)

[codenoobforreal]

@adamsaparudin your reply should be marked as answer too.bg-[rgb(255,50,50)]/50 work but bg-[rgb(255,50,50)]/5 doesn't.bg-[rgb(255,50,50)]/[.05] work!