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

Already subscribed? Sign In

Autoplay

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

    Simon VrachliotisSimon Vrachliotis

    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.

    tailwindTailwind
    cssCSS
    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
    Transcript

    Transcript

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

    00:17 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.

    00:31 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.

    Discuss

    Discuss