概要:有时一些初始化的样式不能满足使用。所以需要增加自定义配置,tailwind.config.js利用css选择器进行自定义选择器,同理可以自定义颜色、尺寸等。
自定义选择器
export default {
/*...*/
plugins: [
function ({ addVariant }) {
addVariant('c-li', '& > li');
addVariant('c-li-hover', '& > li:hover');
}
]
}
<template>
<div>
taillwindcss ul下面子元素li hover
<ul class="c-li-hover:font-black">
<li v-for="i in 10">{{ i }}</li>
</ul>
</div>
</template>
:::info 如果想要实现更多自定义选择器,参考CSS 选择器参考手册
:::
自定义颜色、字体尺寸等
/** @type {import('tailwindcss').Config} */
export default {
/*...*/
theme: {
colors: {
'white-0.8': 'rgba(255,255,255,0.8)'
},
extend: {
fontSize: {
'10xl': '25rem'
}
}
}
}
<div>
<ul class="text-10xl">
<li v-for="i in 10">{{ i }}</li>
</ul>
</div>