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