Pro Tailwind

03. The `size` variant

🐇 TL;DR

  • We’ve got dynamic content happening 🎉
  • Let’s start implementing multi-style variants, starting with the size prop.

⬇️ Skip to the challenge

🐢 Background

We want to allow users to choose between three size options that affect the max-width our our modal: small, medium or large.

Here’s what those three sizes look like:

Small size

This is the small modal size - it has a max-width container of max-w-sm.

Medium size

This is the medium modal size, with a max-width container class of max-w-lg.

Large size

This is the large modal size - it has a max-width container of max-w-2xl.

A little bit of TypeScript to help us

In the Modal component, I’ve added a new size prop to the ModalProps type:

type ModalProps = {
  // ...
  size: 'small' | 'medium' | 'large'
}

There is also a new sizeClasses object, which we’ll use to organise our Tailwind classes for the various size variants.

As we’ve done before, this sizeClasses object is annotated with a TypeScript Record to help you provide the expected object keys:

const sizeClasses: Record<ModalProps['size'], string> = {}

You’ve got everything you need to succeed!

🏆 Your challenge 🏆

In the Gitpod workspace below:

  1. Populate the sizeClasses object below with the appropriate keys and the correct Tailwind classes as values.

  2. Update the Modal component markup so that it composes the right sizeClasses classes.

You will find more hints within the workspace.

✌️ Good luck!

Open in Gitpod →