tailwindcss之使用变体

尤其是增加自己设置变体important

变体是什么？

我个人认为应该是：对某一个样式增加额外的属性,伪类(:hover,:before,:after)

例如：font-size: 70px !important;

.btn:hover{color:red}

@media (min-width: 640px){/…/}

基础的变体有：responsive first last hover 等等

https://www.tailwindcss.cn/docs/configuring-variants#-1

如何使用呢

在tailwind.config.js中先配置：

// tailwind.config.jsmodule.exports = {  variants: {    extend: {          // 卸载extend对象里面的就是在这些样式的基础上增加额外的变体      backgroundColor: ['active'],      // ...      borderColor: ['focus-visible', 'first'],      // ...      textColor: ['visited'],    }  },}

覆盖的话就这样写在extend对象的外面：

// tailwind.config.jsmodule.exports = {  variants: {    // Only 'active' variants will be generated    backgroundColor: ['active'],  },}

自己设置变体如何使用呢？

以important为例：

先在plugin中配置

// tailwind.config.jsconst plugin = require('tailwindcss/plugin')module.exports = {  plugins: [    plugin(function({ addVariant }) {      addVariant('important', ({ container }) => {        container.walkRules(rule => {          rule.selector = `.\\!${rule.selector.slice(1)}`          rule.walkDecls(decl => {            decl.important = true          })        })      })    })  ]}

之后在variants对象启用特殊变体：

// tailwind.config.jsmodule.exports = {    ....    variants: {        extend: {          fontSize: ['important']        },    },    ....}

在HTML中应用变体：

<span class="iconfont text-white icon-gerenzhanghu !text-impt">