Conditionally Style Elements with Tailwind Variants on Hover and Focus

Adam Wathan: [0:00] We've put together this nice responsive splash page, but one of the things we haven't handled yet is any sort of interactive states.

[0:07] For example, a hover state or a focus state on this button. You can see right now it's just boring and static.

[0:12] Doing something like changing the background color of this button on hover is actually really easy in Tailwind. I'll show you how it works.

[0:18] Let's head over to this button here, this link, and we'll go over to where we have the background color to find here as bg-indigo-500. If we wanted to change this background color on hover, all we have to do is prefix a regular background color utility with the word "hover."

[0:33] For example, I can write hover:bg-indigo-400, and now when we hover over this button, you can see that it gets lighter.

[0:40] What about focus styles? Let's focus this button, and you can see we get this browser default focus style.

[0:46] One of the things I don't like about the regular outline that's built into the browser is that it doesn't follow the curves in your border radius.

[0:53] You can see these little gaps in the corners, I think that looks really ugly. Why don't we remove this outline on focus and replace it with our own focus style that looks a little bit nicer?

[1:01] What I'm going to do is I'm going to come over here where we have this hover style, and I'm just going to write focus, just like we did with hover, but on focus, I want to set the outline to none.

[1:11] When we tab to this button to focus it, you can see you can't even tell that it's focused. For accessibility reasons, this is a really bad idea. Let's add our own focus styles by adding another class.

[1:22] I'm going to write focus. Then what I'm going to do is add a box shadow that's designed to look like an outline.

[1:28] Tailwind comes with this shadow outline class. If we go ahead and focus the button now, you can see we get this nice, subtle, blue focus ring that's implemented using a box shadow so it follows the curves of the button.

[1:41] What about active styles? Right now, if we go ahead and click this button, it doesn't change in any way. There's no mouse-down styles. A lot of the time, a button might get darker when you're pressing on it with the mouse.

[1:51] You might think to try something like active:bg-indigo-600 to make it darker. You'll see that even if we go ahead and click on this button, it still doesn't change.

[2:02] Tailwind does have support for active styles like this, but the classes are disabled out of the box to save on the default file size.

[2:09] We can enable the active variants for background color, for example, though, using our Tailwind config file. Let's head over to our tailwind.config.js file that we created in the very first lesson, and talk a little bit about how we can enable the active variant for background color utilities.

[2:25] You see on line five, here, we have this section called variants. Variants is a term that we use in Tailwind to refer to things like hover, focus, active, even responsive, those sm and md prefixes that we used. All those things are called variants in Tailwind.

[2:40] If we wanted to enable the active variant for the background color utility, all we'd have to do is add a key here called backgroundColor and then provide an array of all the variants that we want enabled.

[2:51] For example, we could add 'active' here. Now if we go and rebuild our CSS by running npm run build, you should see that when it's done, we do have active styles available now. I can click this and you can see that, yeah, it does get darker.

[3:04] You might have noticed though that we lost the hover styles. When I hover over the button, it doesn't change color anymore. That's because when you specify the variants to enable for specific utility in Tailwind, you need to make sure that you specify all of the variants, not just the extra ones that you want to enable.

[3:19] In our case, we want the responsive variants, the hover variants, the focus variants and the active variants.

[3:25] What I'm going to do is I'm going to add responsive to this list, hover, focus, and we'll put active last. The reason I want to have active last is because the order of these variants matters.

[3:37] Let's go ahead and rebuild our CSS and I'll show you what it means. If we run npm run build again, you'll see that, hopefully, we have our hover styles back and we also have our active styles. It changes when I click it.

[3:48] If I defined hover at last instead of active last, you'll see that when we rebuild our CSS that the active styles actually don't take effect because the hover styles are taking precedence. When hover is defined at the end, the hover styles defeat the active styles. It's hard for the button to be active if it's not also hovered.

[4:07] Since we want to active styles to defeat the hover styles, it's important that we put things in that order. Let's go ahead and rebuild our CSS here and double check that everything is working as expected.

[4:17] We can hover over the button and it gets lighter. We can click the button and it gets darker. You can see we have this focus ring that shows up whenever we tab to the button.

[4:26] What about combining responsive variants with hover variants, for example? Say we wanted to change the background color of this button on hover only on a specific screen size. We can totally do that and I'll show you how it works.

[4:39] Right now, we're on the small screen and when we hover over the button, it goes to bg-indigo-400. If we wanted to button to go to say bg-green-400 on hover but only on medium screens, we can combine these prefixes by doing md:hover:bg-green-400.

[4:56] Now, you'll see when we hover over this, it's indigo on small screens. Plus we get to medium screens, all of a sudden, it's green on hover. Pretty cool.

[5:05] One thing to keep in mind is that the hover variants and focus variants and stuff out of the box are not enabled for every single utility class, but they are enabled for the ones that you are likely to actually need them on.

[5:16] For example, we can't do something like hover:text-4xl, or something, because it's actually really uncommon to want to change the text size of something when you hover on it. You can see that when we hover over this button, no, the text size doesn't actually change.

[5:31] If you really did want to be able to do this, again, you can enable it in your Tailwind config file.

[5:36] Here, after background color, we could do something like for font size, let's make sure that we enabled the responsive variants and the hover variants. After we rebuild our CSS, we should see that when we hover over this button. Yeah, the text does get larger.

[5:49] You're totally having an escape patch here if necessary. Although, out of the box, these features are enabled in most of the places you would expect. For example, border colors, background color, text color, opacity, box shadow, the sorts of things that you usually change on hover and focus are already enabled by default.