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

巴特西

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

最新文章

热门文章