Instructor: 0:00 To populate this slideFromClasses object, we need to figure out what elements we want to apply Tailwind classes to. Let's scroll down to the second transition child here, which is the Modal panel, and the SlideFrom concern lives in the enterFrom and enterTo attributes, specifically the translate classes here.

0:21 Y-8 to y- will slide from the bottom, but minus y-8 to will slide from the top. Then we can use translate-x utilities to slide from the left or right. Let's try implement these in our slideFromClasses object. Let's start with top, and remember here it's not a string, but we need an object with From and To values.

0:44 From, to slide from the top will be -translate-y-8, and the To property will be translate-y-. Then let's go clockwise with right. To slide in from the right, we need to start with translate-x-8 and go to translate-x- . Then we'll do bottom, From will be translate-y-8, To, translate-y-. Finally, for the left value, we'll go From -translate-x-8, To, translate-x-.

1:24 That should get us all sorted to coordinate our slideFrom dynamic classes. Let's go down back to the second transition child. For these two here, I'll select the two lines. We will use the cx function, and then we can delete this hardcoded class here.

1:45 Instead, for the enterFrom, we will use slideFromClasses and grab the slideFrom prop, but then we need to reach for the nested From property which will hold the starting point transition class, and I'll copy that part because the enterTo will do the same but reach for the To property.

2:05 If we've done things right, we should be able to verify the From top slides from the top, yep, From right, From bottom, and From left. It's working perfectly. Great job.