Multi-Style Tailwind Components 23 exercises

Extract Common Base Classes

In this challenge, you will start by extracting the common Tailwind classes from the hardcoded buttons with different variants for Impact, Size, and Shape.

Here’s an example of the code for the Impact variant:


Loading exercise


Instructor: 0:00 All right, here's your very first challenge. At the top here we have our hardcoded buttons we've just looked at with different variants for impact, size, and shape. Here's the code for it. You can see there is a lot of repeating tailwind classes throughout each button, which is not great.

0:17 What we want to do down here is extract the tailwind classes that are common to all button variants. We already have a button component in place. You can see we have props for impact, size, and shape with the different possible values. Here's a button component. You can see that currently it has no styling applied.

0:36 What you need to do in this challenge is take a look at the hardcore buttons file and identify and extract all tailwind classes that are common to all buttons and store them in this base classes variable. Then once you've done that, you can add your base classes variable here.

0:53 The buttons here are not going to look finished, but they should have some common traits that are coming from these common classes used on these buttons up here. Good luck.