🔧 阿川の電商水電行
說實話，我對 Tailwind CSS 的感覺很複雜。它就像那種什麼都擅長、做事有條理、效率極高、生活井井有條的朋友，但不知為何，他的存在卻讓你覺得自己一團糟。
我一直都只用純 CSS。給我一個.button class和一個單獨的樣式表，我就很滿足了。但現在都 2025 年末，快到 2026 年了，我卻總是忍不住想起 Tailwind。不是因為我喜歡它（我並不喜歡），而是因為……嗯，它提供了更多選項。這真是讓人惱火。
無人談及的問題
那些關於“Tailwind vs CSS”的評論文章不會告訴你的是：關鍵不在於哪個“更好”，而在於哪個能讓你更少地想把筆記型電腦扔出窗外。
對我來說？ Tailwind 用起來壓力很大。我終於說出來了。
你知道什麼最讓人壓力山大嗎？看著這個：
<button class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded-lg shadow-md hover:shadow-lg transition duration-300 ease-in-out transform hover:-translate-y-1">
Click me
</button>我的大腦看到這個就想：“這已經不是HTML了。這只是CSS加上了一些額外的步驟和被迫害妄想症而已。”
但是，當我用純 CSS 編寫同樣的程式碼時：
.button {
background-color: #3b82f6;
color: white;
font-weight: bold;
padding: 0.5rem 1rem;
border-radius: 0.5rem;
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
transition: all 0.3s ease-in-out;
}
.button:hover {
background-color: #2563eb;
box-shadow: 0 10px 15px rgba(0, 0, 0, 0.1);
transform: translateY(-4px);
}
<button class="button">Click me</button>我感覺……平靜，有條理，就像我真的在寫程式碼，而不是在玩拼字遊戲（用類名拼字）。
那麼，我為什麼要寫這篇文章呢？
因為到了 2026 年，你不能只選 CSS 或 Tailwind 就萬事大吉了。現在的情況很複雜。是好的複雜，但確實很複雜。
Tailwind剛剛發布了v4版本。它速度更快，程式碼更簡潔。雖然它仍然讓我的HTML看起來像是被人打了個噴嚏，把各種實用類別都撒了上去一樣，但我得承認，它確實進步了很多。
純 CSS？也在復興。容器查詢來了。 CSS 巢狀現在是原生支援的。我們有了層疊樣式表。我愛上的這門語言最近真是煥然一新。
然後，又冒出一堆新花樣：Panda CSS（我的最愛！）、StyleX、UnoCSS、Lightning CSS。每個人都在用十七種不同的方法試圖解決同一個問題。
真是太累了。
**關於 Tailwind，沒人告訴你的事
好的方面（是的，它們確實存在）：
- 你不再為事物命名。
命名真難。我以前就花過20分鐘為一個容器命名。到底是卡片包裝器？內容容器？還是主卡支架？有了Tailwind，這種腦力勞動就…消失了。
2.
你的設計系統意外地具有一致性。
如果用純 CSS，我會在一個檔案裡用#3b82f6 ，在另一個檔案裡用#2563eb ，然後納悶為什麼藍色看起來像喝醉了一樣。 Tailwind 會說：「這是blue-500 。你只能用這一個藍色。接受現實吧。」說實話？效果還不錯。
- IntelliSense簡直完美。
輸入 bg-，你的編輯器就會顯示所有背景選項。這就像是樣式自動補全功能。我這個只會寫純 CSS 的菜鳥都羨慕死了。
- 響應式設計簡直易如反掌。
<div class="text-sm md:text-base lg:text-lg">
I'm responsive now, mom!
</div>相較之下，寫三個媒體查詢語句就容易多了。沒錯。
讓我感到想要尖叫的部分：
- HTML程式碼看起來像是犯罪現場。
你有沒有看過加入了深色模式、響應式斷點和懸停狀態的 Tailwind 元件？它看起來就像字母湯和正規表示式生了個孩子。
- 你需要一個建置步驟。
我只是想為按鈕加入樣式而已。現在我卻在設定 PostCSS、安裝依賴項，我得祈禱我的 tailwind.config.js 檔案別出問題。這簡直太折磨人了。
- 除錯簡直是惡夢。
當純 CSS 出現問題時，我開啟開發者工具，看到的是 .button { background: red; }。很簡單。但用 Tailwind 的話，我看到 47 個實用類別爭奪優先順序。祝你好運。
- 實際上它並沒有那麼大的可重複使用性。
大家都說“直接做個元件就行了！”，但那樣本質上就是多此一舉地重建 CSS。既然我反正都要做 React 元件，為什麼還要給自己找麻煩呢？
**關於純 CSS，沒人告訴你的事**
好的方面（以及我無法戒酒的原因）：
- 它更乾淨一些。
我的 HTML 程式碼看起來就像 HTML，我的 CSS 程式碼看起來就像 CSS，一切都清晰易懂。即使過了六個月，我依然能看懂自己的程式碼，不需要任何解碼工具。
- 無需建置步驟。
連結樣式表。完成。部署。它執行正常。無需設定、編譯，也無需在凌晨兩點苦苦鑽研 Stack Overflow 和聊天室裡「為什麼我的 Tailwind 不起作用」之類的 GPT 問題。
- 它現在實際上更強大了。
2025 年的原生 CSS 簡直太神奇了。容器查詢意味著我可以建立根據容器大小而非視窗大小回應的元件。這簡直是魔法。
.card {
container-type: inline-size;
}
@container (min-width: 400px) {
.card-title {
font-size: 2rem;
}
}- 自訂屬性非常神奇。
:root {
--color-primary: #3b82f6;
--spacing-md: 1rem;
}
.button {
background: var(--color-primary);
padding: var(--spacing-md);
}只需更改一個變數，即可更新整個網站。 Tailwind 希望能做到這一點。
讓我感到難過的部分：
- 為事物命名仍然很困難。
是 .btn 還是 .button？是 .card-header 還是 .header-card？我做了這麼多年，還是搞不清楚。
- 持之以恆需要自律。
擺脫了 Tailwind 的限制，我會在某些地方使用 margin: 16px，在其他地方使用 margin: 1rem。我的間距設定純粹憑感覺。
- 生態系支離破碎。
Tailwind 有一套獨特的實現方式。純 CSS？選擇你的方法論：BEM、SMACSS、OOCSS、ITCSS，或乾脆隨心所欲，聽天由命。
- 沒人覺得這有什麼了不起。
假設你用 Tailwind，大家都會點頭表示贊同。假設你在 2025 年還寫原生 CSS，大家看你的眼神就像你剛剛說了你是用打字機寫程式一樣。這有什麼好大驚小怪的？ ？ ？
那麼，到了2026年，你究竟該使用什麼呢？
我的回答很誠實，我知道這很煩人：這要看情況。
我知道，我知道。你們想要的是勁爆的觀點。 「用X，Y就是垃圾。」但事實是，它們都很好。它們都很煩人。它們在解決實際問題的同時，也製造了新的問題。
若符合以下情況，請使用 Tailwind：
-
你正在使用 React/Vue/Svelte 進行建置（元件框架非常喜歡它）
-
你在團隊中工作，需要嚴格的一致性。
-
你更重視速度而非HTML程式碼的簡潔性。
-
你接受建置步驟
-
你不想再為事物命名了
如果符合以下情況，請使用純 CSS：
-
您正在建立更簡單的網站或靜態頁面
-
你喜歡關注點分離。
-
你極其討厭建造台階。
-
你想完全掌控一切
-
您熟悉現代 CSS 功能
若符合以下情況，請同時使用兩者：
-
你很務實，你不是在打聖戰。
-
Tailwind 用於快速實現，CSS 用於複雜的動畫。
-
你喜歡有選擇權。
-
真正的2026年大舉
想聽聽我的真實想法嗎？
這裡是：
先認真學習現代 CSS。容器查詢、嵌套、層疊層、`:has() 、自訂屬性，這些功能強大且不會過時。 Tailwind 明天可能就消失了（雖然不會，但理論上是這樣），CSS 不會。
那就試試 Tailwind 吧。不是因為你必須用它，而是因為有時候它確實更快。用它來做原型設計，用它來做副業專案，在你不想動腦筋的時候用它。
在合適的情況下混合使用它們。使用 Tailwind 工具來控制間距和顏色。使用純 CSS 來處理複雜的佈局和動畫。沒人會因為純 CSS 而頒獎。
真正令人興奮的事情
暫時拋開 CSS 和 Tailwind 之爭。以下是 2026 年真正酷炫的東西：
容器查詢正在改變我們對響應式設計的思考方式。我們不再針對螢幕尺寸進行設計，而是針對元件尺寸進行設計。
CSS 嵌套現在是原生支援的，無需預處理器，開箱即用。
層疊層讓你能夠控制具體性，而無需進行重要的爭論。
View transitions API 無需 JavaScript 即可實現流暢的頁面過渡效果。
這是 CSS 的黃金時代，無論你是用純文字編寫，還是使用 Tailwind 生成。
我頗具爭議的觀點
Tailwind最大的貢獻並非實用類，甚至不是設計系統，而是它讓開發者重新重視設計。
在 Tailwind 出現之前，開發者通常會把 Bootstrap 套用到所有東西上，然後就完成了。 Tailwind 讓風格設計變得充滿樂趣，讓你感覺自己正在真正進行設計，而不僅僅是套用別人的主題。
即使HTML程式碼有時讓我看得眼睛疼，但它仍然很有價值。
我實際使用的設備
你想知道我最近最喜歡什麼嗎？
對於業餘專案：使用具有現代功能的純 CSS。這很治癒。
對於客戶專案：我選擇 Tailwind，因為客戶希望快速完成，而我不想在這個問題上死磕到底。
對於複雜的問題：採用混合方案。基礎部分使用 Tailwind CSS，複雜部分使用自訂 CSS。
展望 2026 年：我正在關注 Panda CSS 和 UnoCSS。它們或許能解答「如果 Tailwind 比較簡單，但壓力更小會怎麼樣？」這個問題。
底線
CSS 和 Tailwind 都行。它們都很煩人。它們都能完成任務。
選擇讓你快樂的事。人生苦短，何必為一個連結的樣式而焦慮。
但如果有人在會議上問我？我會說我支持純 CSS。不是因為它比較好，只是因為我比較固執，而且我喜歡簡潔的 HTML。
也,
className="flex items-center justify-center"仍然感覺像是作弊，沒有人能說服我改變這個想法。
2026年你打算用什麼？在評論區留下你的看法吧！如果你能不引發爭論地捍衛自己的選擇，那就更好了。
PS：如果你在2026年還在使用內嵌樣式，我們得好好談談了。真的。
喜歡這篇文章嗎？分享一下，點個贊，在推特上關注我。我會發布更多關於網頁開發、設計、Web3 和科技方面的內容。
原文出處：https://dev.to/toboreeee/its-almost-2026-why-are-we-still-arguing-about-css-vs-tailwind-291f
1) --- 會變成分隔線（上一行必須是空白）
2) # 會變成一級標題
3) ## 會變成二級標題
4) ### 會變成三級標題
5) **粗體文字**會顯示粗體文字
6) ```當第一行與最後一行會顯示程式碼
7) 請搜尋 Markdown 語法，了解各種格式
