Hello，大家好，我是 Sunday。

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

圖片

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

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

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

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

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

tailwindcss 解決了什么問題？

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

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類名大全 這種網(wǎng)站或庫。
2. 頻繁的切換視圖：傳統(tǒng)的 css 構(gòu)建 html 和 css 是 分開的。這就需要開發(fā)者不斷地來回切換對應(yīng)的視圖。
3. 靈活性不足：在大型項(xiàng)目中，我們經(jīng)常會(huì)發(fā)現(xiàn)自己在不同的組件中重復(fù)定義相似的樣式。這就可能導(dǎo)致樣式?jīng)_突或需要頻繁重構(gòu)。同時(shí)由于傳統(tǒng) CSS 類常常過于籠統(tǒng)，不能很好地應(yīng)對不同的設(shè)計(jì)需求。開發(fā)者需要?jiǎng)?chuàng)建大量的自定義類來覆蓋原有樣式。

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

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

tailwindcss 帶來了什么新問題？

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

1. HTML 混亂和可讀性降低

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

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

圖片

• 難以理解的代碼：對于沒有使用過 Tailwind 的開發(fā)者來說，看到一堆無意義的類名（如 p-4, mt-2, text-blue-500）可能難以快速理解代碼的意圖和布局。

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

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

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

• 生成的 CSS 文件較大：默認(rèn)情況下，Tailwind 生成的 CSS 文件包含大量的工具類，這可能導(dǎo)致生成的文件體積較大，尤其是在沒有使用 tree-shaking 等技術(shù)來去除未使用的樣式時(shí)。這會(huì)影響頁面加載速度和性能。
• 依賴構(gòu)建工具：為了優(yōu)化 Tailwind 的輸出，通常需要依賴構(gòu)建工具（如 PostCSS 或 PurgeCSS）來移除未使用的樣式，這增加了項(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)粘ｉ_發(fā)的方方面面。大家應(yīng)該也經(jīng)常有看到 兩種不同框架的開發(fā)者在網(wǎng)絡(luò)中互相 “攻伐” 的情況。

但是，如果讓我去說，我覺得：這都是 毫無意義 的！

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

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

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

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