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.

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

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.

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.

Animated Background Stripes Effect

Create a decorative background-color-split effect that lines up with a foreground card's side and main panels.

Recreate the background color split effect using CSS in this tutorial. Plan your approach by thinking in rectangles and visualizing the desired result.

Introduction to the Background Split Tutorial

0:00 Hey, what's up?

0:01 In this tutorial, we're going to recreate the background color split effect that you can see in the Pro Tailwind Calendar App.

0:10 You can see the background color split is aligned with the card split between the sidebar and the main panel.

0:17 Before we jump in and write some code, let's do some thinking about our approach. I like to recommend when solving CSS problems, to think in rectangles. Let's spend some time visualizing what we're trying to do.

Begin to train your mind to think in terms of rectangles by dividing UI into multiple vertical sections for better understanding.





Thinking About the UI as Rectangles

0:00 There are multiple ways to solve this challenge, but I think CSS Grid is going to work really well here. I mentioned thinking in rectangles in the introduction, so take a look at this Figma document.

0:10 Looking at this representation of our UI, if I was to break it down in areas of interest, I sort of see four vertical bends. The gutter space left of the card, the card's side panel, the card's main panel, and the gutter space on the right.

0:24 These bends spread across the whole height of the UI, see? Just thinking in rectangles and breaking down our UI like this is a great first step that gives us a ton of insight on how we can approach our solution, and it sounds to me like CSS Grid would be an excellent tool to handle all that.

0:39 Now, we're going to write some questionable arbitrary values directly in our HTML, so get ready for that. We might want to think about making an abstraction later at the CSS level or in the tailwind.config file, but if it's only used in one place...All right, let's get into it.

Create a responsive grid with Tailwind CSS that adapts to screen size by creating a four-column layout that switches to a vertical layout at a 480px breakpoint.

Achieving a Dynamic Four-Column Layout

0:00 We want a grid that always covers the full viewport, and we can do that with the position fixed, and inset-. We can't see it, but let's give it a color of bg-red-500, and you can see that the element is indeed covering the entire viewport.

0:15 We want to define this element as a grid, and we want this grid to have four columns, so I can add the grid-cols-4 class. Remember, we want the first column to be the left-hand side gutter space, then the side panel of the card, the main panel of the card, and finally, the right-hand side gutter space.

0:33 To start with, we'll just have four equal width columns, which is what we get with grid-cols-4. You can see it's going to repeat four times minmax(, 1fr).

0:43 Before our four columns appear, we need to create elements for these. The first one will be bg-cyan-400, second one will be bg-cyan-500, and then 600, and 700.

0:56 With that in place, you can see our four grid columns, and if I resize the browser, they will always be equal width, but check what happens to our card here. The side panel is on the left, the main on the right, but when we reach a specific breakpoint, the side panel will be on the top. This happens at this custom 480px min-width breakpoint.

1:16 We only want our background color split effect when the card is side-by-side, so we can have this vertical split.

1:21 What we're going to do is completely hide this entire block of HTML below the 480px breakpoint. I can add the class by default of hidden, and then switch to display grid at the min-480px breakpoint. Below that breakpoint, the bg-cyan-500 of the parent elements takes over, and when we reach the 480px breakpoint, you can see that our four column grid appears.

1:47 That's perfect, and we're ready to move on to the next lesson.

Split a Viewport into Four Columns

0:00 Your first challenge is to create a full screen grid that splits the viewport into four columns. For now, all four columns can have equal width, and give them a different color so it's going to help us visualize what's happening in the next steps.

Figure out how to replace the grid-cols-[] class with a custom arbitrary four column grid definition. Approximation is fine for now!

Aproximately Line up CSS Columns

0:00 Let me replace grid-cols-4 with an arbitrary value of 1fr repeated four times. This is going to give us the exact same result, but just to show you how fraction units work, if the last one was to be 3fr, you can see it's now occupying half the space of the viewport and think of it as we have six fractions available. One, two, three, and then four, five, six, since this one is three fraction units.

0:23 These fraction units are very helpful to determine width, based on what space is available.

0:29 Let's go back to 1fr everywhere. To start with, we'll use the most predictable width of the four columns, which is the side panel, which is the second column. We have this theme(width.56) value here, and we can use exactly that here in the second column definition. I'll reach for the theme and go for width.56 and hit save.

