Hello，大家好，我是 Sunday。

說(shuō)起 Tailwindcss 很多同學(xué)應(yīng)該是熟悉的，它被稱(chēng)之為是一個(gè) 原子級(jí) css 框架，在之前我錄制的 Vue3 中前臺(tái)解決方案 這個(gè)課程中，就是使用的這個(gè) css 框架。

圖片

不過(guò)，很多學(xué)生在使用這個(gè)框架的時(shí)候，產(chǎn)生了兩種截然不同的情緒：

• 第一種：Tailwind 用起來(lái)真爽，再也不用為 想類(lèi)名 發(fā)愁了
• 第二種：這是個(gè)什么“狗屎”東西，一坨類(lèi)名寫(xiě)在一起，這將來(lái)能維護(hù)？幾天之后誰(shuí)能看得懂啥是啥？

這兩種截然不同的情緒其實(shí)就反映出了 目前開(kāi)發(fā)者對(duì) tailwindcss 的看法。

那么為什么會(huì)出現(xiàn)這兩種截然不同的體驗(yàn)，tailwindcss 到底值得用嗎？

想要搞明白這些，那么首先，我們需要先知道 為什么會(huì)出現(xiàn) tailwindcss，也就是 tailwindcss 解決了什么問(wèn)題？

tailwindcss 解決了什么問(wèn)題？

Tailwind 是 2017 年發(fā)布的，最初發(fā)布的目的就是為了解決 CSS 維護(hù)困難的問(wèn)題，這些問(wèn)題大致包含三部分：

1. css 取名困難：這是一直非常核心的痛點(diǎn)。因?yàn)?css 多數(shù)情況下是基于 class 進(jìn)行構(gòu)建的。那么就會(huì)導(dǎo)致我們需要設(shè)置大量的 class 名。這就導(dǎo)致 “取名困難癥” 的出現(xiàn)。當(dāng)初甚至還出現(xiàn)了 css類(lèi)名大全 這種網(wǎng)站或庫(kù)。
2. 頻繁的切換視圖：傳統(tǒng)的 css 構(gòu)建 html 和 css 是 分開(kāi)的。這就需要開(kāi)發(fā)者不斷地來(lái)回切換對(duì)應(yīng)的視圖。
3. 靈活性不足：在大型項(xiàng)目中，我們經(jīng)常會(huì)發(fā)現(xiàn)自己在不同的組件中重復(fù)定義相似的樣式。這就可能導(dǎo)致樣式?jīng)_突或需要頻繁重構(gòu)。同時(shí)由于傳統(tǒng) CSS 類(lèi)常常過(guò)于籠統(tǒng)，不能很好地應(yīng)對(duì)不同的設(shè)計(jì)需求。開(kāi)發(fā)者需要?jiǎng)?chuàng)建大量的自定義類(lèi)來(lái)覆蓋原有樣式。

因此 Tailwind 提供了這三種問(wèn)題的對(duì)應(yīng)解決方式：

1. 細(xì)粒度控制：Tailwind 提供了數(shù)百個(gè)預(yù)定義的、可組合的工具類(lèi)（utility classes），可以直接在 HTML 中使用。不需要再讓你想類(lèi)名了。
2. 提高開(kāi)發(fā)效率：通過(guò)使用工具類(lèi)，開(kāi)發(fā)者可以在 HTML 中直接定義樣式，減少了在不同文件之間切換的時(shí)間，從而加快了開(kāi)發(fā)速度。
3. 避免樣式?jīng)_突：由于 Tailwind 提供的類(lèi)都是原子化的，避免了傳統(tǒng) CSS 中樣式污染和命名沖突的問(wèn)題。同時(shí)還提供了 可定制 的能力，我們可以通過(guò)配置文件來(lái)定制顏色、字體、間距等，以符合項(xiàng)目的設(shè)計(jì)需求。

tailwindcss 帶來(lái)了什么新問(wèn)題？

