編輯器設定（Editor setup）

語法支援（Syntax support）

Tailwind CSS 使用自訂 CSS 語法，例如 @theme、@variant 和 @source，在某些編輯器中，這可能會觸發無法識別這些規則的警告或錯誤。

如果你使用 VS Code，我們的官方 Tailwind CSS IntelliSense 外掛包含專屬的 Tailwind CSS 語言模式，支援 Tailwind 使用的所有自訂 at-rules 和函式。

在某些情況下，如果你的編輯器對 CSS 檔案中預期的語法非常嚴格，你可能需要停用原生的 CSS linting/驗證功能。

Cursor

Cursor 是一款原生 AI 程式碼編輯器，具有情境感知自動完成和內建編碼代理等功能。由於它支援 VS Code 擴充功能，你熟悉的所有 Tailwind CSS 工具都可以直接使用——包括我們的官方 Tailwind CSS IntelliSense 擴充功能和用於類別排序的 Prettier 外掛。

查看並下載 Cursor。

Zed

Zed 是一款快速、現代的程式碼編輯器，從頭開始設計以支援最先進的開發工作流程，包括使用 AI 進行代理式編輯。它內建支援 Tailwind CSS 自動完成、linting 和 hover 預覽功能，無需安裝和設定額外的擴充功能。它也與 Prettier 緊密整合，因此當安裝了我們的官方 Prettier 外掛 時，可以與 Zed 無縫協作。

查看 Zed 並了解更多關於它如何與 Tailwind CSS 協作的資訊。

VS Code 的 IntelliSense（IntelliSense for VS Code）

官方 Tailwind CSS IntelliSense Visual Studio Code 擴充功能透過提供進階功能（如自動完成、語法高亮和 linting）來增強 Tailwind 開發體驗。

• 自動完成 — 為通用類別以及 CSS 函式和指令提供智慧建議。
• Linting — 在 CSS 和標記中高亮顯示錯誤和潛在的問題。
• Hover 預覽 — 當你將滑鼠懸停在通用類別上時，顯示完整的 CSS。
• 語法高亮 — 使用自訂 CSS 語法的 Tailwind 功能能夠正確高亮顯示。

查看 GitHub 上的專案了解更多資訊，或將它加入 Visual Studio Code 立即開始使用。

使用 Prettier 排序類別（Class sorting with Prettier）

我們維護一個官方的 Prettier 外掛，可以依照我們建議的類別順序自動排序你的類別。

它可以與自訂的 Tailwind 設定無縫協作，而且因為它只是一個 Prettier 外掛，所以在任何 Prettier 可以運作的地方都可以使用——包括每個熱門的編輯器和 IDE，當然還有命令列。

<!-- 排序前 --><button class="text-white px-4 sm:px-8 py-2 sm:py-3 bg-sky-700 hover:bg-sky-800">Submit</button><!-- 排序後 --><button class="bg-sky-700 px-4 py-2 text-white hover:bg-sky-800 sm:px-8 sm:py-3">Submit</button>

查看 GitHub 上的外掛了解更多資訊並開始使用。

JetBrains IDE

JetBrains IDE（如 WebStorm、PhpStorm 等）在 HTML 中支援智慧 Tailwind CSS 自動完成功能。

了解更多關於 JetBrains IDE 中的 Tailwind CSS 支援 →