Conditionally Style Elements with Tailwind Variants on Hover and Focus

Tailwind has variants that you can use when you want to apply styles conditionally to elements. We will start off with the hover and focus variants.

One thing to note is that not all variants are available to you out of the box (e.g. the active variant) to save on file size when you get started with Tailwind. Additional variants can be configured to add functionality.

We'll finish the lesson by combining and adding custom Tailwind Variants.