作者丨Vitalii Shevchuk
編譯丨諾亞
Tailwind CSS是一個流行的實用主義優先的CSS框架，聲稱可以幫助你更快更容易地創建自定義設計。然而，有時候Tailwind CSS并不那么令人滿意。事實上，有很多原因可以解釋為什么你應該避免使用它，而堅持使用純CSS或其他框架。以下是六個可能會讓你討厭Tailwind CSS的原因。
1. 它失去了HTML和CSS的語義
2. 它用大量的類污染了你的HTML
3. 它不是可伸縮和可重用的
4. 它產生巨大的CSS文件，損害性能
5. 它只適合那些不想理解和學習CSS的人
6. 它有一個巨大的庫，更容易地學習普通的CSS
1、它失去了HTML和CSS的語義
網站開發的主要原則之一是將網站的結構、表現和行為分開。HTML用于提供內容的結構和含義，CSS用于提供元素的表示和外觀，JavaScript用于提供網站的行為和交互性。
然而，Tailwind CSS違背了這一原則，因為它將表示與結構混合在一起。Tailwind CSS沒有使用有意義和描述性的類名來反映元素的用途和功能，而是使用一般性和隱晦的類名來描述它們的外觀。例如，在Tailwind CSS中，一個簡單的卡片組件是這樣的：
<div class="max-w-sm rounded overflow-hidden shadow-lg">
<img class="w-full" src="some-image.jpg" alt="Some image">
<div class="px-6 py-4">
<div class="font-bold text-xl mb-2">Some title</div>
<p class="text-gray-700 text-base">Some text</p>
</div>
</div>類名不會告訴你任何有關元素的含義或功能的信息。他們只告訴你他們長什么樣。這使得理解和維護代碼變得困難，因為你必須記住每個類的作用以及它們如何影響組件的布局和設計。
與普通CSS相比，在普通CSS中，你可以使用語義和描述性的類名來反映元素的含義和功能：
<div class="card">
<img class="card-image" src="some-image.jpg" alt="Some image">
<div class="card-content">
<div class="card-title">Some title</div>
<p class="card-text">Some text</p>
</div>
</div>通過查看每個元素的類名，你可以很容易地知道每個元素的作用，還可以通過編輯CSS文件來更改其外觀。
2、它用大量的類污染了你的HTML
對Tailwind CSS的一個主要批評是，它迫使你編寫由幾十個實用程序類組成的HTML，使其難以閱讀和維護。例如，在Tailwind CSS中，一個簡單的按鈕是這樣的：
<button class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded">
Click me
</button>與普通CSS相比，在普通CSS中，你可以使用單個類名并在單獨的文件中定義樣式：
<button class="btn-blue">
Click me
</button>普通CSS比Tailwind CSS更簡潔和語義化。通過查看按鈕的類名，可以很容易地知道按鈕的作用，還可以通過編輯CSS文件更改按鈕的外觀。使用Tailwind CSS時，你必須記住大量的類名及其含義，并且每次想要調整設計時都必須修改HTML。
Tailwind CSS提倡將所有樣式放在HTML中，而不是將它們分離到不同的文件或層中。這違背了web開發的核心原則之一：關注點分離。將表示與內容混合在一起，就違反了代碼的模塊化和可維護性。在不同的上下文中或設備中重用或重寫樣式也變得更加困難。
3、它不是可伸縮和可重用的
Tailwind CSS的另一個問題是它不具有可擴展性和可重用性。Tailwind CSS鼓勵你通過對每個元素應用多個實用工具類來對其單獨設置樣式。但是，這會導致代碼中的重復和不一致，因為你必須為類似的元素重復相同的類，或者為不同的變體稍微更改它們。
例如，假設你有兩個看起來相似但顏色不同的按鈕：
<button class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded">
Blue button
</button>
<button class="bg-red-500 hover:bg-red-700 text-white font-bold py-2 px-4 rounded">
Red button
</button>除了背景顏色不同，兩個按鈕都有相同的類。這意味著你必須為每個按鈕重復相同的類，使你的代碼冗長和冗余。此外，如果你想要更改按鈕的某些內容，例如字體大小或邊框半徑，則必須在多個地方進行更改，這會使代碼容易出現錯誤和不一致。
與普通CSS相比，在普通CSS中，你可以為兩個按鈕使用一個類名，并為不同的變體使用修飾符或變量：
<button class="btn btn-blue">
Blue button
</button>
<button class="btn btn-red">
Red button
</button>你可以為兩個按鈕使用一個類名，并為不同的變體使用修飾符或變量。這使你的代碼簡潔一致，并且你可以在一個地方更改有關按鈕的某些內容。
4、它產生巨大的CSS文件，損害性能
Tailwind CSS的另一個缺點是它會生成巨大的CSS文件，這會對網站的性能產生負面影響。Tailwind CSS提供了數以千計的實用程序類，它們幾乎涵蓋了所有可能的樣式變化。然而，這些類中的大多數都不會在你的項目中使用，它們只會給你的CSS文件增加不必要的膨脹。
根據官方文檔，默認的Tailwind CSS文件大小超過2.4 MB，這對于生產網站來說太大了。即使在縮小和壓縮文件之后，它仍然保持在46 kB左右，這仍然比大多數其他CSS框架大。
為了減少文件的大小，Tailwind CSS建議使用一個名為PurgeCSS的工具，它可以掃描HTML文件，并從CSS文件中刪除任何未使用的類。然而，這為你的構建過程增加了一個額外的步驟，并且如果PurgeCSS未能檢測到在你的代碼中動態地或有條件地使用的一些類，它也會引入錯誤。
5、它只適合那些不想理解和學習CSS的人
Tailwind CSS對你的CSS學習和理解也有負面影響。通過使用Tailwind CSS，你基本上依賴于一個聲稱是CSS樣式替換的框架，但實際上仍然需要你了解CSS樣式才能使用它。例如，你仍然需要知道如何使用flexbox、grid或position屬性來布局元素，但不是直接在CSS文件中使用它們，而是必須使用模仿它們的Tailwind CSS類。
這不僅令人困惑，而且具有誤導性。你不是在學習實際的CSS屬性和值，而是學習Tailwind CSS類及其含義。這可能會讓你認為你了解CSS，但實際上，你只熟悉Tailwind CSS。如果你遇到Tailwind CSS不提供你需要的類的情況，或者如果你想切換到另一個框架或工具，你將很難理解或編寫實際的CSS代碼。
6、它有一個巨大的庫，更容易學習正常的CSS
Tailwind CSS為每個可能的場景提供了數千個實用程序類，但這也意味著你必須記住或查找所有這些類及其含義。這可能會讓人不知所措，而且非常耗時，特別是如果你是web開發的新手的話。
此外，Tailwind CSS不遵循CSS的標準命名約定或語法。例如，它使用冒號或括號來分隔類名中的單詞，而不是破折號或駝峰式大小寫。它不使用百分比或像素來指定值，而是使用任意數字或字母。這會使你的代碼看起來不一致和不熟悉。
相比之下，學習普通的CSS要簡單得多，也更直觀。你只需要學習被標準化并被瀏覽器廣泛支持的基本屬性和值。你還可以使用自定義屬性或變量來創建適合你需要的自己的命名約定和值。你還可以使用在線資源或工具以交互式和可視化的方式學習和練習CSS。
參考鏈接：https://itnext.io/top-6-reasons-to-hate-tailwind-css-8009ea96e300