0:49 You can see that now the second column is matching the width of the side panel. If I had width.80, it would be bigger, just to show you that it works, so let's go back with 56. To be super clear, this would be the equivalent of using the value set by the w-56 class. You can see that is 224px. If I was setting the value to 224px, this would work just the same. Let's go back to the theme value.

1:16 The next width that we can define is the left-side and right-side gutter space. This will change based on the viewport size. Essentially, we want to allocate one fraction unit of the available space to these, like we've played with just before.

1:31 The first column here will stay with 1fr, and the last one as well, will stay with 1fr. That leaves us with the third column here, which represents the main panel. We'll work that out in the next lesson.

1:44 For now, let's try some random value. Let's try 200px. That's a bit too small. 400px. Oh, that's too big. What about 350? Oh, wow, look at this. It looks almost absolutely perfect. Now, you'll find out if I change the viewport size that things kind of break, but that was a pretty good estimation.

2:04 In the next lesson, we're going to work out the exact value that this third column should have to make everything work nicely.

Lining Up Grid Columns with the Card

0:00 We have a four-column full screen grid. That's a good start.

0:03 Right now, we're using grid-cols-4 to define our four columns. Obviously, the columns are not aligned with the card yet, and this is what we'll start working on in this lesson. Even if it's going to get a bit hairy and almost offensive to some, we'll do all our work directly in our HTML.

0:18 We're going to write an increasingly complex, arbitrary value class for our grid columns. We can replace the 4 here with square brackets, which allows us to declare any custom grid template columns value. You can already see this in action in our markup if I go down a bit.

0:33 Here, at the 480px mid-width breakpoint, we define grid template columns with grid-cols-, and then an arbitrary value. This represents the two panels of the card here. You can see we even use a value from the theme. Here we grab width.56. This is what defines this side panel width.

0:50 This class here gives us really good insights on some of Tailwind's superpowers that we can use to prototype our background color splits. We can use arbitrary values, we can pull the theme values directly in the HTML, and we can use fraction units for fluid width.

1:05 Your challenge is to replace this grid-cols-4 class with a custom, arbitrary four-column grid definition. You don't have to be too precise just yet. Approximation is fine for now. Don't worry about responsive adjustments, think in desktop only. All the hints are here in the HTML classes to give you information on what dimensions our grid columns should have.

1:25 Good luck.

Work out how to get precise column widths in CSS. Remember, the alignment may change at smaller viewport sizes.

Calculating the 3rd Column’s Width

0:00 Let's work out an exact pixel value that we can use for our main panel column here on desktop. I'll change the comment to s,ay "Main panel width calculation." We need to do some detective work to figure out the width of the card, and then deduct that space to calculate this one.

0:16 This is our card component, but you can see that the wrapper here sets a max width of 2XL. If I hover this class, you can see that it sets the max width to 672 pixels, so let's write that down to start with.

0:30 Then, we want to subtract from that the side panel width. That width is the width.56 and as we've seen in the previous lesson, that is 224 pixels. If we try to do 672 minus 224, we'll have a value of 448 pixels.

0:47 Let's try to replace our 350 pixels with 448, and that doesn't seem quite right. You can see that together, these side panel column and main panel columns are using more space than the card itself, and you might be able to figure out what's happening here.

1:03 You can see the card wrapper has this extra horizontal padding which comes from this PX-8 class, so the real width of the card is the values that we've calculated here, minus this padding gutter here on the left and on the right.

1:16 We have that PX-8 class here which sets padding left and right to 32 pixels, so in our calculation, we need to also subtract the padding 2 times 32 pixels or 64 pixels. The new value here will be 672 minus 224 minus 64, which is equal to 384 pixels.

1:38 Let's try update this. 384. Hit save, and boom! Now our grid columns are perfectly lined up with the card, and if I make the elements bigger, you can see that it works great. Now, we are not done yet.

1:52 You can see that if I make the viewport smaller, we will eventually hit a few problems where things get out of alignment, and we'll fix that in the next lessons.

Precisely Calculate Column Widths

0:00 We landed on the approximate value of 350 pixels for this third column, which as you've seen is not absolutely correct, and it's now time to work out the precise value for that column. You can do some math in your head or on paper to work it out. Again, all the hints are right there in the HTML.

