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内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
相关文章
这篇文章主要介绍了vue 动态添加class,三个以上的条件做判断方式，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2020-11-11
这篇文章主要给大家介绍了利用webstrom调试Vue.js单页面程序的方法教程，文中介绍的非常详细，对大家具有一定的参考学习价值，需要的朋友们下面跟着小编一起来学习学习吧。2017-06-06
本篇文章主要介绍了Vue2 使用 Echarts 创建图表实例代码，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2017-05-05
这篇文章主要给大家介绍了关于Vue拦截器原理以及详细使用的相关资料,Vue拦截器通常用于在发送请求或响应数据时对其进行一些处理或修改,文中通过代码示例介绍的非常详细,需要的朋友可以参考下2023-08-08
kiss-vuex 是一个非常简单的语法糖类库，这篇文章主要介绍了傻瓜式vuex语法糖kiss-vuex整理，非常具有实用价值，需要的朋友们下面随着小编来一起学习学习吧2018-12-12
vue 生成gzip压缩包部署到nginx服务器，如果我们把web网站资源进行gzip压缩后进行传输给浏览器，这样就能加快网站资源的加载速度，这篇文章主要介绍了vue生成gzip压缩包部署到nginx,需要的朋友可以参考下2022-12-12
这篇文章主要介绍了vue项目中如何添加枚举，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-09-09
这篇文章主要介绍了Vue 的 v-model用法实例，帮助大家更好的理解和使用vue，感兴趣的朋友可以了解下2020-11-11
使用vue的v-for生成table并给table加上序号的实例代码
这篇文章主要介绍了使用vue的v-for生成table并给table加上序号的相关资料,需要的朋友可以参考下2017-10-10
Vue3 $emit用法指南(含选项API、组合API及 setup 语法糖)
这篇文章主要介绍了Vue3 $emit用法指南,使用 emit，我们可以触发事件并将数据传递到组件的层次结构中，本文通过实例代码给大家介绍的非常详细，需要的朋友可以参考下2022-07-07
最新评论