0:00 You might take this for granted, but did you notice that we had the Tailwind IntelliSense extension working within our BaseClasses variable? You can see it right there, we've created these BaseClasses variables, where we store a series of Tailwind classes, and Tailwind IntelliSense is working.

0:14 We have these hover information panels, we can see the color swatch, and if I start typing something like dark text red, you can see we have the autocomplete suggestion working perfectly. This is not a lucky accident, I've opted for a naming convention here.

0:29 Check this out, if I change the name of the BaseClasses variable to BaseClass, all of the Tailwind IntelliSense goodness will vanish. I don't have any hover information, I've lost the color swatch, and if I type something, even if I press Ctrl space, I am left on my own.

0:45 If I bring it back to BaseClasses, immediately everything is back. That happens because I've customized the Tailwind IntelliSense extension options, as I'll show you right now. I'll use the comment palette to open the settings, and we'll choose the UI here, and search for Tailwind.

1:01 You can see the Tailwind CSS IntelliSense extension here, and we have this class attributes option, and you can see I've added this period star, classes, period star. Basically, this means that anything that has some characters, following by classes and then some characters, will be a scope where Tailwind IntelliSense should do its thing.

1:21 By default, the scope of the Tailwind IntelliSense is just class, class name and ng class to support React and Angular, but I've added this .classes naming convention, which means that I can kind of write on this naming convention to benefit from the Tailwind IntelliSense.

1:36 Right now, we don't have any IntelliSense goodness, but if I change the name of this object to thing classes, you bet, now Tailwind IntelliSense is working inside there, font, semibold, very cool. That's one of the ways you can extend the surface area where the Tailwind IntelliSense will help you.

1:53 If you want to go deeper with more control, there's another way to do it. Back in our Tailwind IntelliSense settings, there is another setting called experimental.classRegex. You can edit this in your settings.json config. This is kind of tricky. It takes an array of arrays and each array has two values.

2:09 The first one is the container that wraps the scope where you want the Tailwind IntelliSense to work. The second one is a class list matching pattern. Here, I've tried another approach where I could have this tw comment before and after something where I wanted to have access to Tailwind IntelliSense.

2:27 That's a nice opt-in strategy, but it does leave some strange comments inside your code. You can see I've also created support for a cx function that we'll use throughout these challenges. In this project, we have this cx function in a utils folder. I could have something like const other thing, a string of text green 300 text 4xl.

2:49 There's no IntelliSense happening here, but I can wrap this in a cx function and that will bring IntelliSense support once again. These are two ways to extend the surface area where Tailwind IntelliSense can help you. This is going to be very valuable for us in these challenges.

3:06 I've added these customizations in the root of this project in the vscode settings.json file. The support that we've just looked at should work for you out of the box from the next challenge onwards.