0
点赞
收藏
分享

微信扫一扫

tailwindcss之使用变体

ZGtheGreat 2021-09-21 阅读 49

尤其是添加自定义变体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">

举报

相关推荐

0 条评论