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
Become a member
to unlock all features

Level Up!

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


    Control What Variations are Generated for Each Utility Class Module in Tailwind


    In this lesson, we learn how to control what utility classes are generated for each utility class module. We look at how we can “opt-in” for responsive variations, as well as different states like hover and focus.



    Become a Member to view code

    You must be a Pro 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




    Instructor: Tailwind offers utility classes to handle states like hover, focus, or group hover. These states are targeted with class name prefixes. These prefixed utility classes are not available out of the box. They are sort of an opt in mechanism with sensible defaults.

    The Tailwind config object has a modules property. For example, our focus state on the form fields here is changing the border color. To allow that to happen, you need to enable the focus variant on the border colors module.

    If I remove focus from the array for a second, you'll see that we have lost the focus state's styling. Turn it back on, and it's back. Same for the group hover styles here, the text colors module needs group hover in the list of variants. If we remove it, we lose the styles. Put it back, and it's back.