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 (
b) of the square has a length of
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.
That’s it. The scientific width for our banner width is
Unfortunately, there is no easy way to calculate square roots in CSS.
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.
That way, our utility will not only have a descriptive name, but its implementation in the config file will tell all the story!
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
margin, etc, or if you just want to augment the
I’ll choose to only extend the
tailwind.config.js file, I’ll extend the theme’s
width , and define a new value called
That will generate a
w-square-diagonal utility, which I think is kinda self-descriptive.
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
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:
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:
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!
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.
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.
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.