Loading
Build a Flexible Ribbon Banner in Tailwind CSS Tutorial (10 exercises)
solution

Meaningful Value Extraction

Simplifying the calculation

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

If we agree that each side (a and b) of the square has a length of 1, the square root of a square + b square becomes simpler.

1 square remains 1. So what we look for is the square root of 1 + 1, which is the square root of 2.

Which is 1.41421356237

That’s it. The scientific width for our banner width is 100% times sqrt(2).

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

But… it’s super easy with JavaScript!

Documenting our scientific value

I would be now perfectly comfortable to leave the w-[141.42%] 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 custom 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!

Extending the width scale in the Tailwind config file

Up to you to decide if you want to extend the whole spacing scale (which affects multiple corePlugins such as width, padding, margin, etc, or if you just want to augment the width scale.

I’ll choose to only extend the width scale.

In the tailwind.config.js file, I’ll extend the theme’s width , and define a new value called square-diagonal:

That will generate a w-square-diagonal utility, which I think is kinda self-descriptive.

Let’s do some JavaScript math now

Math.sqrt(2) is how we get the square root of 2.

This will give us ~ 1.4142…, and we can multiply that by 100 to get the percentage value.

Adding a string of '%' at the end will coerce that number to a string, which is the value Type that Tailwind’s width corePlugin expects.

Let’s try using this new w-square-diagonal utility in our HTML:

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

w-square-diagonalLoading

Hmmmmm. That is very precise.

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 toFixed(2), to trim the number of decimals to two:

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

w-square-diagonal-2Loading

Beautiful!

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!

Transcript

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.