taillwindcss自定义配置

有时一些初始化的样式不能满足使用。所以增加自定义配置

自定义选择器

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>

如果想要实现更多自定义选择器，参考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>