說實(shí)話， 剛看到 Tailwind 時(shí)，我想：“這可能是 HTML 繼 <marquee> 之后最糟糕的發(fā)明了。”

一個(gè) div 里堆滿二十個(gè)工具類？bg-blue-500 text-white text-center py-2 px-4 rounded-md shadow-md hover:bg-blue-600？

看起來就像有人在便利貼上寫 CSS。

但后來我真正用了一陣，

劇情反轉(zhuǎn)……Tailwind 讓我更快了，

代碼更統(tǒng)一了，

最棒的是，我終于不用重復(fù)寫一模一樣的 CSS 規(guī)則。

如果你的 Tailwind 代碼看著亂七八糟，問題不是框架， 而是你用它的方式。

Utility-First ≠ 毫無頭緒

Tailwind 不是要你停止思考， 而是幫你避免每次寫按鈕都重新造輪子。

說說按鈕設(shè)計(jì)。

以前的做法：

.button { ... }
.button-sm { ... }
.button-danger-outline { ... }

復(fù)雜得要死，維護(hù)一團(tuán)亂麻。

Tailwind 這樣寫：

<button class="bg-red-500 text-white py-1 px-3 rounded hover:bg-red-600">Danger</button>

一眼就懂，

不用滿頁面找 .button、.button-sm、.button-danger-outline。

Tailwind 就是這么實(shí)誠，

你的代碼有多亂，它就有多“暴露”。

“看起來不就是內(nèi)聯(lián) CSS 嗎？”

沒錯(cuò)，這正是它的優(yōu)勢(shì)。

內(nèi)聯(lián)樣式糟糕是因?yàn)闊o法復(fù)用、沒有邏輯、難以管理。 Tailwind 解決了這些，還能讓你按需抽離組件。

如果你的組件變得一鍋粥，不妨試試：

@apply bg-blue-500 text-white py-2 px-4 rounded-md shadow-md hover:bg-blue-600;

然后用：

<button class="btn">提交</button>

Tailwind 給你的是樂高積木，怎么拼由你決定。

Tailwind 學(xué)習(xí)曲線？不存在的

設(shè)計(jì)雜亂無章，別怪 Tailwind， 怪你沒設(shè)定好間距尺度、字體層級(jí)、配色體系。

在 tailwind.config.js 里定義：

theme: {
  extend: {
    colors: {
      brand: '#1DA1F2',
    },
    spacing: { ... },
  }
}

用 bg-brand 替代 bg-blue-600， 用系統(tǒng)化間距替代盲猜的 padding。

不需要設(shè)計(jì)學(xué)位，只要點(diǎn)結(jié)構(gòu)感。

響應(yīng)式？Tailwind 嘲笑媒體查詢

以前寫響應(yīng)式：

@media (min-width: 768px) {
  .card-title {
    font-size: 1.5rem;
  }
}

現(xiàn)在寫：

<h2 class="text-base md:text-lg lg:text-xl">Hello World</h2>

完成。 Tailwind 自動(dòng)幫你管理斷點(diǎn)， 零切換文件，上手又快。

Tailwind 不是捷徑，而是工具

最大誤解是：Tailwind 是懶人的救命稻草。

完全不是。

它迫使你去理解 margin、padding、顏色、陰影、間距和響應(yīng)式。

你會(huì)關(guān)心垂直節(jié)奏和統(tǒng)一尺寸， 迭代 UI 時(shí)不用重寫五十行 CSS， 也不必再起什么 .blue-btn-alt-2 這類晦澀名字。

先別怪 Tailwind

如果你的網(wǎng)站看起來像 2014 年的 Bootstrap， 問題可能不在 Tailwind， 而是你沒設(shè)限，沒抽離通用組件， 或者滿屏狂用 !important，像破設(shè)計(jì)上撒辣椒醬。

Tailwind 不能救贖品味，但會(huì)放大好體系。

想寫更干凈的 Tailwind？試試這個(gè)實(shí)用技巧

定義一個(gè)組件：

<button class="btn">提交</button>

在 CSS 或 Tailwind 配置里統(tǒng)一定義 .btn。

然后到處用。

立刻干凈、可擴(kuò)展，依舊是 Tailwind 的魔力。

別再以初學(xué)教程里那亂糟糟的 Tailwind 評(píng)判它了。

如果你的代碼亂成一鍋粥，別全寫在組件里，先搭好設(shè)計(jì)體系。

Tailwind 不丑，是你用得沒門道。