Learn how to use the CSS calc() function and do the math to compute column widths.

CSS Calc() Function with Theme Values

0:00 Let's declare our math calculation we've done before in a calc function instead of this pixel value of 384 pixels. That's pretty cool that you can use calc functions inside an arbitrary value.

0:12 Just make sure you don't have any spaces in your expression, that would break things, but if you need a space, you can replace it with an underscore like so.

0:19 In our calc function, we'll be very expressive about what we're calculating, just like we did before in the previous lesson. We started with the width of the whole card, with max width 2XL, so in our calc let's add theme and reach for the max width scale, and drill down to the 2XL value.

0:36 If I save this, this is going to be way too big and break our design, but that's a good sign that it works. Next, we subtracted the side panel width, which is width 56, so we'll go minus and another theme function that goes and gets the width, that 56 value.

0:53 We should be a bit closer now. Yep, and you can see that the remaining space that we need to calculate is that padding around the card. That comes from this PX-8 class, so let's go minus one more time and reach for the theme, and this time the padding level 8.

1:09 This is not going to work, you'll see we still have half the padding left, because padding level 8 is applied on the left and on the right, so we need to subtract it two times. You'd think, "Well let's use padding 16 instead," which would work, but that makes the assumption that padding 16 is the double of padding 8.

1:28 It is in the default config, but the user may have changed that, so instead let's go back to padding 8, and here we'll wrap this in parentheses and we will multiply that by 2.

1:38 All right, so let's save. Yep, it still works. This arguably makes this class harder to read because it's longer, but at least we are explicit about how we landed on that third value.

1:49 We take the max width of 2XL, and then subtract the width of 56 and the padding 8x2. Our class is getting sort of crazy, and we're absolutely not done yet. The next thing we'll tackle is how to make things work properly when we get below a certain width between there and the initial breakpoint.

Compute Column Widths with the CSS calc() Function

0:00 Before we adjust our column width to work in smaller screens, let's make the value for our third column a bit more explicit and less magic.

0:07 Instead of just using a pixel value, we will use the CSS calc() function to explicitly communicate how we landed on that value. Instead of using pixel values, we'll reach for those theme values with Tailwind's theme function.

0:20 Good luck.

Learn to use the CSS minmax() function to pass a range for column widths. This allows you to avoid issues with alignment at smaller viewports. 

Creating Dynamic Column Widths Using the CSS minmax() Function

0:00 The MinMax CSS function takes two arguments. The first one represents the min value, and the second one the max value. Let's try and make the third column, this one, respect the actual size of the main panel by wrapping this crazy calc function here inside a MinMax function.

0:17 Here I will go MinMax, and make sure I close the parentheses right here, and we want the range to go from for the min value to the current calc function for the max value. Inside the MinMax here, the first parameter will be zero, and then comma, and we'll pass the calc as the second parameter. Let's save that.

0:36 It's hard to tell if it's working or not because we also have to fix the issue with the first and last column. If we look at the first column, you can see that at some point it completely disappears because 1FR, one fraction of the available space for it, becomes nothing, zero.

0:54 Here it completely disappears, but that's technically not right. Our card always has some padding on the side, on the left and the right, and so here we need to also use MinMax to make sure that we have at least the padding value for the minimum value, and then one fr if this happens to be bigger than the padding.8 value.

1:15 Let's try that for the first 1FR column, MinMax, and the second value will be one FR for the max value, and before that we will want, not zero this time, but theme, padding.8. Let's give it a try now.

1:31 Big screen, all good. Now, this column should have at least a width of padding.8 and not completely collapse. Yep, looks like it's working correctly. We can do the exact same for the last column, this one, wrap it in MinMax with the first value of theme, padding.8, and the second value of 1fr, and moment of truth.

1:56 Now the column should always stick perfectly to the card, no matter what the width of the viewport is. Let's try it out. Shrink, shrink, shrink, and check this out. It's working perfectly until the snap point at 480. Amazing.

Optimizing Column Alignment for Variable Viewport Widths

0:00 Everything's looking great on wider screens, but when resizing the viewport, things start going out of alignment, and it makes sense.

0:06 If we look at the third column, we're calculating its width based on the maxWidth value, and assuming that this value will always be at its max.

