Tailwind CSS 自定义样式规则

在rule 是自定义

rules:[
    [/^hc-(\d+)$/,match=>({height:`calc(100% - ${match[1]}px)`})],
    [/^wc-(\d+)$/,match=>({width:`calc(100% - ${match[1]}px)`})],
    [/^tablehc-(\d+)$/,match=>({height:`calc(100% - ${match[1]}px) !important`})],
    [/^textC-(\d+)$/,match=>({color:match[1]})],
    ['textC-primary',{color:'var(--el-color-primary)'}]],

在shortcuts 自定义样式类

  shortcuts:[{'panel-title':'pb-[10px] font-sans leading-[1.1] font-medium text-[20px] text-[#6379bb] border-b border-b-solid border-[var(--el-border-color-light)] mb-[10px] mt-0'},
  [/^tablehc-(\d+)$/,match=>`tablehc-${match[1]} custom-table`],
  {'mainPage-container':'p-[20px] flex flex-col'}],

在theme 定义主题

 theme: {
    colors: {
      primary: 'var(--el-color-primary)',
      primary_dark: 'var(--el-color-primary-light-5)'
    }
  },