Nuxt TailwindCSS 安裝教學與踩坑紀錄

安裝 @nuxtjs/tailwindcss

在 Nuxt Modules 網站上可以找到 @nuxt/tailwindcss 套件的資訊，官方提供了數種方式可以快速安裝。

透過不同方式安裝依賴： Nuxt

npx nuxi@latest module add tailwindcss

pnpm

pnpm i -D @nuxtjs/tailwindcss

yarn

yarn add --dev @nuxtjs/tailwindcss

npm

npm install --save-dev @nuxtjs/tailwindcss

接者要在 @/nuxt.config.ts 中新增此模組：

export default defineNuxtConfig({
  modules: ["@nuxtjs/tailwindcss"],
})

理論上至此就大功告成了，你就可以在 *.vue、*.html 等檔案中使用 TailwindCSS 了！

但是若是會報錯的話，請繼續看往下閱讀：

無法解析 TailwindCSS 錯誤

在透過 pnpm dev 嘗試開啟本地開發伺服器時，在終端機中看到了如下報錯：

ERROR  Pre-transform error: Can't resolve 'tailwindcss' in '/noefly_me' 下午11:10:40
  Plugin: @tailwindcss/vite:generate:serve
  File: virtual:nuxt:/noefly_me/.nuxt/tailwind.css

而開啟了網頁卻發現 500 錯誤：

這是因為 Nuxt 在開啟本地開發伺服器，處理 @nuxtjs/tailwindcss 套件時找不到對應的前置依賴。

照理說，前置依賴應該隨著套件安裝時自動下載，但是出於眾多可能的原因，導致沒有一起被安裝。

解決方法很簡單，我們手動將前置依賴安裝就好了！

pnpm i -D tailwindcss

yarn add --dev tailwindcss

npm install --save-dev tailwindcss

最後再測試一下，一樣透過 pnpm dev 啟動本地開發伺服器，會發現問題被修復了！

Nuxt TailwindCSS 安裝教學與踩坑紀錄

安裝 @nuxtjs/tailwindcss

無法解析 TailwindCSS 錯誤

參考資料