vue结合tailwindcss：实现class动态绑定

通过@tailwind 指令添加每一个 Tailwind 功能模块的主 CSS 文件中
添加@layer components指定生成组合后的class类名，页面中进行使用

@tailwind base;
@tailwind components;
@tailwind utilities;
...
@layer components {
    
    
  .box {
    
    
    @apply h-[472px] px-5 py-5 overflow-hidden transition-all;
  }
  .box-0 {
    
    
    @apply h-0 p-0;
  }
  .box-100 {
    
    
    @apply h-[calc(100%-2rem)];
  }
}

vue页面中正常绑定class

    <main
      class="w-[1880px] rounded-lg bg-[#ffffff] box"
      :class="boxStatus === 'top' ? 'box-100' : 'box0'">
      <div class="flex items-center">
         ...
      </div>
    </main>

一些常用类名语法记录

背景图片

bg-[url('~@assets/imgs/icon-card-title1.png')]

背景色

bg-[#1d87f0]

文字颜色

text-[#333333]

指定宽高

w-[1880px] h-[472px] 

transform:translate(-50%)

transform -translate-x-1/2

相对、绝对定位

relative absolute