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

Meaningful Value Extraction

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 w-square-diagonal utility class, which will let its name convey the intent of the class.

Transcript

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.