0:00 Let's start by converting the hex value to R, G, and B channels. Unless you want to do some base 16 math in your head, you can use an online tool for that or inside VS Code, there is this neat little extension called Hex to RGBA that I could use here. This will transform to a format which is not what we want, but it gets us halfway there.

0:20 Check this out, I'm going to select all of the hex colors and I will convert them to RGBA, all at once. Then, we actually don't want the RGB or RGBA function. All we want is a space separated string of R, G, and B. When I save this, this is going to break our design, because we actually don't have the composed color. We just have the channels for now.

0:43 Step two is to now update in our Tailwind config the way we consume these CSS variables. We only have that part. We want to wrap this in an RGB function and compose with the transparency alpha-value.

0:56 Once again, multi cursor to the rescue. This is a very good skill to have in this workshop. We're going to open the RGB function and let me close it at the end. RGB is going to be that part and we're going to compose that with the alpha-value provided by Tailwind. When I save this, we should have full support for opacity, which is fantastic.

1:18 If I inspect the bg-primary-600 class, you can see that now we are composing this tw-bg-opacity variable. Then, the background color is using this, applying our RGB individual channels within the CSS variable and composing that with the opacity variable, which is the alpha-value that we've used.