前言

隨著前端的發(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標簽里寫一些樣式穿透的樣式來改變組件。

如果有一些需求，可能是需要我們點擊一個按鈕，需要改變一個元素的寬度或者高度，在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)的，沒有特別標注，但是Vue模板中寫應(yīng)該也差不多），還不包括元素本身的屬性，事件函數(shù)（prop）等都需要寫在模板上的參數(shù)。如果在一些比較復(fù)雜的項目中，也許最后的模板會非常龐大，極不易維護。

另外再說一下Tailwind CSS的下載量，我們在npm上可以看到Tailwind CSS周下載量在600多萬左右