0:14 When I resize the viewport, you can see that clearly, that main panel's width is changing. Instead of defining the maxWidth value, what we want is anything between the max value and technically, . We want to pass a range instead of a fixed value, and we can do this with the CSS minmax() function.

0:32 Your challenge here is to wrap the columns with fluid width -- so that's every column except the second one -- inside a minmax function, so you can pass a range that covers all the possible values. For the second column, you can keep the theme width 56, because it's a constant width.

0:48 Good luck.

Do the last bit of cleanup for the project by combining the first and last two columns together with col-span-2 and setting background colors for both groups.

Cleanup The Code and Optionally Create Abstractions

0:00 Let's tackle step one first.

0:02 I'll scroll down to the four column divs. We only want to keep two of these, and because we already have the colors we want, I can put the 600 first, and the 500 second, and delete the other two.

0:12 If I save this, it's going to look a bit awkward. Essentially, we only have two columns now, and the second one here happens to blend with the cyan-500 background color that is applied on the top element up here. Believe me, if that was bg-cyan-600, you'd be able to see the second column here.

0:29 All right, so back to our divs. We want each of these to span across two columns, and so I can give both the class of col-span-2. Hit save, and voila. We have a perfect background split effect, working at absolutely any screen size, until the layout of the card switches to top-bottom, which is exactly what we want. Nice.

0:51 I can get rid of number one, and number two is optional. Me personally, even if this class looks absolutely horrendous, I would not create an abstraction, because right now we're only using it in one specific place, and it's very unlikely that we're going to use that again somewhere else. This will probably live in a background split component and tucked away, and I don't really care about how it looks.

1:13 If you were to reuse that, that's another story. I personally would leave it here but let me quickly do an abstraction at the CSS level to wrap up this tutorial.

1:22 I will cut this class here, and let's write a class that doesn't exist yet called background-split. You can see that now things look broken. The split is top-to-bottom, because we don't have any grid columns defined anymore, so we have a single column grid that stacks from top to bottom.

1:38 In our CSS file, let's create a new component class @layer components, and we will create this background-split class, and here I'll use @apply, and paste all of this. When I save this, the background split should be back in place.

1:54 Yep, it is.

Wrap Up the Project

0:00 All right. Now that we've got our columns working perfectly, let's wrap up this tutorial with some cleanup.

0:05 The first thing you need to do is combine the columns one and two together, and three and four together, using the col-span-2 class.

0:12 If I scroll down, you can see right here, we're using four elements, and we want to only use two of them. The combined first two columns can have the cyan-600 color, and then the other two can have cyan-500.

0:24 The next point is optional, and sort of an opinion, but if you're disgusted by this crazy class name here, you can abstract it away, either in your Tailwind config file or as a CSS class, in the CSS file.

The key thing this tutorial showed you was how to use minmax() and fr to control how columns occupy available space. Thanks for watching!

Outro to the Background Split Tutorial

0:00 You've reached the end of this tutorial. I hope you had fun going through it. This is not your typical use case for CSS Grid, but I got to say, it's working pretty well.

0:08 The key CSS Grid features here, in my opinion, are the minmax function and the fr units to allow columns to claim available space. Thank you so much for your support. Have a great day. Bye.

Background Split Alignment

An exercise-driven tutorial to learn the highly technical and creative aspects of building flexible Tailwind CSS components. 

Getting Started

0:00 Hello, and welcome to this ribbon banner tutorial. Step by step, we're going to build these pretty cool UI elements that can be used in many different scenarios, like, for example, on a pricing section or maybe to draw attention to a new product on an e-commerce store.

0:16 I've broken down the tutorial in a series of small challenges, and whenever you're ready, let's jump into the first one.

Ribbon Container Positioning

0:00 To place the square to the top-right of the card, we need to give it the position of absolutes. I'll give you the class. Then, let's go with top- and right-. As you can see, there's an issue. The square is positioned to the top-right of the entire view board.

0:14 We want to position it relatively to the card. Let's add the class of relative to the card container. Now, our square is positioned to the top-right of the card. We want a negative offset of .5rem.

0:27 Instead of top-, I'll go with -top, and here choose level two, which is .5rem, and the same, -right-2. Now the square is exactly where we want it to be.

