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)'
    }
  },
©著作权归作者所有,转载或内容合作请联系作者
平台声明：文章内容（如有图片或视频亦包括在内）由作者上传并发布，文章内容仅代表作者本人观点，简书系信息发布平台，仅提供信息存储服务。

推荐阅读更多精彩内容