0:00 We are creating new themable colors, but it looks like in the process, we've broken support for color opacity. Check this out.

0:06 Here, we've got some default Tailwind colors showing at various degrees of color opacity, and you can see everything look as it should, but below here with the same code using our themable colors, things are obviously not working.

0:19 To understand why it's not working, we need to figure out how opacity is handled. If you think about it, there is no such thing in CSS as text opacity or background opacity. Tailwind CSS cleverly leverages CSS variables to compose this opacity within the color.

0:34 Let's hover a default color like bg-teal-600. You'll see that it sets a tw-bg-opacity variable set to 1, which is 100 percent opacity. Then the background color is set to that color, and it composes the opacity here in the alpha modifier.

0:51 That was the 100 percent color here. If you look at the 70 percent color, this is the same bg-teal-600 with opacity of 1, and then the bg-opacity-70 down there, can you guess what it does? All it does is set and redefine the tw-bg-opacity variable to .7 or 70 percent. Now when we apply this bg-teal-600, the opacity will be .7 or 70 percent.

1:17 This is the same mechanism that we've used with our colors, where we would redefine the color variable within the theme scope. Here, the opacity variable is redefined when we apply a bg-opacity class. This is super clever, and Tailwind CSS is full of these CSS variable composition techniques under the hood.

1:34 If I scroll down to the multi-theme colors that we've implemented, let's see what happen if I hover the primary background color. There is no tw-opacity variable. It just applies the CSS variable as the background color.

1:48 If I go to the 70-percent opacity here, the bg-opacity class here sets the tw-bg-opacity variable to .7, but the bg-primary-600 color doesn't use it at all. It just sets the background color to our CSS variable, so of course, nothing is going to change when this class is applied.

2:07 When we define colors as CSS variables, all we give Tailwind is this variable name, which is a placeholder that can contain any value, and Tailwind is not able to extract these R, G, and B channels, so we're going to have to do this manually.

2:20 In other terms, in our CSS file, instead of defining colors as hex value, we are going to want to convert these to R, G, and B channels. Not the RGB color, just the individual channels.

2:32 Your job in this challenge is to transform all of these hex values into R, G, B channels, literally a string of R, space, G, space, B. Once you've done that, in the config file, you will be able to compose these R, G, B channels with Tailwind's alpha-value, which is the exposed equivalent of these tw-opacity variables Tailwind has internally.

2:55 You'll be able to create an RGB function with the R, G, and B channels and then compose the alpha-values like this in each of these values. Good luck.