0:00 We're going to start with a simple square that represents the container of our ribbon. Your job is to take this square, and then position it to the top-right of the card with a negative offset of .5rem. Something that looks a little bit like this.

Create Ribbon Banner Element

0:00 We're going to use an anchor tag element for the ribbon, so the banner can be clicked to take the user somewhere. Let's go with A. For the text, let's go with "My cool ribbon". Nice. 

0:11 We wanted to give these a background of amber-300, which is currently the color of the container. We want to reduce the container to be amber-100 only. Up here, let's change amber-300 to amber-100. 

0:23 In the anchor tag, let's give a class of bg-amber-300. Let's make the anchor behave as a block level element with display, block.

0:00 We've got the ribbon container in the right place. Now, let's create the actual ribbon element. We can see here in Figma I drew some imaginary rectangles. We have our container that we've just built.

0:09 Now, we're going to focus on that part. We're not going to do the rotation just yet. Let's start by having an element that sits at the top of our rectangle, like so.

Rotation and Alignment

0:00 The first thing we're going to do is give this anchor tag a width of w-40. That's going to help us visualize things a little bit better. Now the banner sticks out of the container square. That's on purpose so we can figure out where the edges should align.

0:14 Let's try rotate the banner. Then we'll try to do this bottom right edges alignment. I'll go with rotate. I think we can go rotate 45 degrees here. That's not looking quite like what we want just yet.

0:27 To be honest, when building this ribbon myself, I got stuck for quite a while trying to figure out a good way to rotate and position this element properly. I've tried magic numbers, flexbox, lots of things. I'll show the solution that worked great for me.

0:40 Let me remove the rotate-45 class for a second because that was one of the reasons why it got so complicated when I was prototyping this component. I was trying to position it while rotated. This really led to a lot of confusion. Let's position it first and then rotate it.

0:57 Let's try to line up these two bottom right edges, here and there, at the bottom of the container. The parent container, the square here, has a position of absolute. Inside of it, this element is a child.

1:10 If I give a class of absolute here, it will take its absolute parent, this element, as its own relative context, which means that I can position the element to the bottom right with bottom- and right-.

1:24 That's a great start. Now we can try rotate the element once again with rotate-45. We're still not quite there yet. If you look at how the element rotates, you might notice something. Let me change the value of the rotation. Let's go with rotate- to start with and then 3, 6, 12.

1:44 It looks like the rotation is happening right around the center of the element. Imagine if you had a pin and you put it right in the middle of this ribbon element. Then you took the edges and started moving them with your hands. It pivots around the center point. This is exactly what's happening because of the transform-origin property, which is set by default to center.

2:07 If you could take that pin away from the center of the element and place it anywhere you want it, where would you place it on the element to make the rotation happen like we want? Let's not actually put a real pin on our screen, please.

2:22 The bottom right of the element sounds like an ideal place to put that pin. We will put it right in the bottom right corner and then take the top left edge and pivot it around. If I type the word origin, you can see that we set it to origin-center. We have top, top-right, right, and bottom-right.

2:38 If I hit save, you might notice that now our bottom right corners are perfectly aligned. If I go through the rotation increments again with , 3, 6, 12, you can see that it's always right where it should be. If we go with 45, we have the perfect alignment that we were looking for.

0:00 We're going to work on rotating and positioning our banner correctly next. This is where those imaginary rectangles that we drew in Figma can come in handy. We've got a container here, and then our banner that we want to rotate. 

0:11 If we look at the outlines of these shapes, you can see that both shapes have the bottom-right corner meeting in the exact same spot, here. Here's where we're at code-wise. You're going to try to take this element, rotate it, and align bottom-right corners of both elements.

Precise Banner Width Calculation

0:00 The first thing we should do is move away from an absolute unit value like pixels and use something like a percentage-based value. Right now, we're using w-40, but look at what happens if I change the dimension of the container element to something like 48.

0:14 As you can see, the ribbon banner itself is not going to adapt to this, so let's go back to 32, and we're going to use a percentage-based value. I'll start with w-full, which is 100 percent. That's going to be too short, but now, if the container width changes, the ribbon width will remain proportional to the container. 

0:34 100 percent width is obviously not enough. What about 200 percent? We don't have that value out of the box, but we can use arbitrary values to go width 200 percent. Whoa, this is clearly too much now. It's breaking out of our view port. 

