VSCode 噴 Unknown at rule @tailwind 解決方式

前言

Tailwind CSS 是一款 Units 導向的 CSS 框架,它的許多優勢讓大家趨之若鶩的學習與瞭解,但是在 VSCode 開發上時常會遇到 Unknown at rule @tailwind、Unknown at rule @apply 等錯誤訊息,所以這一篇來紀錄一下解決方式。

解決方式

TailwindCSS 基本上會與 PostCSS 一起合作運作的框架,因此在身為前端開發者來講一定很常用 VSCode 開發,但是一定很常看到這個東西

Unknown at rule @tailwind

Unknown at rule @layer

雖然在開發上是沒有什麼太大影響,在 TailwindCSS 官方文件也有描述到這件事情

Tailwind CSS uses a lot of custom CSS at-rules like @tailwind, @apply, and @screen, and in many editors this can trigger warnings or errors where these rules aren’t recognized.

上面簡單來講就是 TailwindCSS 有使用到一些 TailwindCSS 自己自定義的 CSS 語法,所以在許多編譯器在會無法辨別而導致出現錯誤或警告,例如…

  • Unknown at rule @tailwind
  • Unknown at rule @apply
  • Unknown at rule @layer

    等等

而我們本身使用 TailwindCSS 都會搭配 PostCSS,所以就會有一個 postcss.config.js 設定檔,這時候我們只需要替自己的 VSCode 安裝 PostCSS Language Support 套件就可以解決 Unknown at rule @tailwind 的問題囉。

TailwindCSS

參考文獻

Liker 讚賞

這篇文章如果對你有幫助,你可以花 30 秒登入 LikeCoin 並點擊下方拍手按鈕(最多五下)免費支持與牡蠣鼓勵我。
或者你也可以考慮請我喝一杯咖啡

Google AD

撰寫一篇文章其實真的很花時間,如果你願意「關閉 Adblock (廣告阻擋器)」來支持我的話,我會非常感謝你 ヽ(・∀・)ノ