vue combined with tailwindcss: realize class dynamic binding

Add the @tailwind directive to the main CSS file of each Tailwind function module.
Add @layer components to specify the generated combined class name and use it on the page.

@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)];
  }
}

Normally bind class in vue page

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

Some common class name syntax records

Background picture

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

background color

bg-[#1d87f0]

text color

text-[#333333]

Specify width and height

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

transform:translate(-50%)

transform -translate-x-1/2

Relative, absolute positioning

relative absolute