[Tailwind] 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.

 

In tailwind.js: you need to add:

modules: {
   ...
  borderColors: ['responsive', 'hover', 'focus'],   
}

Then you able use focus: class 

 

          <section>
            <input type="text" class="p-2 mb-2 rounded-sm border-2 border-grey focus:border-red-dark" placeholder="Your name...">

            <input type="text" class="p-2 mb-2 rounded-sm border-2 border-grey focus:border-purple-dark" placeholder="Your name...">

            <input type="text" class="p-2 mb-2 rounded-sm border-2 border-grey focus:border-purple-dark" placeholder="Your name...">

          </section>