vue通過tailwindcss實現(xiàn)class動態(tài)綁定
更新時間：2023年07月19日 10:59:34 作者：永遠(yuǎn)不會太晚
這篇文章主要介紹了vue通過tailwindcss實現(xiàn)class動態(tài)綁定,文中給大家介紹了一些常用類名語法記錄，對vue動態(tài)綁定class相關(guān)知識感興趣的朋友一起看看吧
通過@tailwind 指令添加每一個 Tailwind 功能模塊的主 CSS 文件中
添加@layer components指定生成組合后的class類名，頁面中進(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頁面中正常綁定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
到此這篇關(guān)于vue結(jié)合tailwindcss：實現(xiàn)class動態(tài)綁定的文章就介紹到這了,更多相關(guān)vue動態(tài)綁定class內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
vue 動態(tài)添加class,三個以上的條件做判斷方式
這篇文章主要介紹了vue 動態(tài)添加class,三個以上的條件做判斷方式，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-11-11
利用webstrom調(diào)試Vue.js單頁面程序的方法教程
這篇文章主要給大家介紹了利用webstrom調(diào)試Vue.js單頁面程序的方法教程，文中介紹的非常詳細(xì)，對大家具有一定的參考學(xué)習(xí)價值，需要的朋友們下面跟著小編一起來學(xué)習(xí)學(xué)習(xí)吧。2017-06-06
Vue2 使用 Echarts 創(chuàng)建圖表實例代碼
本篇文章主要介紹了Vue2 使用 Echarts 創(chuàng)建圖表實例代碼，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-05-05
這篇文章主要給大家介紹了關(guān)于Vue攔截器原理以及詳細(xì)使用的相關(guān)資料,Vue攔截器通常用于在發(fā)送請求或響應(yīng)數(shù)據(jù)時對其進(jìn)行一些處理或修改,文中通過代碼示例介紹的非常詳細(xì),需要的朋友可以參考下2023-08-08
kiss-vuex 是一個非常簡單的語法糖類庫，這篇文章主要介紹了傻瓜式vuex語法糖kiss-vuex整理，非常具有實用價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2018-12-12
vue 生成gzip壓縮包部署到nginx服務(wù)器，如果我們把web網(wǎng)站資源進(jìn)行g(shù)zip壓縮后進(jìn)行傳輸給瀏覽器，這樣就能加快網(wǎng)站資源的加載速度，這篇文章主要介紹了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加上序號的相關(guān)資料,需要的朋友可以參考下2017-10-10
Vue3?$emit用法指南(含選項API、組合API及?setup?語法糖)
這篇文章主要介紹了Vue3?$emit用法指南,使用?emit，我們可以觸發(fā)事件并將數(shù)據(jù)傳遞到組件的層次結(jié)構(gòu)中，本文通過實例代碼給大家介紹的非常詳細(xì)，需要的朋友可以參考下2022-07-07