To solidify your understanding of **match utilities**, which can be tricky to comprehend, let's do one more implementation.

We'll provide a range of values - `sm`, `md`, `lg`, and `xl` - and their corresponding pixel values.

If we take a look at the markup, we can see that the size `sm`, `lg`, and `xl` are present, as well as an arbitrary value to try out:

```html
<div class="flex flex-wrap gap-4">
  <div
    class="stripes h-16 w-20 rounded-lg bg-pink-600 stripes-white stripes-size-sm"
  ></div>
  <div class="stripes h-16 w-20 rounded-lg bg-pink-600 stripes-white"></div>
  <div
    class="stripes h-16 w-20 rounded-lg bg-pink-600 stripes-white stripes-size-lg"
  ></div>
  <div
    class="stripes h-16 w-20 rounded-lg bg-pink-600 stripes-white stripes-size-xl"
  ></div>
  <div
    class="stripes h-16 w-20 rounded-lg bg-pink-600 stripes-white stripes-size-[99px]"
  ></div>
</div>
```

The medium value doesn't have `size-md` because we'll be setting it to be the default value.

This is your final challenge!

Solidify your understanding of match utilities by assigning values to different size classes like sm, md, lg, and xl.

We'll define a CSS variable called `--stripes-size` and set its default value to `20px`:

```javascript
addBase({
  // Setting default stripe options
  ":root": {
    "--stripes-rgb": "0 0 0",
    "--stripes-angle": "-45deg",
    "--stripes-opacity": "1",
    "--stripes-size": "20px",
  },
  // ...
})
```

## Updating the Background Size

We'll then use this variable to update the background size twice. If we change the value to `40px`, we can see that the size is bigger but it's jumping because it's only translating by `20px`:

