0:00 Let's add a comment here, opacity modifiers. Here, I'll use the matchUtilities function. You can see the signature here. That's kind of complex. The first thing we want to pass is a string, which is going to be the class name constructor.

0:14 Remember, we want to create stripes-opacity utility classes. Here, I can define the stripes-opacity key. Basically, the dynamic value will be added to that string. It will make things like stripes-opacity-40 or something like this.

0:29 For the value here, we'll have a function that grabs the value, which we'll define in a second. It's going to return a CSS-in-JavaScript object where we can use that value. The way we want to create these modifiers is exactly like we've done for the color and reverse. We want to redefine a CSS variable.

0:48 In our matchUtilities, we will redefine a CSS variable that doesn't exist yet, stripes-opacity. We'll set the value of that to the value that we receive in the function here. Let's pause for one second before we actually define what the value is. I want to create this stripes-opacity default value in the base layer here. I'll add this. The default will be a string of one, for 100 percent opacity. Nice.

1:17 Let's go back down to the matchUtilities definition. We're creating this stripes-opacity class constructor. For each value, we're going to set the stripes-opacity value to that value.

1:28 Now we need to pass a second parameter, which is where we can define the values that we want to pass here and iterate over. Because we want to support all of Tailwind's opacity values, what we want to pass here is theme.opacity.

1:43 To access the theme, we need to get one more thing from our plugin function, the theme function. It's not the theme object. It's the theme function that lets us grab things from the theme. Here, I can use the theme function and grab the opacity object.

2:00 I know that was a handful. Essentially, with matchUtilities, we define stripes-opacity classes, that for each value that we pass, it will create stripes-opacity dash the value and then set the CSS variable value to update the opacity. That's not going to work yet, but we should already be able to see the dynamic utilities generated.

2:23 If I go back in the HTML and I hover over stripes-opacity-75, you can see that yeah, it's defining the CSS variable correctly. However, all of the opacities are at 100 percent here. You might know why, but let me show you the cool thing here.

2:38 If I go control-space, you can see that all of Tailwind's opacity values are available here. That's what matchUtilities does. It allows us to iterate over some data, in our case, the theme opacity object, and then generate these dynamic utilities for each.

2:54 Let's go back to 25 on that one and figure out why everything is fully opaque. I'll tell you why. We're modifying the stripes-opacity CSS variable here, which defaults to one, but we're actually not using the stripes-opacity anywhere in our CSS. Right now, for the colors, we're just using the stripes-color CSS variable, which is either black or white.

3:20 We've got a bit of refactoring to do here. We need to support the alpha layer. We need to convert our colors to RGB colors. I'm going to keep the stripes-color variable name for the actual color, but this is going to be a computed value, which is going to compose the opacity and the...Not color. We're going to rename this to RGB.

3:45 As I save, I'm going to break a lot of things. What we want to do is redefine black to , which are the R, G, and B channels for the black color. Before I forget, let's go in the modifier down here and do the same. We're going to change this to stripes-rgb. White is 255 255 255.

4:05 Now, we don't have a stripes-color variable anymore. What we can do, inside our before pseudo-element here, we're going to create a new stripes-color variable right there. We'll define it here.

4:19 The value will be an RGB color that we're going to compose from that CSS variable that we've created, called stripes-rgb, and then slash var stripes-opacity. This needs to be wrapped in a string. Hopefully, you're following along. Check this out. Now the opacity is correctly represented. We have the full opacity, 75, 50, and 25.

4:47 Let me quickly recap what we've done. We've changed the stripes-color variable to stripes-rgb so we can define the R, G, and B channels. Then we have the stripes-opacity, which is the transparency layer. Together, we can create an RGB color, which is what we do right here.

5:04 In our backgroundImage linear-gradient, we consume that color, which contains the alpha transparency. That means that when we create all our opacity modifier utilities with matchUtilities, they are all supporting this alpha transparency correctly. Whoo. That was a handful.

5:25 Let me show you one really, really cool thing about this. Not only do we support all of Tailwind's opacity values...The one you're looking at is the black bottom right here. If I change to 10, you'll see it's very thin. We can also use arbitrary values. This could be .8 or .23334. This will generate the exact opacity that you are requesting, on demand, on the fly, with arbitrary values.

5:54 That's another thing that's great about matchUtilities, is it enables arbitrary values to be passed to the utilities that it generates. That is super-powerful. That was a long one, but I think there's a lot of value in this lesson.