Pro Tailwind

04. Composing all variant styles

🐇 TL;DR

  • This is taking shape!
  • Let’s repeat the process for the size and shape variants.

⬇️ Skip to the challenge


🐢 Background

Our buttons still look pretty average, but you can definitely see things taking shape.

Let’s apply the same reasoning to implement dynamic styles for the size and shape variant permutations.


🏆 Your challenge 🏆

In the Gitpod workspace below:

  1. Populate the sizeClasses and shapeClasses lookup objects, just like you did for the impact variants.

  2. If you’ve done everything right, the Button components in the page should look exactly like the hardcoded buttons above!


✌️ Good luck!

Open in Gitpod →