Tailscan for Tailwind CSS

核心概念是你從不離開頁面。把游標移到任一元素上就能看到它的 Tailwind 類別，按空白鍵釘住，然後在設計即時更新的同時新增、修改或隱藏類別。改動會依元素保留，所以你可以放心實驗，做完再一口氣複製所有編輯。對受不了存檔再重載這種循環的人來說，這就是讓這套工具值回票價的功能。

第 3 版加入一個 AI 面板，能把自然語言需求轉成 Tailwind 改動。你輸入類似「把這顆按鈕放大並加上圓角」，類別就會自動套用，也可以選擇把它們保留成看得見的工具類別。它還能把你做的改動匯出成乾淨的程式碼或可重複使用的提示詞，讓同一種樣式套用到整個專案。要注意的是額度：方案每月允許 1000 次 AI 請求，超過後當月剩下時間會改用較便宜的模型。

你可以一鍵將元素轉為 Tailwind 元件。Tailscan 能把任何網站上的任何元素變成可重複使用的 Tailwind CSS 元件。也就是說，你可以挑一張喜歡的卡片、導覽列或按鈕，轉換之後把標記放进自己的專案，不必一個類別一個類別重寫。這正是把檢視變成實際產出的關鍵，也是大家會拿它用在別人網站上的原因。

你可以加上任何 Tailwind 類別與變體，包括你的建置流程會清除掉的，以及使用任意值的類別。帶著你自己的 Tailwind 設定進來，你的主題擴充會立刻出現，建議清單因此對得上你的專案，而不是死板的一般 Tailwind。最後這點對倚賴自訂尺度的團隊尤其重要，因為一個只認標準值的檢視器，很快就會讓他們覺得沒用。

Tailscan 會接進瀏覽器的開發者工具。你可以在開發者工具面板裡編輯類別，並使用原生的元素選取，每個類別都會隨著你輸入即時編譯。自動完成會提示正確的類別並預覽它的顏色，同時斷點讀數會告訴你目前看的是哪個 Tailwind 斷點。這差別在於，你是得猜一個類別名稱，還是有人直接告訴你。

計算區域與輔助線會顯示元素周圍實際的外距與內距，對齊問題從此不再是憑感覺猜。內建的截圖工具能擷取畫面一部分，方便快速交付，你也可以複製類別清單，或是把改動一併帶著複製整個元素。都是些小方便，但工作一整天累積下來很有感。