平時用的很爽的 Vibe Coding，一旦遇到不明原因的問題，就像掉到黑洞裡面

每個 AI 都沒用，讓我痛苦了三個月

Vibe Coding 是很讓人心情愉悅的開發方式。就是那種「Claude，麻煩你幫我寫個響應式的表格」，然後看著程式碼像變魔術一樣出現在螢幕上。Tailwind 一把罩，AI 當助手，寫 code 就像在寫詩一樣優雅。我甚至開始覺得自己是個藝術家了。

直到那天。

黑洞初現：當表格開始變形

那是個平凡的週二下午，我正在用 Claude Sonnet 帮我寫一篇 MDX blog。一開始都很順利，直到我發現表格的高度有點... 不太對勁。

「沒關係，」我心想，「小 case，ChatGPT 可以幫我調好。」

結果？表格像是有了自己的意識，你給它 py-1，它給你一個超大的空隙。你改成 py-0.5，它還是那麼大。TanStack Table 不聽話，Shadcn Table 也是一樣。我的表格們失控了。

最詭異的是什麼？時好時壞。有時候 ChatGPT 可以經過多次修改後表格就正常了，有時候怎麼改都沒用。就像薛丁格的表格，你不知道打開瀏覽器時它是正常還是不正常。

AI 大逃殺：當每個模型都讓你失望

Round 1: Claude Sonnet - 我的老夥伴背叛了我

Claude Sonnet 是我的主力，我們一起寫過無數文章。但這次，它徹底讓我失望了。

每次我讓它把 Markdown table 轉成 TanStack Table，Table 都會變形。

我：請修正！
10 分鐘後
我：不行欸，高度還是不對。

Claude：「那試試調整 line-height？」

我試了。沒用。

Claude：「要不要改用原生 HTML table？」

無奈的我也只能接受。

Round 2: ChatGPT - 分析很專業，答案很離譜

「ChatGPT o3 你好貴，」我一邊用著一邊想，「你應該給我個不錯的答案吧？」

GPT 給了我一個三百字的分析，從 CSS box model 講到瀏覽器渲染機制，聽起來超專業。結果呢？它建議我用 !important覆蓋所有樣式。

我：我就照做了！

但結果還是一樣，表格它還是不聽話。

Round 3: 其他 AI 們的奇幻冒險

• Gemini Pro：很努力，但會在原地踏步。「試試看這個... 不行？那試試那個...」無限循環。
• DeepSeek：偶爾會有神來一筆，但也不是每次都有用。
• Windsurf SWE-1：完全沒力，感覺像是在敷衍我。

每換一個 AI，我的焦慮就增加一分。因為沒有找到正確答案，人會開始懷疑自己。是不是我的運氣太差？是不是這個問題根本無解？

看到表格會怕：PTSD 發作期

到了第二個月，我已經對表格產生了生理性的恐懼。Markdown Table 一出現，我就會開始頭疼。

最慘的是什麼？當你找不到問題根源時，你只能不斷地撞牆。我試過：

• 重寫整個組件（三次）
• 換 CSS framework（差點移除 Tailwind，還好理智阻止了我）
• 懷疑是 Next.js 的問題
• 懷疑是 MDX 的問題
• 懷疑是瀏覽器的問題
• 懷疑人生

Browser DevTools 看不出任何異常，Computed Style 顯示一切正常，但表格就是有多餘的空隙。這種感覺就像你明明聽到房間裡有蚊子，但就是找不到牠在哪裡。

MCP 是好工具，但當時的我還不知道

其實 Model Context Protocol 的工具早就在那裡了。Playwright、Puppeteer、Browser-tools... 但當時的我就像個拿著 iPhone 16 還在找公共電話的原始人。

我甚至沒想到可以讓 AI 直接看網頁、直接操作瀏覽器。我還在那邊複製貼上程式碼，像個傻子。

Claude Opus 4：巨人登場

第三個月，我已經快崩潰了。有篇文章二十幾個表格，每次調整完發現內容要修改，表格全部要重做。三天沒睡覺，我覺得自己快不行了。

就在這時，Claude Opus 4 橫空出世。