0:49 What about 150 percent? It's getting close. You might think that we can get away with this, especially because we're going to crop out the excess of the ribbon. Yeah, if we look at the figma file for a second, we can see that our banner rectangle here is being cropped to the area of the container. 

1:07 We'll eventually translate this in CSS by using overflow-hidden on the container. Let me show you that real quick. On the container element here, I'll add overflow-hidden. Eventually, this would not have a background color either. We just have it to see what happens now. 

1:23 Our text is still cropped, but if we also had a text-center class on the ribbon, you would likely get away with this. We're not going to settle for that here. We want to have the exact value, and we want to be able to explain why, which is the key part. While we need the overflow-hidden class eventually, I'll remove it for now. I'll bring back the background color of bg-amber-100. 

1:45 150 percent is too much. What about 140 percent? Ooh, it's getting really close. Let me open this in a browser so I can zoom in real close. You can see we're not quite there, but it's getting really close. Maybe 141 percent? Mm, that looks very, very close. 

2:05 What are we doing here? Magic numbers, [gasp] that's what we're doing here. To this, I say stop. [electronic stop sound] Let's figure out the real, logical value that our banner should have. Instead of nudging our width one percent at a time like we started doing, let's start thinking about what we're trying to measure here. 

2:22 Let's go back to drawing imaginary shapes in our figma file. Take a look at that shape here, a right-angled triangle to be precise. All of a sudden, it's pretty clear what we're trying to measure. We're measuring the length of a right-angled triangle's longest edge, which is also called the hypotenuse. 

2:39 You probably learned at some point about the Pythagorean theorem. That's pretty hard to say for me in English, and it's also probably been a long while since you used that theorem last. If you take a right-angled triangle where the longest edge is C, A^2 + B^2 = C^2. 

2:55 In our case, let's say the value of A was one and B was one as well. You can see the value of C would be approximately 1.41. Wait, remember the width we've used in our code? 141 percent. If our container's height and width were both 100 percent, the diagonal of that square would be roughly 141.42 percent. 

3:18 I can copy that value and use that here. You can see that now width is set with extreme precision. More importantly, we have an explanation for this value. We went from nudging our width bit by bit to having a scientific explanation for why we have an exact value with a theorem to back it up.

0:00 We've worked out the rotation and position of our banner. The next thing we want to figure out is what width it should have. Currently, our ribbon has a width of w-40. As you can see, it's not quite enough. It's a little bit too short.

0:11 What we want to try and avoid doing here is nudge the width until we find the right value using magic numbers. If you look at implementations of ribbons in the world, if you search for CSS ribbon, then look at most code examples, you will find that width set as a random value, something like 276 pixels, which is typically a magic number.

0:34 What you need to try to do is figure out the exact width the ribbon should have, but also be able to explain why you've chosen that number. Good luck.

Meaningful Value Extraction

0:00 We want to transform this arbitrary value here into a class called w-square-diagonal. Obviously, we broke the design since that doesn't exist yet, but let's work on that. Here's what we want the calculation to be doing. 

0:14 If we agree that both the height and the width of the container is one, the value of the diagonal, which is the square root of A^2 + B^2, is also the square root of 1^2 + 1^2. 1^2 is 1, so that value here is, in fact, the square root of 2. While it's pretty tricky to calculate the square root of a number in CSS, it's really easy to do with JavaScript. 

0:38 A good place to do this abstraction would be in a Tailwind config. Inside the config, I will extend the theme. We could consider extending the entire spacing object, but right now, this squared diagonal width we only want to set as a width. 

0:52 I'll open the width object and create a new square-diagonal key, and here we'll do some maths with JavaScript. I can get the square root of 2 with math.sqrt and pass the number 2. With that, we've created a new w-square-diagonal utility class, but it looks kind of broken. 

1:10 If we hover over that class to see what was generated, it generated a width of 1.41421356-blah-blah-blah pixels. We don't want pixels, and we don't want 1.41. We want 141. What we can do is multiply it by 100 and then convert this into a percentage value by adding a string of percent. 

1:30 Now, the entire value will be coerced into a string. You can see that the width works perfectly now. If I hover over the class, we have that width set correctly. Arguably, there's a few too many decimals here. Let's stick to just two decimals. 

