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控制多行文字展开收起的实现示例（也叫控制文字展开隐藏），文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2019-10-10
elementUI+Springboot实现导出excel功能的全过程
这篇文章主要介绍了elementUI+Springboot实现导出excel功能,现在也对这个导出功能进行一个汇总整理写出来，结合实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下2022-09-09
这篇文章主要介绍了vue项目接口域名动态获取操作，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2020-08-08
组件是有name属性的,匹配的就是组件的name,下面这篇文章主要给大家介绍了关于vue中组件的name属性含义和用法的相关资料,文中通过实例代码介绍的非常详细,需要的朋友可以参考下2022-12-12
在 Vue.js 中,组件之间的数据传递是一个常见的需求,Vue 提供了多种方法来实现这一目标,包括 props、全局事件总线、消息的订阅与发布等,下面我们就来学习一下这些方法的具体实现吧2023-12-12
vue项目中常常会用到keepalive来作缓存,在应付基本要求上能够说很是方便,可是遇到同一个页面,根据条件不一样,分别缓存或者不缓存,就有些麻烦了,这篇文章主要给大家介绍了关于keep-alive如何清除缓存的相关资料,需要的朋友可以参考下2021-08-08
vite.config配置alias Error: ENOTEMPTY: director
这篇文章主要为大家介绍了vite.config配置alias时报错：Error: ENOTEMPTY: directory not empty, rmdir解决方法详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2023-06-06
详解Vue 中 extend 、component 、mixins 、extends 的区别
这篇文章主要介绍了Vue 中 extend 、component 、mixins 、extends 的区别,非常不错，具有参考借鉴价值，需要的朋友可以参考下2017-12-12
vue-cli 3.0 版本与3.0以下版本在搭建项目时的区别详解
这篇文章主要介绍了vue-cli 3.0 版本与3.0以下版本在搭建项目时的区别详解，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-12-12
Vue是一个流行的前端框架，许多web开发人员使用Vue来构建他们的应用程序。然而，正如任何其他框架一样，Vue也可能会发生错误。在这篇技术文章中，我们将探讨Vue常见的报错以及如何解决它们2023-03-03
最新评论