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