1:45 To do so, we're going to take this math expression and run it through toFixed, which will let us define how many fraction digits we want. Here, we'll go with two. Now, we have this really tidy 141.42 percent set as the width of the w-square-diagonal utility class. 

2:03 I think we solved a pretty tricky problem here, and we've solved it in a really elegant manner.

0:00 We've worked out the exact width that our ribbon banner should have. We wrote an arbitrary value for that. Now, we know why we're using this value, but if someone else was to jump into this code base, that value, honestly, would feel magic.

0:13 For that reason, the next thing we're going to do is abstract away this magic value into a w-square-diagonal utility class, which will let its name convey the intent of the class.

Add Bespoke Ribbon Styles

0:00 To make the ribbon look nicer, I'll start by changing the text color a little bit. I'll use text ember, and let's go with something like 800 probably. It seems a bit light, but if we changed the font weights that might look better. 

0:14 Font, semi-bold. Yeah. That's nice. Let's make it uppercase. I probably want the text a bit smaller with textsm or even text extra-small. I'll increase the letter spacing with tracking. Let's go with wider. Nice. I also probably want to add some vertical padding, so I'll go with PY-2. 

0:37 That's a bit too much, so let's try PY-1. Actually, let's go with 1.5, which is in between. That's nice. Let me also remove this BG ember 100 class on the parents, so we have a better idea of what the ribbon actually looks like, and I think we can add a shadow as well. Nice. I'll go really subtle with shadow SM. That's great. 

0:58 One thing I notice here is the text is dangerously close to the edge of the card. What we could do is increase the size of the parents square. Perhaps instead of 32 Let's go with 36. That's better. This is why we have defined our width as a percentage-based value, so we can increase the container and everything follows along. 

1:17 By the way, our entire design here assumes that the container here is square and has a perfect aspect ratio of one by one. For example, if I had 36 in width, but the height was 24, you can see that everything is thrown out. 

1:29 One thing we can do instead of having to change both the width and height equally is remove one of them like the height, and use aspect ratio and use aspect square which is one by one. Defining the width only will dictate what size the ribbon is, and we only have to change one value for that. Let's go back to 36, which I think fits nicely. I'm pretty happy with these stars and ready to move along.

0:00 Great job. We're getting closer to having a really cool ribbon banner. Let's take it over the finish line. In this step, we're going to add some styles to the banner itself. There are no guidelines here. It's up to you to style it like you want. Maybe do some typographic styles, add some padding, etc. Let's make it nice. Just have fun with that one.

Create a Wraparound Effect

0:00 Step one is pretty easy. We've already done it before in this tutorial. I'll add a class of overflow-hidden, remembering the shape of that square remind the ribbon. This will crop out the elements. Immediately, this thing starts to look really cool. 

0:13 Next, I want to add darker elements behind the corners. We want one little square here and one little square there. If we look at the parent component, remember, we are offset by top-2 and right-2 negative. Technically, if we had a square of level 2 by level 2, which is eight pixel by eight pixel, it should fill this exact little gap here. 

0:37 Once again, the container here has a position of absolute. If I create a child element inside of it, it'll treat that container as its relative context. I have a div with a position of absolute, a height of 2, and a width of 2. Let's give it a bg-amber. The banner itself is 300, so let's go with 500. 

0:56 Look at this! Straight off the bat, it looks really good. If I zoom in in the browser, it looks exactly like what we want. Notice how this shape appears behind the ribbon, which is what we want. We didn't have to specify any index value. 

1:09 This is because the source order of the HTML already dictates that. If I had these elements after my anchor tag, the square would now appear above the banner, which completely kills the wrap-around illusion we're going for. Let's move that back up. 

1:23 Also, note that I did not have to specify top- and left- since it's the default, but I think we should actually do it to be more explicit -- top-, left-. Nothing's going to change, but now we have the blueprints to create the other dark spot on the bottom-right corner. As you can imagine, I'll change this to bottom- and right-. Boom, this by itself is already a perfectly acceptable ribbon. 

1:48 Let's maybe add some hover state as well to sell it even more. Here we have bg-amber-300. Perhaps on the hover, we could change this to bg-yellow-300, which is slightly different. It would give it this extra little element of attention when you hover over it. I can add this checkmark. 

