This Lesson is for Members

Subscribe today and get access to all lessons! Plus direct HD download for offline use, enhances transcripts, member comment forums, and iTunes "podcast" RSS feed. Level up your skills now!

Unlock This Lesson

Already subscribed? Sign In

Build User Interfaces by Composing CSS Utility Classes with Tailwind

Autoplay

Style Elements on hover and focus with Tailwind’s State Variants

Simon Vrachliotis

In this lesson, we learn how to target specific states of elements and apply styles only when those states are triggered.

Tailwind

CSS

Code

You must be a Member to view code

Access all courses and lessons, track your progress, gain confidence and expertise.

Become a Member
and unlock code for this lesson

orLog In

Transcript

Instructor: 00:00 Let's take a text link and a button. These look nice, but we should apply different styles on hover. In Tailwind, you can target hover states with the hover prefix followed by a colon. On hover, we want the text to be orange.

00:16 Let's do the same with the button. On hover, we want the button background to be black. Here we go. Let's style the focus state for our text link now. Let's give that a try. When I click on the link, the focus state styles are applied. When I click out, they are removed.