vue通過tailwindcss實(shí)現(xiàn)class動(dòng)態(tài)綁定
更新時(shí)間：2023年07月19日 10:59:34 作者：永遠(yuǎn)不會(huì)太晚
這篇文章主要介紹了vue通過tailwindcss實(shí)現(xiàn)class動(dòng)態(tài)綁定,文中給大家介紹了一些常用類名語(yǔ)法記錄，對(duì)vue動(dòng)態(tài)綁定class相關(guān)知識(shí)感興趣的朋友一起看看吧
通過@tailwind 指令添加每一個(gè) Tailwind 功能模塊的主 CSS 文件中
添加@layer components指定生成組合后的class類名，頁(yè)面中進(jìn)行使用
@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頁(yè)面中正常綁定class
<main
class="w-[1880px] rounded-lg bg-[#ffffff] box"
:class="boxStatus === 'top' ? 'box-100' : 'box0'">
<div class="flex items-center">
...
</div>
</main>一些常用類名語(yǔ)法記錄
背景圖片
bg-[url('~@assets/imgs/icon-card-title1.png')]背景色
bg-[#1d87f0]
文字顏色
text-[#333333]
指定寬高
w-[1880px] h-[472px]
transform:translate(-50%)
transform -translate-x-1/2
相對(duì)、絕對(duì)定位
relative absolute
到此這篇關(guān)于vue結(jié)合tailwindcss：實(shí)現(xiàn)class動(dòng)態(tài)綁定的文章就介紹到這了,更多相關(guān)vue動(dòng)態(tài)綁定class內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
vue代理請(qǐng)求之Request?failed?with?status?code?404問題及解決
這篇文章主要介紹了vue代理請(qǐng)求之Request?failed?with?status?code?404問題及解決方案，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-07-07
這篇文章主要介紹了Vite的原理，Vite是一個(gè)更輕、更快的web應(yīng)用開發(fā)工具，面向現(xiàn)代瀏覽，Vite創(chuàng)建的項(xiàng)目是一個(gè)普通的Vue3應(yīng)用，相比基于Vue-cli創(chuàng)建的應(yīng)用少了很多配置文件和依賴，下面基于Vite相關(guān)資料內(nèi)容，需要的朋友可以參考一下2022-02-02
vuex2中使用mapGetters/mapActions報(bào)錯(cuò)的解決方法
這篇文章主要介紹了vuex2中使用mapGetters/mapActions報(bào)錯(cuò)解決方法 ,非常不錯(cuò)，具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2018-10-10
本文主要介紹了淺談Vue組件及組件的注冊(cè)方法，詳細(xì)的介紹了什么是組件，及其組件注冊(cè)的兩種方式(全局和局部)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2018-08-08
Vite使用unplugin-auto-import實(shí)現(xiàn)vue3中的自動(dòng)導(dǎo)入
本文主要介紹了Vite使用unplugin-auto-import實(shí)現(xiàn)vue3中的自動(dòng)導(dǎo)入,文中通過示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2024-06-06
這篇文章主要介紹了vue-cli-瀏覽器實(shí)現(xiàn)熱更新,最常用的是webpack-dev-server，它是一個(gè)小型的Node.js?Express服務(wù)器，它使用webpack-dev-middleware來服務(wù)于webpack的包，本文結(jié)合實(shí)例代碼介紹的非常詳細(xì)，需要的朋友參考下吧2024-03-03
本篇文章主要介紹了Vue 表單控件綁定的實(shí)現(xiàn)示例，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2017-08-08
在 Vue3 中,setup 函數(shù)是一個(gè)新引入的概念,它代替了之前版本中的 data、computed、methods 等選項(xiàng),用于設(shè)置組件的初始狀態(tài)和邏輯,本文將主要介紹Setup的基本用法和少量原理2024-02-02
在開發(fā)中,PDF預(yù)覽和交互功能是一個(gè)常見的需求,無(wú)論是管理系統(tǒng)、在線教育平臺(tái),還是企業(yè)內(nèi)部的知識(shí)庫(kù),能夠高效地展示和操作PDF文件都能極大地提升用戶體驗(yàn),本文將詳細(xì)介紹如何在Vue項(xiàng)目中實(shí)現(xiàn)pdf預(yù)覽功能,需要的朋友可以參考下2025-03-03
vue3+Ant-design-vue3+i18n實(shí)現(xiàn)多語(yǔ)言切換功能
這篇文章主要為大家詳細(xì)介紹了如何通過vue3+Ant-design-vue3+i18n實(shí)現(xiàn)多語(yǔ)言切換功能,文中的示例代碼講解詳細(xì),感興趣的小伙伴可以了解下2026-04-04