![](http://res.cloudinary.com/pro-tailwind/image/upload/v1675376781/tutorials/animated%20background%20stripes/a4fbb8571ab7f80d1cd89ccf962b5772.png)

This means we need to use the variable in more than one place, so we'll also update the translate distance.

```javascript
addBase({
  // Setting default stripe options
  ":root": {
    "--stripes-rgb": "0 0 0",
    "--stripes-angle": "-45deg",
    "--stripes-opacity": "1",
    "--stripes-size": "20px",
  },
  // Keyframe animations
  "@keyframes slide": {
    from: { transform: "translateX(0)" },
    to: { transform: "translateX(var(--stripes-size))" },
  },
})
```

## Fixing the Gap

Now it's not jumping anymore, but there's a gap:

![](http://res.cloudinary.com/pro-tailwind/image/upload/v1675376781/tutorials/animated%20background%20stripes/a054476c54a918cc690a51aed5ed23df.png)



We want to use the `var(--stripes-size)` instead of the hard-coded `20px` in the width calculation inside of `.stripes:before`:

```javascript
width: "calc(100% + var(--stripes-size))", 
```

When we save this, we should have a super fluid animation effect regardless of the size:

![](http://res.cloudinary.com/pro-tailwind/image/upload/v1675376781/tutorials/animated%20background%20stripes/9d40c530678b0fe1b71f5d87de9fd047.png)

## Generating Dynamic Utility Classes

We'll use the `matchUtilities` generation of the size modifiers to pass in the name of the classes we want to generate, which is `stripes-size`.

Then, a function receives a value and returns the CSS or CSS in JS that redefines the `--stripes-size` CSS Variable to be that value:

```javascript
matchUtilities({
  "stripes-size": (value) => ({
    "--stripes-size": value,
  }),
})
```

Even without passing any dynamic list of values, the arbitrary value is already supported just by calling the `matchUtilities` function.

Finally, let's add the `values` object:

```javascript
matchUtilities(
  {
    "stripes-size": (value) => ({
      "--stripes-size": value,
    }),
  },
  {
    values: {
      sm: "12px",
      md: "20px",
      lg: "30px",
      xl: "40px",
    },
  }
)
```

Now we've defined small, medium, large, extra large, and even the wildly large arbitrary value:

![](http://res.cloudinary.com/pro-tailwind/image/upload/v1675376781/tutorials/animated%20background%20stripes/8eca262a5aed7f9d90f552f394666d0c.png)

## Customizing the User's Theme

If you wanted to let the user define these values in their theme, you could reach out for a specific namespace in your `theme` object. Instead of passing this object, we could call the `theme` function and pass the key `stripesSize`.

Right now it doesn't exist, so it's not going to generate any value except our arbitrary value.

But our plugin function that we call at the start can take a second argument, a `config` object. We can extend the user's theme directly from there. We could provide these default values via a `stripesSize` key where we would pass the values.

This would set these default values on the user's theme, and they would be able to extend that object or override it as they please:

```javascript
module.exports = plugin(
  function ({ addBase, addComponents, addUtilities, matchUtilities, theme }) {
    // ...
    // Support for sizes
    matchUtilities(
      {
        "stripes-size": (value) => ({
          "--stripes-size": value,
        }),
      },
      {
        values: theme("stripesSize"),
      }
    )
  },
  {
    // Customising the user's theme
    theme: {
      stripesSize: {
        sm: "12px",
        md: "20px",
        lg: "30px",
        xl: "40px",
      },
    },
  }
)
```

## Recap of the Plugin

Let's take a look back at our whole plugin. We are using `addBase`, `addComponents`, `addUtilities`, `matchUtilities`, and `theme` to generate CSS.

We use variables and keyframe animation in the base layer to generate our `stripes` component class, which has a linear gradient stacked with CSS variables. We then manually generate a few utilities.

For the more heavy lifting side of things, we use `matchUtilities` to generate dynamic utility classes on the fly based on the value object passed. We do the same for the size modifiers.

Use CSS variables to create a fluid animation effect with dynamic utility classes and size modifiers.

Create Fluid Animations with CSS Variables and Dynamic Utilities

Simon: [0:01] Our size modifier is once again going to update a CSS variable's value. This time, we're going to start by defining the CSS variable. We'll call it --stripes-size, unsurprisingly. For the default value, let's go with 20 pixels.  
  
[0:15] If we scroll down in our code, we want to change the backgroundSize here to consume this CSS variable two times, one for each 20 pixel, var --stripes-size. I'll copy that. Space and the same once again. Nothing should change, which means that it's working.  
  
[0:35] Now, if I was to change this to 40 pixels, you can see that the size is bigger, but there is a problem. It's jumping because it's only translating by 20 pixels, which is halfway of the repeated pattern, and then jumps back. This stripes-size variable should be used in more than one place. It should also be used here in the translate distance, var --stripes-size.  
  
[1:03] Now it's not jumping anymore, but it's revealing some gap here. Can you figure out what other place we need to update it too? I know you did. I know you figured that out. Well done. This is in the width calculation here, where we go 100 percent plus this hard-coded 20 pixel. Hard-coded no more. We want var --stripes-size.  
  
[1:25] Now, when I save this, we should have this super-fluid animation effect happening, regardless of the size. If we have 10 pixels, it works, although it's very tiny. If we have 70 pixels, it still works. That's great. Let's go back to 20 pixels.  
  
[1:43] Now we're going to implement our matchUtilities generation of the size modifiers, so matchUtilities. Hopefully, this time, if it didn't click before, it clicks. The first thing we'll pass is the name of the classes we want to generate. We want stripes-size.  
  
[2:03] We will have a function that receives a value and then returns some CSS or CSS-in-JS that redefines the --stripes-size CSS variable to be that value.  
  
[2:18] You can see something interesting. We haven't passed any values yet, but you can see that last one is already working with the arbitrary value. We haven't passed any dynamic list of values to iterate through, but it's already supporting the arbitrary value, just by calling the matchUtilities function, which is really cool.  
  
[2:37] Speaking of values, let's pass the values object. We have these values here. Let me paste that and turn that into JavaScript. Now we've defined small, medium, large, and extra large. Check this out. Small, medium, large, extra large, and arbitrary value, crazy large.  
  
[2:57] If you wanted to let the user define these values in the theme, you could reach out for a specific namespace in your theme object. Here, instead of passing this object, which I will cut to keep in my clipboard, we could pass theme. Let's call the theme key stripesSize.  
  
[3:14] Right now, it doesn't exist, so it's not going to generate any value except our arbitrary value, as you can see. Our whole plugin function here that we call at the start can take a second argument, which is right at the end, a config object.  
  
[3:29] We can extend the user's theme directly from there. We could provide these default values via a stripesSize key, where we would pass these values. This would set these default values on the user's theme. They would be able to extend that object or override it as they please.  
  
[3:48] Let's take a look back at our whole plugin. We are using addBase, Components, Utilities, matchUtilities, and theme to generate CSS variables and keyframe animation in the base layer, generate our stripes component class, which has a linear gradient stacked with CSS variables.  
  
[4:04] We then manually generate a few utilities. For the more heavy lifting side of things, we use matchUtilities to generate on-the-fly dynamic utility classes based on the value object path. We do the same for the size modifiers. That is really, really cool.

Final Match Utilities Implementation Challenge

0:00 Just to consolidate your understanding of matchUtilities, because it can be pretty hard to grasp sometimes, let's do another implementation to wrap this up. We're going to provide a series of values, small, medium, large, and xl. You have the pixel values here that you should pass.

0:14 If we look at the markup -- let me make that a bit smaller -- we have the size-sm, large, xl, and even an arbitrary value to try and test out. You can see the medium here does not have the size-md because we're going to set the default value to the medium value. This is your final challenge. Good luck.

Animations are a great way to add some delight to your web apps.

But the last thing you want to do is a half-baked animation that feels "cheap". This might have the opposite effect on your projects.

In this tutorial, we'll sweat the little details to create a perfectly looping, infinite stripes effect!

## What You’ll Build

You can see the animated stripe effect in the selected date button in the [Pro Tailwind Calendar App](https://calendar-app.protailwind.com/).





![](http://res.cloudinary.com/pro-tailwind/image/upload/v1675873914/tutorials/animated%20background%20stripes/animated-stripes.gif)



Along the way, you’ll deep dive into CSS linear gradients, keyframe animations, and more.

But there’s more to this tutorial than just the animation stuff!

You’ll also practice:

* Using **CSS variables** for organization, reusability, and overall maintenance
* Creating custom classes for Tailwind’s component and utility layers
* Writing plugins for dynamic style modification with the **Tailwind Plugin API**

## **An Exercise-Driven Tutorial**

This tutorial is split into several exercises. Each features a problem that encourages you to take an active, exploratory learning approach to find an exercise.

1. Watch and read the exercise introduction. Each problem contains an embedded editor with a starting point.
2. Try to solve the challenge on your own. **Struggle for a bit**.
3. Watch the solution, where I walk you through how I would tackle this challenge.

After this tutorial, you’ll be ready to add animation that makes for a better user experience while creating a better development experience.

Get started now!

In this tutorial you'll create an animated stripes effect by building a Tailwind CSS Plugin. Topics include CSS Variables, keyframes, context, and more!

In this tutorial we will learn how to create an animated background stripes effect using traditional CSS and convert it to a Tailwind plugin.

Introduction to Animated Background Stripes

0:00 Hey friend, in this tutorial, we're going to build a pretty cool animated background stripes effect that you can see in the Pro Tailwind calendar app, like here, on the selected calendar day, the selected time slot, and action buttons.

0:15 While we could do the whole implementation with arbitrary values, here we're going to write some traditional CSS to begin with. Eventually, we'll convert our CSS to a Tailwind plugin, which will let us leverage powerful APIs, like matchUtilities, to generate multiple modifier utility classes that will let us change things like the stripe's size, color, or opacity.

0:35 This should be a fun one. I think you'll learn a thing or two about CSS, CSS variables, and the Tailwind plugin API. Let's do this.

Create a seamless background pattern using linear gradients to define a series of sharp color stops. Angle and color can be adjusted to create stripe patterns.

Create Stripe Patterns with Linear Gradients

0:00 How should we approach this? If we look at this Figma representation of the background stripes, you can see the stripe patterns is consisting of very long, thin rectangles positioned side by side with equal spacing.

0:12 We're not going to, but we could have a series of divs with equal spacing. We would just need to create enough of them to fill the entire element. That would work, but yeah, let's not do that.

0:24 What we're trying to build here looks a lot like a background pattern. You know when you have a little tile that has some sort of pattern? Then you repeat it to the right. You repeat it to the bottom as well indefinitely. Together, these tiles seamlessly connect to make it look like a pattern.

0:40 Typically, these patterns use a small image. It turns out that linear gradients are one kind of image. What I'm saying is you can set the background-image CSS property to be a linear gradient. This is an excellent tool to create these stripes.

0:53 Let's do a very quick gradient "Hello, World!" We have this element. You can see it has a class of gradient-demo. I've prepared this class here. Let's create a background gradient. Like I mentioned, it goes on the background-image property. We'll call the linear-gradient function. Let's do it on multiple lines.

1:10 First, we want to pass a rotation or an angle. Let's go with zero degrees here. Then we'll have three color stops, yellow, orange, and red. It might look terrible, but let's go with that. You can see right now our gradient smoothly transitioned from yellow at the bottom to red at the top.

1:29 The default angle of zero degrees is bottom to top. If I change this to 45 degrees, you can see that now it goes from bottom left to top right. -90 degrees, I imagine, would go from right to left. Yeah.

1:44 Now, let's make these color stops sharp instead of smooth. Instead of just defining three colors that will equally spread, let's make the yellow go from percent to 33 percent. Then orange will peak straight up at 33 percent and go to 66 percent. When I save, you should see a sharp stop between yellow and orange.

2:05 Let's do the last one. 66 percent to 100 percent. Now we have our three sharp colors. Here's a secret for you. You can, on the first color, when it starts at zero percent, skip that. It will infer that it goes from the start to the first value. The last one, you can get rid of the 100 percent. If that's the last color, it will complete the rest of the spectrum. That's looking exactly the same.

2:28 Now, with a little bit of imagination, we could make the middle band more narrow. Let's go 45 to 55 and then maybe change the angle to -45 degrees. Let's make both the first and the last color red. You can see how now this starts to look like a little stripe, can't you?

2:48 I'm not going to reveal too many secrets. If you need to spend a little bit more time getting familiar with CSS gradients, do that now. Otherwise, let's jump into the challenge.

Create a diagonal black stripe pattern with a CSS linear gradient inside an element with a custom class called `stripes`. No need to be pixel perfect.

Create a seamless transition in your background pattern by using a linear-gradient and adjusting the first and last 5% to match the stripe color.

Create Seamless Background Patterns with CSS

0:00 We're going to create a linear gradient. As we've seen before, it's applied to the background image property. For the angle of our gradient, I'm going to go with -45 degrees. It's basically going to start from the bottom right and go to the top left.

0:14 We want our stripes to show the background color behind them. We're going to use a mix of transparent and black here in our color stops. Let's go with transparent from to, let's say, 45 percent. Then we'll go with black from 45 percent to 55 percent and, from there onwards, back to transparent from 55 percent all the way up. Let's save that.

0:36 It's sort of working, but right now, it's just one big stripe and not a repeated series of stripes. The next thing we need to do is define a background size to make this pattern repeat over and over. We'll go with 20 pixels and 20 pixels, so a square pattern. By default, it will repeat on the x- and y-axis.

0:54 We're getting closer, but, as you can see, there is this weird little dots here between each little segment. If I make the background size a bit bigger for now -- let's say 55 by 55 -- you can see this odd square corner shape here. To help you understand what's happening, I'll change this first color stop, this transparent from to 45 percent. I'll make it white.

1:15 This reveals nicely our square pattern, this 55 by 55. You can see that we start with white from the bottom right corner, which used to be transparent. It cuts across this band that goes from 45 to 55 percent.

1:30 Because we have that square shape, we actually want a little portion of our gradient at the start and also at the end to have the same color as the stripe. Because our black stripes have a thickness of 10 percent, from 45 to 55, we want to have 5 percent at the start and 5 percent at the end also black, to make a seamless transition from square to square in a repeated pattern.

1:53 Let's make that back to transparent. Instead of going from to 45 percent, we'll go from 5 percent to 45 percent. The first five percent will be black, from zero to five percent. Save that. You can see already that, on the top edge here, the stripe is pretty seamless.

2:09 Let's do the same for the end of the gradient. Instead of transparent 55 to 100, we'll go 55 to 95 percent and add the last 5 percent of black. Now, we have an absolutely seamless transition in our background pattern. I can change this back to 20 by 20. There we go. We have a really nice background striped pattern in place.

Generate a Stripe Pattern with a CSS Linear Gradient

0:00 We're going to start by writing some CSS. You can see we have this stripes class here. As it's mentioned, it's not a Tailwind class, but a custom one.

0:08 You can see here I've prepared this stripes selector. You're going to do your CSS right there.

0:13 Your first challenge will be to write a CSS linear gradient that implements diagonal and repeating black stripes inside this element here that has a class of stripes.

0:23 Here's an example of what it should look like in Figma. You don't have to be pixel perfect. The size and spacing between the stripes doesn't really matter. This is just for reference.

0:32 You want something looking a little bit like this inside that element.

0:37 Good luck.

To create a looping effect for our animated stripes we'll linearly translate them to the right by 20 pixels every second . 

Learn how to create an infinite repeating CSS keyframe animation that makes stripes slide to the right with a duration of one second.

Create a Sliding Stripes Animation with CSS Keyframes

0:00 Let's start by defining a CSS keyframe animation. We'll do that in the base layer, so @keyframes. We'll call the animation slide. It will go from, or the zero percent keyframe, its original position, so transform translateX zero. It will go to transform translateX 20 pixels.

0:23 Now, in our stripes class, we can define an animation. We will consume this slide keyframe animation. We want the duration to be one second. It should repeat infinitely. The easing should be linear. Let's save that.

0:37 Whoops. There's a problem. You can see that the whole element is animating. That's not what we want. We want the element to remain where it is and then the stripes inside of it slide to the right infinitely.

0:52 We need to update this code here and use a pseudo-element instead of the element itself. We will target stripes before, but that's going to break things. Let's add a few properties. First, we need the content property for the pseudo-element to show at all. Then we need to give it some dimensions. Let's create a stripes selector as well.

1:11 This will have a position of relative, which means that now our pseudo-element can have a position of absolute. We'll anchor it to top zero and right zero. I'll explain why in a second. We'll give it a height of 100 percent and a width of 100 percent. Even if that one's not correct, we're going to start with this. Hopefully, it illustrates why it's not correct.

1:35 Nice. We now have the stripes animating, but the actual element is not moving, which is what we want. Obviously, we don't want the stripes to stick out of here. There's also a problem on the left.

1:48 Let's start by fixing the overflow problem here. On the actual element here, I can add overflow hidden. That'll take care of this. As you can see, as the stripes travel to the right, they reveal this little gap here. This is why I said that the width 100 percent was not correct.

2:05 We actually need to increase that width a little bit. We're anchoring the positioning to the right. If we add some width, it will add it to the left. We're traveling by 20 pixels, so we can update the width to be...Let's use calc. It's going to be 100 percent plus 20 pixels. That should fix it perfectly. Look at that. This is looking great.

2:29 Let me remove the overflow hidden for a second to show you, so you can see that the width of the pseudo-element is 100 percent plus these 20 pixels. When it translates, it moves to the right by 20 pixels, which means it starts with an extra 20 and then stops right as it hits the edge. It's perfect. If you managed to get that one, well done.

Create a Looping Effect with Stripe Animation

0:00 Now that we have our stripes, it's time to animate them. What we want to do is have them translateX to the right by 20 pixels over a duration of one second. This should repeat over and over in a linear way.

0:13 Basically, all the stripes will slowly travel to the right and, technically, start again and again, but it will feel seamless, as it's a constant translate happening. This one's pretty tricky. Have fun with it. I'll show you the solution after that.

Update CSS to make text appear in front of animated stripes on a button element.

Create a stacking context to make child elements of a striped background appear on top of the stripes and make text more readable.

Create a Stacking Context to Make Text More Readable

0:00 All you need to do to make any child element appear on top of the stripes is target the children selector, so stripes > *, so any element which is a child of stripes. Here, we need to create a new stacking context. We could use position relative, but we'll be fancy here and use isolation isolate. This will explicitly create a new stacking context without any side effects.

0:22 Boom, you can see that now the text is in front of the stripe and therefore much more readable. This will only work for children elements, not the direct text node. If the button had just the text, you can see that that is not going to sit on top.

0:36 A little inconvenience is you always need to make sure that you have a wrapping element if you want something to appear on top of the stripes. In most cases that's going to be fine. If you have a button, it's good to know that you should wrap it in a span like that.

Make Text Appear in Front of Animated Stripes

0:00 Our fancy animated stripes have a little problem. I've changed the markup to be a button. It also has this class of stripes. You can see that the stripes are over the top of the child elements. We definitely don't want this. We kind of want the stripes to be in front of the background but behind the text here.

0:16 Your job is to update the CSS to make the text here appear in front of the stripes. Good luck.

Learn how to use negative z-index and isolation: isolate to move text to the front of stripes without having to wrap text in a span.

Move Text to the Front without Wrapping it in a Span

0:00 Hey. Simon from the future here. I just want to make a quick amendment to something we've just talked about. First of all, shout out to Timmy right here. A few days ago, I've asked on Twitter if there was a way to have the text in front of the stripes without having to wrap the text node in a span.

0:16 Timmy just now, after I finished recording the course, of course, talked about using negative z-index and then the isolate property. We use the isolate property in what I've just showed you, but we use it on the child element to make it go back on top. After seeing this tweet, I've just tried to update the code we've just built in the previous lesson. Sure enough, it works.

0:36 This is where we ended at. We have this isolation isolate property on all the children elements of the stripes container. In the previous lesson, I said that if the text wasn't wrapped in a span like this, the world would explode, and it would go back to behind the bars in prison.

0:55 Check this out. I'm going to copy the isolation isolate property in my clipboard and delete this selector here. Instead, we're going to add the isolation isolate property to the stripes class itself. Now, if I go in the before pseudo-element, I can add a negative z-index. Let's go with -1.

1:15 Ta-da. Look at this. The text is back in front. The isolation isolate property makes sure that the stripes here do not go behind the actual background of the stripes element. If I was to remove the isolation isolate property, you can see the stripes are now behind the background as well.

1:36 I think not needing to have to tell the user, "Hey, you should wrap a text node in the span just in case," is a really nice addition. Like I said, the next videos will go back to the old technique, but that's not affecting any of what we're doing next. Let's keep it going.

Learn how to create utility classes to modify the stripes in CSS, making them white and angled the opposite way.

Redefine CSS variables to update the color and angle of linear gradients, making them more powerful and reusable.

Redefine CSS Variables to Improve Linear Gradients

0:00 Before we write code, let's actually think about it. If we want to make the stripes white, we need to update the background-image linear-gradient here and change these from black to white. We want the exact same linear-gradient, but we just want to change the colors.

0:15 That feels a bit painful, to have to copy this whole block of CSS down here just to update the color and then the exact same thing for the reverse. We want all of that background gradient. We just want to change the angle here.

0:28 Instead of having triplicated linear-gradients in our CSS, what we're going to do is use CSS variables to supercharge this linear-gradient here and make it much more reusable. Let's scroll to the top, where we have our keyframe animations.

0:43 Before that, let's define some CSS variables for our stripes. It's like the default values here. I'll target the root selector. We'll define a first one called --stripes as a prefix. This one will be color. We'll define this, by default, to black. We'll have another CSS variable, --stripes-angle. The default will be what it's currently, which is -45deg.

1:10 Now, with those in place, I can update the linear-gradient here to use the angle here, var --stripes-angle. We can also update the three instances of the black color with var --stripes-color. Hopefully, everything remains the same. Yeah, it does. It still works. Now we have a way more powerful and reusable linear-gradient.

1:37 The really cool part is now all I need to do to update the color...I don't even have to write any CSS properties. We can just redefine the --stripes-color CSS variable to white. If I hit save, you can see that these two now become white. That's super-cool.

1:53 We don't write any CSS, technically. We just redefine the CSS variable's value. It's still using this exact same CSS here, but in that context, when the utility is applied, the color is updated to white. The same thing here. All we need to do is redefine the stripes-angle variable to 45 degrees instead of -45. Bang. How cool is that?

Create Utility Classes to Modify Stripe Appearance

0:00 In this lesson, we're going to create modifier utility classes that change the way the stripes look. We want stripes that can be white, and we also want stripes that are angled the other way so the lines go like this instead of how they do right now.

0:13 We have four different demo elements here. You can see new classes in there -- stripes-white and stripes-reverse -- which are the modifiers that we want to create. They don't exist yet, but the class is already in place.

0:25 At the bottom of the CSS file, I've created a new block for the utilities layer. These two classes are here ready to be populated.

0:32 Your challenge is to make this class make the stripes white, and make this class make the stripes reversed.

Add support for opacity modifiers using Tailwind's plugin API.

Leverage Tailwind's Plugin API for Opacity Modifier Support

0:00 Let's say that next we wanted to add support for opacity modifiers. We want to support all of Tailwind's opacity values. We want an opacity 90 percent, opacity 50 percent, 25 percent, 10, 5, etc.

0:13 We could make all of these modifiers manually, like we did for stripes-white and stripes-reverse, but I think at this point, we need a little bit more power. We should consider using something like the Tailwind plugin API. You know what? Let's build a Tailwind plugin.

Challenge yourself to port over the stripes CSS from our tailwind.css file into a custom Tailwind plugin.

Migrate CSS into a Tailwind plugin using the addBase, addComponents, and addUtilities functions.

Migrate the Stripes CSS into a JavaScript Tailwind Plugin

0:00 Let's start the migration of the CSS into this plugin. We want to migrate everything that we've created, so the keyframe animations, the CSS variable definitions, the stripes class, and the modifiers in the utilities layer.

0:14 We'll start with the base layer. We want to port all of that into our plugin. For this, we will need to use the addBase function provided by the plugin API. Here, we can call addBase, but we can't just paste the CSS syntax, because it's expecting CSS-in-JavaScript here.

0:32 Instead of doing the conversion manually, I'll use a tool called transform.tools. Here, on the left column, I will paste the CSS. You can see that immediately it's giving us a CSS-in-JavaScript version. We actually don't want the converted variable. We just want its contents here.

0:48 I'll copy this. Instead of the CSS here, I will paste that and hit save. That's the base layer. Technically, I should be able to delete the whole @layer base block here. Everything should still work. Yeah, it does, because it's now handled by the Tailwind plugin.

1:06 Next, we want to do the components layer, which is our stripes CSS. Once again, I will copy the entire content of the components block. This time, we will need to use the -- you guessed it -- addComponents function. Once again, it needs CSS-in-JavaScript. We will use this great little tool, copy that, and paste it here.

1:30 There's just one thing I'm not happy with. It's the background image. Instead of having this line break with a string, I want to use template tags here so we can have it on multiline, which makes it a little bit nicer to read. Bear with me for a second while I refactor the syntax here. I think we just have that one. We're good. Let's hit save. Yeah, that's much better.

1:53 Once again, we've defined the components layer CSS, which is the equivalent of all this. I'm pretty confident that I can get rid of the entire @layer components block, and things will still work.

2:06 You know the drill. We want to add the utilities now. I'm going to copy this, generate the CSS-in-JavaScript for it. At the top, I will reach for the addUtilities function. Down here, I'll call that, addUtilities. I will paste the CSS-in-JavaScript equivalent of our modifiers. Now, we can delete everything in the CSS file. Everything still works.

2:32 Now, let me prove that this is really coming from the plugin. In the tailwind.config file here, I will comment out the plugins array. Check this out. Nothing is working now, so it's all really coming from this plugin. Good job.

Transform Traditional CSS Into a Dynamic Tailwind Plugin

0:00 Your challenge here is to convert all the CSS we've written up to now into a Tailwind plugin. There's already a stripes-plugin file for you, which is where you can write your plugin. It's already required in the Tailwind config, so the plugin will start working as you create it.

0:14 Here's the plugin file. We are requiring the plugin function from Tailwind. Currently, it's calling that function but doing nothing. This is your job. Good luck.

Create opacity modifier utilities that work with Tailwind's opacity values using the match utilities function.

Learn how to use the matchUtilities function to create dynamic utility classes for opacity in Tailwind CSS.

Create Dynamic Opacity Utilities with Tailwind CSS

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.

Create Opacity Modifier Utilities

0:00 Now things are getting really interesting. We want to create opacity modifier utilities, but they should work with all of Tailwind's opacity values. You can see down here I have classes for opacity 75, 50, 25, for the black stripes and the white stripes. These classes currently don't exist. There's also more values to support.

0:19 Instead of doing it manually like we've done for the white and reverse, we'll need to do something a bit more dynamic. Instead of using addUtilities, this time we're going to use another function called matchUtilities. This one is way more powerful. It's kind of mind-bending at first, but once you get the hang of it, it's super-cool.

There are many places that you can go from the end of this tutorial! Let's explore those options.

Where to Go From Here

0:01 Congratulations. You've completed this tutorial. From here, there are many places that you could go. One thing you could do is convert our color modifier to use the matchUtilities API. Even without adding any values, you'd still have access to the arbitrary values, which lets you pass any color that you want.

0:16 If you don't like this RGB format that you have to pass, you could write a function that takes a hex color, for example, and then abstracts the R, G, and B channels for you. You could also imagine passing the entire Tailwind colors object. You've just got to make sure that the colors are flattened and you only keep the ones that are actual hex colors.

0:33 Another thing you could do is allow the users to set the default options for the stripes, so maybe if they want to make them white and XL by default. To do that, you could use the plugin.withOptions API that lets you pass options when you register the plugin

0:47 Finally, if you wanted to customize the stripes even more, you could add a modifier for the animation duration and maybe the direction as well, make them go backwards and slow or forward and really fast. I think there's plenty of opportunities to expand this plugin further and continue exploring.

1:04 I hope you enjoyed this tutorial. Thank you so much for your support. I will see you around. Bye.

Transcript

Final Match Utilities Implementation Challenge

Transcript