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.

For that reason, the next exercise that you will work on is to abstract away this magic value into a 

 utility class, which will let its name convey the intent of the class.

Since our container shape is a perfect square, we don’t need to do the complicated math above.

. So what we look for is the square root of 

That’s it. The scientific width for our banner width is 

Unfortunately, there is no easy way to calculate square roots in CSS.

But… it’s super easy with JavaScript!

I would be now perfectly comfortable to leave the 

 utility in the markup. I know I can explain the rationale to anyone.

But if you worry that your colleagues might get confused by this, you can also opt to create a new 

 utility class that has a more descriptive name.

Let’s do this in our Tailwind config, so we can leverage JavaScript to do the true calculation.

That way, our utility will not only have a descriptive name, but its implementation in the config file will tell all the story!

Up to you to decide if you want to extend the whole 

 utility, which I think is kinda self-descriptive.

 that number to a string, which is the value Type that Tailwind’s 

It still works, and let’s see what we get if we hover over our new class:

I think we can trim that precision down to two decimals, as we had originally.

Back in our Tailwind config, we can take our Math calculation and chain a 

Let’s look at the result in the HTML now:

We’ve just solved a seriously interesting challenge, and we got to use the Pythagorean Theorem in a CSS project - something you can’t say every day!

Another sip of water, and let’s complete our ribbon!

Meaningful Value Extraction

 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. 

 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. 

 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. 

 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. 

 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. 

 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. 

 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. 

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

 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.

 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.

Are you productive with Tailwind CSS but find your interfaces somewhat boring?

Do you shy away from building custom decorative elements that require a deep level of CSS knowledge?

If any of the above cases apply to you, check out this Pro Tailwind Tutorial!

In this exercise-driven tutorial, you will build a corner ribbon banner from scratch—step by step. You won't use magic numbers. Instead, you'll have a scientific explanation to support your approach!

Corner ribbon banners are great attention-seeking decorative UI elements. They're especially useful in a pricing section or highlighting a new product on an e-commerce store.

This was an essential decorative component when building the 

There are quite a few tricky technical bits to building those banners, though. But together, we’ll explore the creative complexities.

This tutorial is split into several exercises. Each features a 

 that encourages you to take an active, exploratory learning approach to find an 

To solve the problem and implement the solution:

 introduction. Each problem contains an embedded editor with a starting point.

Implement the solution (there may be more than one solution!)

 and see how I approach solving the exercise. I’ll explain in-depth the technique, trade-off, and my thought process.

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

Transcript

Meaningful Value Extraction

Transcript