首页 > 网络编程 > JavaScript > javascript类库 > vue.js > vue动态绑定class

vue通过tailwindcss实现class动态绑定

2023-07-19 10:59:34 作者：永远不会太晚

这篇文章主要介绍了vue通过tailwindcss实现class动态绑定,文中给大家介绍了一些常用类名语法记录，对vue动态绑定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

到此这篇关于vue结合tailwindcss：实现class动态绑定的文章就介绍到这了,更多相关vue动态绑定class内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！