🔧 阿川の電商水電行
寫 Tailwind CSS 像在寫屎山？這鍋該不該它背
我上次在群裡吐槽 Tailwind，被幾個大佬圍攻了：“現在還在寫傳統 CSS 的怕不是還在用 jQuery？”、“都 2025 年了還用 BEM？”整得我都不敢說話了。
作為一個前端搬磚工，我從 Nodejs 到 React 再到 Vue 都踩過一遍坑，今天就跟大家聊聊這個讓我又愛又恨的 Tailwind。
一、為什麼我覺得 Tailwind 有時候真的很操蛋
1. 這 HTML 還能看嗎？
這是我第一次看到 Tailwind 代碼的反應：
<div class="flex flex-col md:flex-row items-center justify-between p-4 md:p-6 lg:p-8 bg-white dark:bg-gray-900 rounded-lg shadow-md hover:shadow-lg transition-shadow duration-300">
<!-- 還有一堆嵌套 div，每個都帶著幾十個類名 -->
</div>同事問我：“這坨代碼意味著什麼？”我看了半天說：“一個卡片，會動，能響應式，深色模式適配了……”但我心裡想的是：這 TM 跟當年在 HTML 裡寫 style="color: red; font-size: 14px;" 有啥本質區別？
2. 接手別人的 Tailwind 專案有多痛苦
上個月接了個離職同事的專案，打開一看差點沒背過氣去：
<div className={`px-${size === 'large' ? 6 : size === 'small' ? 2 : 4} py-${hasIcon ? 3 : 2} ${variant === 'primary' ? 'bg-blue-500' : 'bg-gray-200'} ${isDisabled ? 'opacity-50 cursor-not-allowed' : 'hover:opacity-90'}`}>
{/* 還有 50 行類似的代碼 */}
</div>這種動態拼接類名的操作，讓我調試的時候想砸鍵盤。查了半天發現有個按鈕在某種狀態下 padding 不對，原來是 px-${size} 這種騷操作導致的。
3. 這玩意真的能提高開發效率嗎？
老闆跟我說：“用 Tailwind 開發速度快啊！”但真實情況是：
- 邊寫邊查文檔：
m-4和p-4到底哪個是 margin 哪個是 padding？mt-4和mr-4又是啥？ - 遇到複雜佈局：用 flex 還是 grid？Tailwind 的 grid 類名又長又難記
- 調個細節樣式：想微調一個陰影，得查半天文檔才知道
shadow-lg和shadow-xl的區別
有這查文檔的時間，我 CSS 早寫完了。
二、但為什麼大佬們都在吹爆 Tailwind？
1. 等我真的用起來之後……
兩個月後，當我對常用類名爛熟於心後，發現有些場景真香：
快速原型開發：產品經理站我身後：“這裡改個間距，那裡調個顏色，這個按鈕 hover 效果換一下……”
以前：切到 CSS 檔案 -> 找到對應的類 -> 修改 -> 切回來預覽 -> 重複
現在：直接在 HTML 裡改幾個類名 -> 實時預覽
設計一致性：以前團隊裡每個開發者對“大間距”的理解都不一樣，有人寫 margin: 20px，有人寫 margin: 24px，還有寫 margin: 1.5rem。現在統一用 m-5 或 m-6，UI 終於統一了。
2. 性能確實牛逼
我原來不信，直到對比了專案打包後的 CSS 檔案大小：
- 之前的專案（手寫 CSS）：
main.css87KB - 現在的專案（Tailwind + JIT）：
main.css12KB
因為 Tailwind 只生成你用到的樣式，不會有未使用的 CSS 代碼。
3. 再也不用想類名了
還記得那些年被 BEM 命名支配的恐懼嗎？
.card {}
.card__header {}
.card__header--active {}
.card__body {}
.card__footer {}
.card__footer__button {}
.card__footer__button--disabled {}現在？直接寫樣式就行了，不用再想 header-wrapper-inner-content 這種傻逼名字了。
三、我從抗拒到真香的轉變
轉折點是我開始 用正確的方式寫 Tailwind。
錯誤示範 ❌
function BadButton() {
return (
<button className="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded">
提交
</button>
);
}正確姿勢 ✅
function Button({
children,
variant = 'primary',
size = 'medium',
fullWidth = false
}) {
const baseClasses = "font-bold rounded transition-colors";
const variants = {
primary: "bg-blue-500 hover:bg-blue-700 text-white",
secondary: "bg-gray-200 hover:bg-gray-300 text-gray-800",
danger: "bg-red-500 hover:bg-red-700 text-white"
};
const sizes = {
small: "py-1 px-3 text-sm",
medium: "py-2 px-4",
large: "py-3 px-6 text-lg"
};
const widthClass = fullWidth ? "w-full" : "";
return (
<button className={`${baseClasses} ${variants[variant]} ${sizes[size]} ${widthClass}`}>
{children}
</button>
);
}
// 使用 cva 庫管理變體（更優雅）
import { cva } from 'class-variance-authority';
const buttonVariants = cva(
"font-bold rounded transition-colors", // 基礎樣式
{
variants: {
variant: {
primary: "bg-blue-500 hover:bg-blue-700 text-white",
secondary: "bg-gray-200 hover:bg-gray-300 text-gray-800",
},
size: {
small: "py-1 px-3 text-sm",
medium: "py-2 px-4",
}
},
defaultVariants: {
variant: "primary",
size: "medium"
}
}
);
// 實際使用
function GoodButton() {
return (
<Button variant="primary" size="large">
提交
</Button>
);
}四、什麼時候該用，什麼時候不該用
趕緊用起來吧 👍
- 新專案，尤其是 React/Vue/Svelte 專案：組件化能很好解決 Tailwind 的可維護性問題
- 需要統一設計規範：設計系統配好了，大家就按這個來，別 TM 再自己發揮了
- 內部管理系統、後台專案：快速迭代，老闆天天改需求，這種場景 Tailwind 無敵
- 團隊協作專案：不用再解釋為什麼這裡用
margin-top: 8px而不是10px
算了，別用了 ❌
- 靜態小網站：就幾個頁面，寫點 CSS 完事了，別折騰
- 老專案遷移：除非你想加班加到死
- 完全不懂 CSS 的新手：Tailwind 不是 CSS 的替代品，它是工具。連 CSS 盒模型都不懂就用 Tailwind，等於不會開車就用自動駕駛
- 設計師天馬行空：如果你們設計師每個頁面風格都不一樣，用 Tailwind 配置會把你逼瘋
五、我總結的血淚經驗
- 不要直接在 JSX 裡堆類名：這是所有屎山的源頭！一定一定要封裝成組件
- 配置好自己的設計系統：別用默認配置，根據專案需求配一套自己的
tailwind.config.js - 善用 @apply：重複出現的樣式組合，用
@apply提取
/* 在 CSS 文件中 */
.btn-primary {
@apply bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded;
}- 結合現代工具鏈：
clsx處理條件類名，tailwind-merge解決類名衝突 - 定期重構：發現重複的樣式組合就抽象，別懶！
最後說句實話
用不用 Tailwind，其實跟你用什麼技術關係不大，關鍵看你怎麼用。
那些說 Tailwind 垃圾的，多半是看到了濫用它的專案；那些吹爆 Tailwind 的，多半是用對了方法。
就像當年大家吵 jQuery 和原生 JS，吵 React 和 Vue 一樣，最後你會發現：工具沒有對錯，只有適不適合。 牛逼的程序員用記事本都能寫出好代碼，菜雞用再牛逼的框架也能寫出屎山。
所以，別吵了，趕緊去寫代碼吧。老闆又改需求了，今天還得加班呢。
關注公眾號" 大前端歷險記"，掌握更多前端開發乾貨姿勢！
1) --- 會變成分隔線（上一行必須是空白）
2) # 會變成一級標題
3) ## 會變成二級標題
4) ### 會變成三級標題
5) **粗體文字**會顯示粗體文字
6) ```當第一行與最後一行會顯示程式碼
7) 請搜尋 Markdown 語法，了解各種格式
