尤其是添加自定義變體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.js

module.exports = {

  variants: {

    extend: {          // 卸載extend對象里面的就是在這些樣式的基礎上添加額外的變體

      backgroundColor: ['active'],

      // ...

      borderColor: ['focus-visible', 'first'],

      // ...

      textColor: ['visited'],

    }

  },

}

覆蓋的話就這樣寫在extend對象的外面：

// tailwind.config.js

module.exports = {

  variants: {

    // Only 'active' variants will be generated

    backgroundColor: ['active'],

  },

}

自定義變體如何使用呢？

以important為例：

先在plugin中配置

// tailwind.config.js

const 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.js

module.exports = {

    ....

    variants: {

        extend: {

          fontSize: ['important']

        },

    },

    ....

}

在HTML中應用變體：

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