Multi-Style Tailwind Components 23 exercises

Porting Dynamic Styles to Specific States

Here we have a table for properly displaying the different day status styles for disabled, vacancy, no vacancy, selected, and today.


Loading exercise


0:00 With our new calendar day status in place, I've created a little table for visual reference of these different statuses. Let's take a look. You can see the table on the right correctly displays the styles for disabled, vacancy, no vacancy, selected for both any regular day or today.

0:15 Whereas the table on the left is missing a lot of these styles. All of them look very similar. Looking at the code, the reference table on the right has all the styles hardcoded for every single calendar day. You can see how they all look individually.

0:29 Then the table on the left, which is our challenge, here's what we've got. I've ported over the status that we've created in the previous lesson. We have our base classes in place as well as the dynamic classes that we had at the start of this section.

0:41 Instead of using these dynamic classes, what we want to do is create a new statusClasses object, which is going to use our status type that we've created. This might look familiar. We created this empty statusClasses object, typed as a status record.

0:57 Your job is to populate this object with the correct keys, and then port the styles over from these dynamic classes. If we scroll down here, you'll see that this table is trying to compose these statusClasses that do not exist yet with the base classes.

1:12 Without touching any of this markup, the challenge is to make this table on the left look exactly like this table on the right, which would confirm that we have set up the statusClasses lookup object correctly. Good luck!