[V4] BG-OPACITY

[NicolasCassunde]

How can I use bg-opacity in Tailwind CSS v4?

[wongjn]

You'd use the slash syntax, like bg-red-500/50.

[MadisoMelese]

Thank you Wongjn

[davidhellmann]

Is it possible to use it within CSS files? This isn't working.

.yo {
  border-right: 1px solid theme(--color-white / 10%);
  color: theme(--color-white / 20%);
}

[wongjn]

You could do:

.yo {
  border-right: 1px solid theme(colors.white / 10%);
  color: theme(colors.white / 20%);
}

https://play.tailwindcss.com/do3KHFRGuk

[davidhellmann]

Ah sure, makes sense not to use the CSS var. Thanks!

[adamwathan]

This should work now! We only added support for the theme function in alpha 20 but can see it working here:

https://play.tailwindcss.com/KhrjJjh4eR?file=css

[davidhellmann]

Also good! Thanks!