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内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
相关文章
这篇文章主要介绍了ant design pro中可控的筛选和排序实例，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2020-11-11
这篇文章主要介绍了Vue简单实现原理,结合实例形式详细分析了Vue实现原理与操作注意事项,需要的朋友可以参考下2020-05-05
这篇文章主要介绍了vue下拉菜单组件（含搜索）的实现代码，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-11-11
这篇文章主要介绍了vue项目是如何运行起来的，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-09-09
这篇文章主要为大家详细介绍了vue前后分离调起微信支付，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2019-07-07
这篇文章主要给大家介绍了关于Vue组件传参11种方式的相关资料,文中通过代码示例介绍的非常详细,对大家学习或者使用vue具有一定的参考借鉴价值,需要的朋友可以参考下2023-09-09
这篇文章主要给大家介绍了关于Vue中引入svg图标的两种方式，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2021-01-01
这篇文章主要介绍了vue移动端如何解决click事件延迟，封装tap等事件，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-03-03
本文主要介绍了elementUI el-radio 无法点击的问题解决，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2023-07-07
这篇文章主要介绍了Vue中对iframe实现keep alive无刷新的方法，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2019-07-07
最新评论