在實用主義世界中，對手工編寫的 CSS 進行一番獨到的辯護
好了，我說出來了。你們可以叫我老古董，叫我純粹主義者，說我阻礙進步。我依然會在這裡，寫出優美、精心、屬於我自己的CSS程式碼——並且享受其中的每一秒。
Tailwind CSS 非常流行。數百萬開發者在每個專案中都使用它。它的工具鏈很棒，社群龐大，文件確實非常出色。我尊重所有這些優點。但我仍然不想讓它出現在我的專案中。
讓我解釋一下原因。
南瓜派問題
我一直無法擺脫這個比喻。
從零開始製作南瓜派意味著：烤一個完整的南瓜，挖出並攪拌南瓜肉，用奶油、雞蛋和溫暖的香料（肉荳蔻、肉桂、少許生薑）從零開始製作蛋奶糊，手工製作酥皮，感受黃油在指尖與麵粉融合，緊邊緣，盲烤派捏，倒入餡料，烘烤至廚房瀰漫著誘人的香味。
使用 Tailwind 更像是：從超市買一個現成的酥皮，打開一罐南瓜泥，拌入一包香料，倒進去，然後告訴所有人你親手做了一個南瓜派。
而南瓜派的特別之處在於──它不像蘋果派那樣，幾乎沒有什麼可以掩蓋的。餡料是罐裝的，派皮是包裝好的。不需要切菜，不需要分層，也不需要什麼真正的技巧。你基本上只是操作了一個烤箱。沒錯，最後的確是個派。味道可能還不錯。人們會吃它。但你並沒有真正地製作它。你只是把它組裝起來而已。
我知道你們有些人已經開始反駁了。 “但最終用戶不在乎你是怎麼做出來的！”“效率才是最重要的！”“快點發布，快速迭代！”
你說得沒錯──那些事情確實很重要。但它們並非全部重要因素。在追求更快交付速度的過程中，我認為我們忽略了一些重要的事情。
CSS是一門技藝，要像對待技藝一樣對待它。
編寫優秀的CSS程式碼是一項技能。一項真正來之不易的技能，需要多年的實踐才能真正精通。
理解層疊佈局。了解何時以及為何使用自訂屬性。建構一個貫穿整個設計的連貫且富有呼吸感的間距系統。寫出足夠精確的選擇器，只做其應有的工作。使用clamp()函數，讓瀏覽器自動完成響應式佈局。精心製作與設計渾然一體的動畫，而不是生硬地附加上去的。
這和木工、烹飪一樣，都是工藝。這就好比懂木紋和榫卯結構的家具匠，和只會用內六角扳手組裝平板家具的人之間的區別。兩者都能做出桌子，但只有一人真正做出了桌子。
凱文·鮑威爾——如果你還沒在YouTube上關注他，請先停止閱讀，去看幾個他的影片，然後再回來——多年來一直在用實際行動證明這一點。他的頻道堪稱CSS大師班，它完美地展現了當你真正靜下心來認真學習CSS時，它能做到什麼。他讓CSS看起來充滿樂趣，因為當你真正理解它時，它的確如此。他不需要使用任何實用類別就能實現優雅、響應式且易於維護的佈局。他只是運用了CSS語言本身。
觀看他的作品，最讓我印象深刻的是他的自信。他沒有費力地擺弄工具，也沒有翻閱文件記住哪個類別名稱對應哪個像素值。他只是一個了解自己所用媒材的開發者，直接上手創作。
自信只能透過實踐獲得。而你無法練習那些外包出去的事情。
我們放棄了什麼
當您預設選擇 Tailwind 時，無論您是否注意到，實際上會發生以下情況。
你會停止學習 CSS。如果你總是把設計意圖轉化為實用類，就永遠無法培養直接寫規則的直覺。 「我知道我想要的效果」和「我知道如何寫 CSS 來實現它」之間的鴻溝永遠無法彌合。初級開發人員尤其容易受到影響——他們可以快速發布 Tailwind 框架，但如果讓他們除錯堆疊上下文問題，或者解釋為什麼他們的 flexbox 沒有按預期對齊，他們就會束手無策。
你的 HTML 程式碼變成了噪音。仔細看看用 Tailwind 寫的元件。 classNameclassName="flex items-center justify-between px-4 py-2 text-sm font-medium text-gray-900 bg-white border border-gray-200 rounded-lg hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500"` ——這是一個按鈕。語意訊號完全被掩蓋了。 HTML 不再是一個文件；它變成了一個寫錯位置的樣式表。
每個專案看起來都一樣。 Tailwind有一套固定的風格，預設的比例尺，以及調色板。即使你進行自訂，它的基本框架也保持不變。我審查過業內各公司的程式碼庫，幾乎總是能一眼看出它們是否使用了 Tailwind。這並非因為它們的設計不好——它們通常都相當不錯——而是因為它們千篇一律，缺乏個性，幾乎可以互換。那些讓產品感覺是精心設計而非隨意生成的小細節、個性特徵和刻意營造的怪異感，往往都被抹殺掉了。
你會對抽象層產生依賴。如果 Tailwind 更改了 API 會怎麼樣？如果class-variance-authority過時了，大家都轉向其他技術了呢？你可能已經編寫了數萬行程式碼，這些程式碼與特定工具的特定版本緊密耦合。手工編寫的 CSS 則不存在這個問題。 CSS 就是 CSS。它在 Tailwind 出現之前就存在，而且在 Tailwind 出現之後也會一直存在。
“但是大型團隊呢？”
這就是支持 Tailwind 的重要理由，我必須承認它確實有道理。在大型團隊中，共享的規格至關重要。如果每個人都按照自己的風格寫 CSS，就會造成混亂。不一致的間距、相互衝突的命名規範、優先順序之爭，以及無人敢刪除的死程式碼。
Tailwind的確解決了這個問題。我理解為什麼團隊會選擇它。
但解決 CSS 不一致問題的方法並非停止寫 CSS，而是共同寫出更優質的CSS。這包括維護良好的設計令牌系統、合理的元件架構以及團隊真正遵循的樣式指南。誠然，這些比安裝一個軟體包更難實現，但它們能帶來更好的結果。它們能建構出任何開發者都能輕鬆理解的程式碼庫，而無需了解text-slate-700的具體意義。
編寫優秀 CSS 的感覺
最後我想談談在這些討論中很少被提及的一點，因為它是主觀的，而主觀的事情在技術討論中往往被認為無關緊要。
寫好 CSS 是一種感覺。從零開始建立一個元件，看著它執行流暢，那種感覺妙不可言。看著佈局優雅地適應不同視窗尺寸，因為你正確地設定了grid ，並巧妙地運用了min()和max()函數，那種感覺更是妙不可言。看著你精心製作的動畫完美呈現——緩動、時機，所有細節都恰到好處——並且知道這一切都是你親手完成的，那種感覺更是妙不可言。
這就像麵包師烤出完美酥脆的麵包皮時的感覺一樣，也像木匠將兩個榫卯嚴絲合縫地連接在一起時的感覺一樣。
Tailwind牌的現成酥皮非常好。但我更想學自己做。
如果你想重新愛上 CSS 這門語言，不妨從Kevin Powell 的 YouTube 頻道開始。他是當今最有耐心、最細緻、最熱情洋溢的 CSS 教育者——觀看他的影片會讓你成為更優秀的開發者。
原文出處：https://dev.to/freshcaffeine/i-dont-like-tailwind-sorry-not-sorry-50b5
1) --- 會變成分隔線（上一行必須是空白）
2) # 會變成一級標題
3) ## 會變成二級標題
4) ### 會變成三級標題
5) **粗體文字**會顯示粗體文字
6) ```當第一行與最後一行會顯示程式碼
7) 請搜尋 Markdown 語法，了解各種格式
