前言
隨著前端的發(fā)展，對前端頁面的要求越來越高，而css的功能也越來越強(qiáng)大，但對于寫css樣式來說卻是非常頭疼的的事。因?yàn)榍岸隧撁娴膭?dòng)畫要求以及頁面布局的精細(xì)管控，需要寫大量的css。為了解決寫css難得問題，目前已經(jīng)出來了許多css得解決方案，如TAIlwind CSS，CSS in JS,sass,less等。
隨著Tailwind CSS的熱度越來越高，使用Tailwind CSS的項(xiàng)目也是越來越多，但是真沒必要為了使用而使用。當(dāng)前流行的流行的前端框架里，React框架對CSS的處理，官方也沒有給出特別好的解決，每個(gè)人寫樣式用到的解決方案也不同，Vue框架本身有著很好的CSS處理，在每一個(gè)Vue文件里寫的樣式,都可以是唯一的。
正文
這里只針對Vue里使用Tailwind CSS來說明，因?yàn)镽eact里寫CSS確實(shí)沒有太統(tǒng)一又簡便的解決方案，想用什么都可以。
首先說Tailwind CSS確實(shí)是個(gè)好東西，沒有必要質(zhì)疑大佬寫出來的東西（我是菜雞），每一個(gè)類名代表一個(gè)樣式，這樣就不會(huì)產(chǎn)生樣式覆蓋以及權(quán)重不夠的問題，并且當(dāng)項(xiàng)目足夠大時(shí)，所構(gòu)建的css包也是非常小的，同時(shí)在生產(chǎn)環(huán)境中還會(huì)自動(dòng)刪除沒有使用到的CSS代碼。
就是這樣的Tailwind CSS我為什么不推薦在Vue里面使用呢。主要因?yàn)閂ue中寫樣式很容易，上面寫好模板語法，定義好class，緊接著就可以在下面寫樣式，每一個(gè)組件內(nèi)，Vue的樣式都是獨(dú)立的，也就是說大多情況下在Vue里基本不會(huì)產(chǎn)生樣式覆蓋的問題。
寫框架一定會(huì)有組件化思想，為了更好的模板復(fù)用。既然Tailwind CSS是為了復(fù)用樣式的，組件也同時(shí)是復(fù)用樣式和模板的，那為什么不在Vue中將組件拆分的更細(xì)一些呢？
個(gè)人寫項(xiàng)目的時(shí)候，會(huì)把項(xiàng)目中的button也進(jìn)行二次封裝一遍，當(dāng)使用時(shí)，就只是用自己二次封裝的組件，但凡設(shè)計(jì)圖有一些稍許的改變，就只需要改一個(gè)組件就可以全局改變這個(gè)button組件，也省去了很大的麻煩。 當(dāng)然這個(gè)事Tailwind CSS也可以實(shí)現(xiàn)，但是改完這個(gè)原子樣式，會(huì)影響到所有使用這個(gè)原子樣式的內(nèi)容，可能會(huì)產(chǎn)生一些不必要的麻煩。但是改組件內(nèi)的樣式只會(huì)修改這個(gè)組件，一定不會(huì)影響到其他內(nèi)容。
現(xiàn)在大多情況下都會(huì)使用到組件庫進(jìn)行開發(fā)，當(dāng)組件庫里的組件樣式不滿足我們的需求的時(shí)候，我們需要進(jìn)行樣式穿透進(jìn)行更改組件庫組件的樣式。這個(gè)是Tailwind CSS做不到，還是需要重新在style標(biāo)簽里寫一些樣式穿透的樣式來改變組件。
如果有一些需求，可能是需要我們點(diǎn)擊一個(gè)按鈕，需要改變一個(gè)元素的寬度或者高度，在Vue中本身就很好實(shí)現(xiàn)，但是如果拿Tailwind CSS并不能直接實(shí)現(xiàn)。還是需要借助Vue里的動(dòng)態(tài)class才能完成，下面是直接使用Vue實(shí)現(xiàn)該需求。
<template>
<button @click="setWidth">改變元素寬度</button>
<div class="box"></div>
</template>
<script setup lang="ts">
//定義兩個(gè)變量 控制寬高度和顯示出現(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，動(dòng)態(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>
這里就可以動(dòng)態(tài)改變元素的樣式了，大多情況下，在Vue里都可以使用v-bind動(dòng)態(tài)的對元素進(jìn)行調(diào)整改變。
其實(shí)這樣看來，模板中還是挺干凈整潔的，但是如果完全使用Tailwind CSS來寫樣式的話。將是以下這種恐怖的畫面（官方提供的示例）
這種還只是寫樣式，就在模板中寫這么一大堆了（這里也許是html文件內(nèi)的，沒有特別標(biāo)注，但是Vue模板中寫應(yīng)該也差不多），還不包括元素本身的屬性，事件函數(shù)（prop）等都需要寫在模板上的參數(shù)。如果在一些比較復(fù)雜的項(xiàng)目中，也許最后的模板會(huì)非常龐大，極不易維護(hù)。
另外再說一下Tailwind CSS的下載量，我們在npm上可以看到Tailwind CSS周下載量在600多萬左右
肯定會(huì)有人質(zhì)疑既然Tailwind CSS看上面的效果沒有太優(yōu)秀，但下載量還有這么高，難道這么多程序員都不會(huì)選擇嗎？另外看一個(gè)數(shù)據(jù)，就是next.js的下載量。
看著也不少吧，為什么要看next的下載量，它不僅支持Tailwind CSS，還因?yàn)楫?dāng)創(chuàng)建一個(gè)新的next項(xiàng)目的時(shí)候，會(huì)默認(rèn)選中要下載Tailwind CSS的選項(xiàng)。
不說一定百分百都會(huì)有人選中吧，百分之五十會(huì)有的吧。那樣默認(rèn)選中下載Tailwind CSS的也有一半，這樣周下載量提供的人數(shù)就已經(jīng)有200萬。那就再看一下react的周總下載量。
react的周總下載量在1800萬左右，如果將Tailwind CSS的下載量，放到這里來看其實(shí)也并不算很多。
這里說了這么多數(shù)據(jù)只是說Tailwind CSS使用在react里可能解決的問題比較多，但是放眼整個(gè)react來說生態(tài)中也不是很明顯的。在Vue里使用Tailwind CSS其實(shí)會(huì)顯得很累贅，并不是很好的選擇。
結(jié)尾
你認(rèn)為在Vue里使用Tailwind CSS是在書流氓嗎？
寫的可能有些亂，感覺沒抓住重點(diǎn)，非常抱歉，寫的時(shí)候腦子有點(diǎn)亂。不足的地方不要吝惜的批評(píng)就好了
作者：iceCode
鏈接：
https://juejin.cn/post/7295673054231052324
