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

???111

于 2018-04-11 21:18:00 发布

阅读量61

点赞数

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/Answer1215/p/8798809.html

本文介绍了如何在Tailwind CSS中高级定制实用工具类，包括响应式变化及悬停、聚焦状态下的样式调整。通过配置tailwind.js文件，可以轻松实现输入框在不同状态下的边框颜色变化。

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>