Pro Tailwind

06. The `slideFrom` variant

🐇 TL;DR

  • We’ve got size and tone variants going now!
  • Let’s implement one more style variant with the slideFrom prop

⬇️ Skip to the challenge

🐢 Background

We want to bring one more customisation option for our Modal: the direction it slides from when appearing.

Here’s our slideFrom prop type:

type ModalProps = {
  // ...
  slideFrom: 'top' | 'right' | 'bottom' | 'left'
}

The Record annotation on the slideFromClasses object will help you figure out the shape of the styles lookup you should create.

🏆 Your challenge 🏆

In the Gitpod workspace below:

  1. Populate the slideFromClasses lookup object.

  2. Update the Modal code to make use of these dynamic slideFromClasses Tailwind utilities.

✌️ Good luck!

Open in Gitpod →