使用 Tailwindcss 時瀏覽器不會自動更新

Question

每次我新增一個類別時，要查看更改，我必須停止運行 nuxt，重新載入 VS Code 視窗並再次運行「npm run dev」。然後我就可以看到變化

我的 tailwind.config.js ：

/**@type {import('tailwindcss').Config}*/
module.exports = {
    content: [
        './components/**/*.{js,vue,ts}',
        './佈局/**/*.vue',
        './pages/**/*.vue',
        './插件/**/*.{js,ts}',
        './nuxt.config.{js,ts}'
    ],
    theme: {
        extend: {}
    },
    plugins: [require('daisyui')]
}

我把 tailwind.css 檔案放在 assets/css/tailwind.css 中

並將其匯入到我的佈局元件中：layouts/default.vue

我的 nuxt.config.ts：

// https://v3.nuxtjs.org/api/configuration/nuxt.config
export default defineNuxtConfig({
    css: ['~/assets/css/tailwind.css'],
    build: {
        postcss: {
            postcssOptions: {
                plugins: {
                    tailwindcss: {},
                    autoprefixer: {}
                }
            }
        }
    }
})

我的package.json：

{
  "private": true,
  "scripts": {
    "build": "nuxt build",
    "dev": "nuxt dev",
    "generate": "nuxt generate",
    "preview": "nuxt preview",
    "postinstall": "nuxt prepare"
  },
  "devDependencies": {
    "nuxt": "3.0.0-rc.11",
    "tailwindcss": "^3.1.8"
  },
  "dependencies": {
    "daisyui": "^2.31.0",
    "firebase": "^9.10.0"
  }
}

Answer 1

我認為 Nuxt.js 是一個像 NextJs for React 一樣進行伺服器端渲染的框架。 這樣，所有資料和 HTML 都由 Nuxt 伺服器呈現，該伺服器將產生的「html/css」套件傳送到客戶端僅包含您在程式碼中使用的 css 類別。 所以我想說，每次你想看到你剛剛添加的 css 類別的更改時，重建是正常的。

如果您想直接查看更改而無需每次重新構建（例如在瀏覽器開發工具中以便輕鬆編寫 css 類），我建議您鏈接到 HTML 根文件 (index.html)，完整的順風CSS表。 您可以在 tailwind 文件頁面上找到一個版本，如下所示：https://tailwindcss。 com/_next/static/css/b606771d290f9908.css

然後您可以在開發工作結束時刪除該連結。