前言
隨著前端的發(fā)展铡原，對前端頁面的要求越來越高，而css的功能也越來越強大枯途，但對于寫css樣式來說卻是非常頭疼的的事忌怎。因為前端頁面的動畫要求以及頁面布局的精細管控，需要寫大量的css酪夷。為了解決寫css難得問題榴啸，目前已經(jīng)出來了許多css得解決方案，如Tailwind CSS晚岭，CSS in JS,sass,less等鸥印。
隨著Tailwind CSS的熱度越來越高，使用Tailwind CSS的項目也是越來越多坦报，但是真沒必要為了使用而使用库说。當(dāng)前流行的流行的前端框架里，React框架對CSS的處理片择，官方也沒有給出特別好的解決潜的，每個人寫樣式用到的解決方案也不同，Vue框架本身有著很好的CSS處理字管，在每一個Vue文件里寫的樣式,都可以是唯一的啰挪。
正文
這里只針對Vue里使用Tailwind CSS來說明信不，因為React里寫CSS確實沒有太統(tǒng)一又簡便的解決方案，想用什么都可以亡呵。
首先說Tailwind CSS確實是個好東西抽活，沒有必要質(zhì)疑大佬寫出來的東西（我是菜雞），每一個類名代表一個樣式锰什，這樣就不會產(chǎn)生樣式覆蓋以及權(quán)重不夠的問題下硕，并且當(dāng)項目足夠大時，所構(gòu)建的css包也是非常小的汁胆，同時在生產(chǎn)環(huán)境中還會自動刪除沒有使用到的CSS代碼卵牍。
就是這樣的Tailwind CSS我為什么不推薦在Vue里面使用呢。主要因為Vue中寫樣式很容易沦泌，上面寫好模板語法糊昙，定義好class，緊接著就可以在下面寫樣式谢谦，每一個組件內(nèi)，Vue的樣式都是獨立的，也就是說大多情況下在Vue里基本不會產(chǎn)生樣式覆蓋的問題千劈。
寫框架一定會有組件化思想祭刚，為了更好的模板復(fù)用。既然Tailwind CSS是為了復(fù)用樣式的墙牌，組件也同時是復(fù)用樣式和模板的涡驮，那為什么不在Vue中將組件拆分的更細一些呢？
個人寫項目的時候喜滨，會把項目中的button也進行二次封裝一遍捉捅，當(dāng)使用時，就只是用自己二次封裝的組件虽风，但凡設(shè)計圖有一些稍許的改變棒口，就只需要改一個組件就可以全局改變這個button組件无牵，也省去了很大的麻煩。 當(dāng)然這個事Tailwind CSS也可以實現(xiàn)厂抖，但是改完這個原子樣式和悦，會影響到所有使用這個原子樣式的內(nèi)容霞捡，可能會產(chǎn)生一些不必要的麻煩耕蝉。但是改組件內(nèi)的樣式只會修改這個組件崔梗，一定不會影響到其他內(nèi)容。
現(xiàn)在大多情況下都會使用到組件庫進行開發(fā)垒在，當(dāng)組件庫里的組件樣式不滿足我們的需求的時候蒜魄，我們需要進行樣式穿透進行更改組件庫組件的樣式。這個是Tailwind CSS做不到场躯，還是需要重新在style標(biāo)簽里寫一些樣式穿透的樣式來改變組件谈为。
如果有一些需求，可能是需要我們點擊一個按鈕踢关，需要改變一個元素的寬度或者高度伞鲫，在Vue中本身就很好實現(xiàn)，但是如果拿Tailwind CSS并不能直接實現(xiàn)签舞。還是需要借助Vue里的動態(tài)class才能完成秕脓，下面是直接使用Vue實現(xiàn)該需求。
<template>
<button @click="setWidth">改變元素寬度</button>
<div class="box"></div>
</template>
<script setup lang="ts">
//定義兩個變量 控制寬高度和顯示出現(xiàn)
const boxWidth = ref("500px");
const flag = ref(true);
const setWidth = () => {
//判斷一下是否顯示隱藏 然后給變量賦值寬高度
flag.value ? (boxWidth.value = "0px") : (boxWidth.value = "500px");
flag.value = !flag.value;
};
</script>
<style scoped lang="scss">
.box {
/*這里使用v-bind綁定boxWidth儒搭，動態(tài)設(shè)置寬高度*/
height: v-bind(boxWidth);
width: v-bind(boxWidth);
border: 1px solid #000;
border-radius: 10px;
background: radial-gradient(circle, #fff, #000);
transition: all 0.5s;
}
</style>
這里就可以動態(tài)改變元素的樣式了吠架，大多情況下，在Vue里都可以使用v-bind動態(tài)的對元素進行調(diào)整改變搂鲫。
其實這樣看來傍药，模板中還是挺干凈整潔的，但是如果完全使用Tailwind CSS來寫樣式的話魂仍。將是以下這種恐怖的畫面（官方提供的示例）
這種還只是寫樣式拐辽，就在模板中寫這么一大堆了（這里也許是html文件內(nèi)的，沒有特別標(biāo)注擦酌，但是Vue模板中寫應(yīng)該也差不多）薛训，還不包括元素本身的屬性，事件函數(shù)（prop）等都需要寫在模板上的參數(shù)仑氛。如果在一些比較復(fù)雜的項目中乙埃，也許最后的模板會非常龐大，極不易維護锯岖。
另外再說一下Tailwind CSS的下載量介袜，我們在npm上可以看到Tailwind CSS周下載量在600多萬左右
肯定會有人質(zhì)疑既然Tailwind CSS看上面的效果沒有太優(yōu)秀，但下載量還有這么高出吹，難道這么多程序員都不會選擇嗎遇伞？另外看一個數(shù)據(jù)，就是next.js的下載量捶牢。
看著也不少吧鸠珠，為什么要看next的下載量巍耗，它不僅支持Tailwind CSS，還因為當(dāng)創(chuàng)建一個新的next項目的時候渐排，會默認(rèn)選中要下載Tailwind CSS的選項炬太。
不說一定百分百都會有人選中吧，百分之五十會有的吧驯耻。那樣默認(rèn)選中下載Tailwind CSS的也有一半亲族，這樣周下載量提供的人數(shù)就已經(jīng)有200萬。那就再看一下react的周總下載量可缚。
react的周總下載量在1800萬左右霎迫，如果將Tailwind CSS的下載量，放到這里來看其實也并不算很多帘靡。
這里說了這么多數(shù)據(jù)只是說Tailwind CSS使用在react里可能解決的問題比較多知给，但是放眼整個react來說生態(tài)中也不是很明顯的。在Vue里使用Tailwind CSS其實會顯得很累贅描姚，并不是很好的選擇炼鞠。
結(jié)尾
你認(rèn)為在Vue里使用Tailwind CSS是在書流氓嗎？
寫的可能有些亂轰胁，感覺沒抓住重點谒主，非常抱歉，寫的時候腦子有點亂赃阀。不足的地方不要吝惜的批評就好了
作者：iceCode
鏈接：
https://juejin.cn/post/7295673054231052324
