egghead-logo-white
Learn to Code
Join egghead, unlock knowledge.

Want more egghead?

This lesson is for members. Join us? Get access to all 3,000+ tutorials + a community with expert developers around the world.

Unlock This Lesson
1×
10s
25s
Download in HD
Become a member
to unlock all features

Level Up!

Access all courses & lessons on egghead today and lock-in your price for life.

Build User Interfaces by Composing CSS Utility Classes with Tailwind

Build User Interfaces by Composing CSS Utility Classes with Tailwind

Autoplay

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

    Simon VrachliotisSimon Vrachliotis
    tailwindTailwind
    cssCSS

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

    Code

    Code

    Become a Member to view 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
    Discuss

    Discuss

    Transcript

    Transcript

    Instructor: 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.

    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.