提供了编程的基础技术教程

zl程序教程

您现在的位置是：首页 >  其它

当前栏目

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

for in Class module Control are What each
2023-09-14 08:59:17 时间

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>

 

相关文章