「及時」模式:全新世代的 Tailwind CSS
Tailwind CSS on GitHub

編輯器支援

當使用 Tailwind CSS 來開發時,這些插件和配置設定可以改善你的開發者體驗

語法支援

Tailwind CSS 使用了許多自訂像是 @tailwind@apply@screen 之類的 CSS @規則 (at-rules),並且在許多編輯器中可能無法辨識這些規則而觸發警告或錯誤。

而這個問題的解決方案大多是為你的編輯器、IDE 安裝像是 VS Code 上的 PostCSS Language Support 這種 PostCSS 語言支援套件,就可以使 Tailwind CSS 運作正常。 (就不會有警告或錯誤提示)

但某些情況下,如果你的編輯器對 CSS 檔的語法要求特別嚴格,那麼你就必須關閉原生 CSS 語法偵測、驗證的功能。

IntelliSense for VS Code

這個官方 Visual Studio Code 擴充套件 Tailwind CSS IntelliSense 提供使用者如自動完成、語法強調、及語法檢查等許多優秀的特色功能,以增強 Tailwind 的開發體驗。

  • 自動完成 (autocomplete) 智慧提示 class 名稱,以及 CSS 函數與指令
  • 語法檢查 (Linting) 突顯在你 CSS 和 HTML 中的錯誤和潛在 bugs。
  • 懸停預覽 (Hover Previews) 在 Tailwind class 名稱上懸停可看到完整的 CSS。
  • 語法強調 (Syntax Highlighting) 提供語法定義來正確地強調 Tailwind 功能。

GitHub 上 的專案來了解更多,或者直接在 Visual Studio Code 中安裝 然後開始使用。

JetBrains IDEs

WebStorm、PhpStorm 等 JetBrains IDE 中包含支援在 HTML中 Tailwind CSS 智慧語法完成以及 @apply 指令的使用。

閱讀關於在 JetBrains IDE 中支援 Tailwind CSS 的資訊