Multi-Style Tailwind Components 23 exercises

Create Styles for the Unique States

Let's start by adding the correct keys in the statusClasses object and update the styles accordingly.

We'll start by initializing the keys with empty strings:

const statusClasses: Record<Status, string> = {

Loading solution


Instructor: 0:00 I'll start by adding the correct keys in the statusClasses object. Since it's typed as a Status Record, I should be able to use Ctrl-space and auto-complete the keys. The first one we want is SELECTED. We'll just leave them as empty strings for now. The second one is DISABLED, third one will be VACANCY, then NO VACANCY, and finally the sneaky TODAY NO VACANCY.

0:25 Let's try port the styles over from this dynamicClasses object. The "selected" key quite obviously should be the SELECTED classes, and same with DISABLED, I can grab the ones from the "disabled" key. Now for VACANCY, I think we want the "hasAvailability" style, so I'll copy that here.

0:46 The big difference here is we're never going to have these styles clash or compose with other styles like "today." If we have NO VACANCY, this is what used to be called "candidate," so any day that is within the range. It's not in the past and it's not after six months.

1:02 The difference here is we're going to use these styles as literally a style saying, "There is no vacancy on this day that is within the range." Let's copy that here. TODAY NO VACANCY can be "today," but as we've seen, if today has vacancy, it actually is going to be having the VACANCY status.

1:23 That's where our naming conventions eliminates the possibility to have compound styles and multiple statuses at the same time. I'll paste that here, and with a bit of luck because as you've seen, everything is already wired up to work properly, let's go take a look at our reference tables.

1:40 You can see that everything is working properly. This is great. This tells us that our lookup status styles are covering every scenario properly, and so we can confidently try to implement the logic to determine which status a day should be in. Let's try to do that in the next challenge.