看上面的描述好像是很棒的。但是 tailwindcss 也帶來(lái)了很多新的問(wèn)題，這些新的問(wèn)題就是很多同學(xué) “討厭” 它的原因：

1. HTML 混亂和可讀性降低

這個(gè)具體體現(xiàn)在兩個(gè)方面：

• 類(lèi)名堆疊：由于 Tailwind 的設(shè)計(jì)理念是直接在 HTML 中使用大量的工具類(lèi)（utility classes），這可能會(huì)導(dǎo)致 HTML 變得“雜亂無(wú)章”，特別是在復(fù)雜的組件中，類(lèi)名的堆疊可能非常龐大，影響代碼的可讀性。

圖片

• 難以理解的代碼：對(duì)于沒(méi)有使用過(guò) Tailwind 的開(kāi)發(fā)者來(lái)說(shuō)，看到一堆無(wú)意義的類(lèi)名（如 p-4, mt-2, text-blue-500）可能難以快速理解代碼的意圖和布局。

2. 樣式復(fù)用并不簡(jiǎn)單

• 學(xué)習(xí)復(fù)雜度：對(duì)于剛接觸 Tailwind 的同學(xué)來(lái)說(shuō)，大量的類(lèi)名記憶是非常消耗心力的。想要理解如何有效地配置 Tailwind 學(xué)習(xí)曲線并不低。
• 復(fù)用并不簡(jiǎn)單：雖然 Tailwind 提供了很多的工具類(lèi)，但是在多人合作的團(tuán)隊(duì)中，我們可能依然需要在多個(gè)地方重復(fù)相同的類(lèi)名。特別是一些初創(chuàng)團(tuán)隊(duì)，使用 Tailwind 可能導(dǎo)致相似的樣式在不同地方多次定義，增加了維護(hù)成本。

3. 生產(chǎn)環(huán)境的文件體積

• 生成的 CSS 文件較大：默認(rèn)情況下，Tailwind 生成的 CSS 文件包含大量的工具類(lèi)，這可能導(dǎo)致生成的文件體積較大，尤其是在沒(méi)有使用 tree-shaking 等技術(shù)來(lái)去除未使用的樣式時(shí)。這會(huì)影響頁(yè)面加載速度和性能。
• 依賴(lài)構(gòu)建工具：為了優(yōu)化 Tailwind 的輸出，通常需要依賴(lài)構(gòu)建工具（如 PostCSS 或 PurgeCSS）來(lái)移除未使用的樣式，這增加了項(xiàng)目的構(gòu)建復(fù)雜性。

如何看待 tailwindcss？

那么根據(jù)以上內(nèi)容，其實(shí)我們也可以發(fā)現(xiàn) Tailwind 并不適合所有人使用。

因此，也就出現(xiàn)了 擁抱 Tailwind 和 逃離 Tailwind，回歸 scss 的兩種截然不同，但又同時(shí)存在的 亂象。

在前端這個(gè)領(lǐng)域，這種亂象并不是僅存在于 Tailwind 這一個(gè)框架，而是存在于我們?nèi)粘ｉ_(kāi)發(fā)的方方面面。大家應(yīng)該也經(jīng)常有看到 兩種不同框架的開(kāi)發(fā)者在網(wǎng)絡(luò)中互相 “攻伐” 的情況。

但是，如果讓我去說(shuō)，我覺(jué)得：這都是 毫無(wú)意義 的！

技術(shù)本身在于 輔助業(yè)務(wù)，創(chuàng)造價(jià)值。

在這個(gè)過(guò)程中，業(yè)務(wù)是核心，價(jià)值是結(jié)果，技術(shù)是輔助核心完成結(jié)果的過(guò)程

大家想一想，如果我們 不去討論核心的業(yè)務(wù)，不去追溯最終的結(jié)果，而只是在過(guò)程中來(lái)回糾結(jié)，是不是就顯得有些舍本逐末了。

所以說(shuō)：使用什么框架并不重要，感覺(jué)這個(gè)“工具”順手就繼續(xù)使用，不順手就把它“丟掉”。