「Opus 只能用在刀口上，」我告訴自己。Claude Pro 的訂閱，Opus 只能用幾次。但我已經沒有選擇了。

我打開 MCP 的瀏覽器工具，讓 Opus 開始工作。

二十分鐘過去了...

然後，奇蹟發生了。

真相大白：原來是 prose 在搞鬼

「我找到問題了！問題出在 tbody 上的 divide-y 類別，它為每個 tr 添加了 1px 的下邊框，這導致了額外的高度。」

但這還不是全部。Opus 繼續挖掘：

「主要問題有兩個：

1. prose 類別的影響：表格在 prose 容器內，這會影響表格的樣式
2. divide-y 邊框： tbody 上的 divide-y 類別為每行添加了 1px 的邊框」

prose？PROSE？！

我花了三個月，測試了無數個 AI，寫了上萬行程式碼，原來問題就是一個該死的 prose 類別？

原來 Tailwind Typography 的 prose 會自動為所有內部元素加上「優美」的排版樣式，包括更大的 line-height、額外的 padding... 這就是為什麼我的表格總是有莫名其妙的空隙！

解決方案簡單到讓人想哭：

<div className="my-8 ... not-prose">
  <!-- 表格內容 -->
</div>

就這樣。not-prose。九個字母。解決了我三個月的噩夢。

終於可以睡個好覺：但故事還沒結束

找到答案的那個晚上，我睡了 12 個小時。醒來後，我把所有舊表格都翻出來測試。果然，加上 not-prose 後，世界恢復了正常。

我試著直接改了 tailwind.config，希望能一勞永逸。但測試後發現，根本沒用。我也想過要不要直接卸載 Typography plugin，但... MDX 太好用了，Markdown 文章是主流，AI 能快速產生 markdown 和 React 組件。Typography 不能卸載。

這就是取捨。就像 vibe coding 本身一樣 - 它給你速度和創造力，但有時候也會讓你掉進莫名其妙的坑裡。

黑洞啟示錄

經過這次經歷，我學到了幾件事：

1. 表格只是小問題。真正的問題是當你不知道問題在哪裡時，再強大的 AI 也幫不了你。
2. Vibe coding 很爽，但基礎還是要有。開發者工具、CSS、瀏覽器運作原理... 這些老派的知識在關鍵時刻能救你一命。
3. 工具會進化。MCP 這類工具的出現，讓 AI 能更直接地理解和操作網頁。未來可能會有更多這樣的突破。
4. 不要太依賴單一 AI。每個模型都有盲點，多試幾個，說不定哪個就靈光一現了。

Tailwind 被一些人討厭不是沒有原因的。當你不理解它在背後做了什麼時，debug 就像在黑暗中摸索。

速查手冊（給下一個受害者）

如果你也遇到了 Typography 相關的詭異問題，這裡有個檢查清單：

症狀

• 表格、列表或其他元素有莫名的間距
• 明明設定了樣式但不生效
• 同樣的組件在不同地方表現不一致

可能的兇手

• prose 類別（幾乎總是它）
• prose-lg、prose-xl 等尺寸修飾符
• 全域的 Typography 設定

解決方案

1. 局部排除：使用 not-prose
2. 覆蓋特定元素： prose-table:p-0、prose-td:py-1 等
3. 自定義 prose 主題：在 tailwind.config.js 中調整

偵錯技巧

// 在 Console 執行，找出所有使用 prose 的容器
document.querySelectorAll('[class*="prose"]')

---

寫到這裡，回想起那三個月的地獄，還是會有點 PTSD。但也慶幸自己撐過來了。

最深的黑暗不是沒有答案，而是不知道問題在哪裡。

當你在 vibe coding 的天堂飛翔時，記得偶爾低頭看看地面。因為你永遠不知道，下一個 prose 什麼時候會出現。

P.S. 如果這篇文章幫到了你，記得在評論區分享你的血淚史。讓我知道我不是唯一一個被 Tailwind Typography 搞瘋的人。

P.P.S. Claude Opus 4，如果你在看這篇文章，謝謝你救了我的命。