0:00 In this first section, we're going to work with a series of buttons. These buttons have multiple variants. You can see an Impact variant that changes the color or intensity of the button. We also have a Size variant and a Shape variant.

0:13 The way these buttons are currently implemented is not ideal. They're just hardcoded HTML button elements and you can see a lot of Tailwind classes repeated over and over. Instead of repeating the Tailwind classes on each button, we want to dynamically generate the right composition of Tailwind classes for any given variant combination.

0:31 Here's sort of how we want these button components to be used to generate the same buttons as the example we've just looked at. There are a few rules and gotchas around what you should and shouldn't do when working with Tailwind's just-in-time engine to make sure things work properly.

0:46 For example, you cannot construct dynamic classes, something like this. div class = bg- and then interpolate props.color. This will not work. In this workshop, we'll discover patterns and techniques that work around those just-in-time requirements.

1:01 Ready to jump into the first challenge? Let's go!