Loading
Multi-Style Tailwind Components 23 exercises
Problem

Add Multiple Modal Sizes

In this challenge, we'll add support for a size prop to our modal component. We have three toggle buttons: small, medium, and large. Currently, they all display the same modal size.

![](http://res.cloudinary.com/pro-tailwind/image/upload/v1678997228/workshops/multi-style-tailwind-components/images-

Loading exercise

Transcript

0:00 In this challenge, we want to add support for a size prop for our modal components. This time we have three toggle buttons, small, medium, and large. Currently, they all display the same modal size.

0:10 Here's what the modal sizes should look like. The small size should use max width of small, the medium size, max width of large, and the large size, max width of 2XL.

0:20 In our modal component, we've added a new prop called Size which can receive small, medium, or large. Similarly to what we've done with the button Component, we have these size classes object here, which is typed as a record using the size prop.

0:33 Your job is to populate this object with the classes mentioned here so that our three models are displayed at the correct size. You know what to do. Good luck.