Conditionally Style Elements with Tailwind Variants on Hover and Focus

Share this video with your friends

Send Tweet

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.

Adi Nugroho
Adi Nugroho
~ 4 years ago

shadow-outline has been replaced by ring so focus:shadow-outline is now focus:ring in Tailwind 2.+

Steve
Steve
~ 4 years ago

This video is out of date on more than just the focus: Wh are you calling it fresh!?!

~ 3 years ago

What's the name of the browser that allows you to shift from one size to another on the right side of the screen?