2:06 Our last task is to round the ribbon corners. That might seem trickier than it actually is. You may think that you need to start using rounded corner on the bottom-right corner of the little shape there and top-left corner here, but remember we have this invisible container element here that has an overflow-hidden class. 

2:23 If we round the corners of this element, the cropping will respect the rounded corners. All I have to do is go in the parent container here and go rounded. Let's try lg to make it really obvious. You can see the rounded corners are definitely there. That's probably too much. I think just rounded here will do. It's still a bit too much, so even rounded-sm for small. Here, that's looking really good. 

2:50 There you have it. Let me remove these comments, and this is all of our code. In about 10 lines of HTML and CSS, we've created this really cool ribbon element that looks great and, as you can imagine, can be quite flexible. You can change the dimensions, the colors, the contents, and also think about changing the positioning. 

3:09 We're going to have one more bonus lesson where we're going to look at just that.

0:00 All right. Let's now create a wraparound effect to finish off our ribbon banner. We'll do this in three steps. First, we'll crop the ribbon to the container area, which is this element here, and then we'll add darker elements behind the corners and around those corners, to create this illusion that the ribbon wraps around. 

0:17 Looking at a design example, imagine a real ribbon wrapping around a piece of cardboard, and the light would come from up here. These parts here and there would be in the shade and therefore a bit darker, and also rounding the corners a little bit sells the effect even more. That's your task for this final challenge. Good luck.

BONUS: Add Multiple Style Options

0:00 Let me walk you through my thought process here. First thing I'll do is add a comment on this one, which is Top Right. I will duplicate everything, and this one is going to be Top Left. Right now, we have two elements exactly overlapping, so we don't see the difference, but let's start the migration to the top-left corner and see what sort of elements we have to change. 

0:22 The first thing we have to do is, instead of -right-2, I'm going to go -left-2 here. Here's the second ribbon showing up. Next, I think we should change the rotation. Down here, instead of rotate-45, I will go -rotate-45. With that, we have absolutely destroyed our component for the time being, but let's fix that. 

0:43 Remember, we put our pin on the bottom right here, which is down here, and our ribbon, which was up here like this, went [jjjooop], and how is like that. We need to change the pin from bottom-right to bottom-left. Instead of absolutely positioned to bottom and right-, once again, we want to change to bottom and left-. Nice. 

1:06 We can see so far a lot of the changes are just changing right to left. Finally, we want to fix up our dark shade spots here. The first one should go to bottom- and left-, and the second one should go from top- and right-. Just for fun, let's change all the instances of amber for this one to green, and perhaps the yellow on hover could be emerald. 

1:29 We'll also change the text. This one will say Top left, and we'll make it a bit smaller with w-, let's try 24. It might be a bit too small. Eh, that's all right. 

1:42 Let's do the process one more time, but hopefully, you're already noticing the sort of elements that need to change. This one will be -bottom-2 and -left-2. The rotation will go back to positive, rotate-45, but this time, the origin should be origin-top-left, I think, and so should the absolute positioning of top-, left-. Nice. 

2:04 Let's fix our darker shade, so top-, left-, and bottom-, right-. Let's change this one from green to purple, and the hover state will be violet. That's pretty good. This one can say Bottom left. We need to increase the size a little bit, so 28. 

2:24 Look at our ribbons. They look pretty cool. As you've noticed, switching the corner of the ribbon was pretty simple. There's not that many classes changing. We've noticed a pattern. It's mostly the top-left bottom-right positioning and rotate that changes and then the width and colors, of course. 

2:41 Now, we have our three blocks of HTML representing these three ribbons. We could stop there, but we may as well create a quick little component with some props.

0:00 You've made it. Congratulations. You've built a pretty cool ribbon banner element. With a little bit of extra work, we could turn this into a reasonable, flexible ribbon component. 

0:10 In this bonus challenge, what you have to do is duplicate the code for the ribbon, which is here, and create additional components. Make one go on the top-left corner and one go on the bottom-left corner. 

0:22 Doing so is going to expose what styles have to change from ribbon to ribbon. Hopefully, this will trigger some thinking about what options and parameters you would allow to pass through this ribbon component if you were to reuse it in multiple scenarios.

Free Tailwind Tutorials