Der Browser wird bei Verwendung von Tailwindcss nicht automatisch aktualisiert

Question

Jedes Mal, wenn ich eine Klasse hinzufüge, muss ich die Ausführung von nuxt stoppen, das VS-Code-Fenster neu laden und „npm run dev“ erneut ausführen, um die Änderungen zu sehen. Dann kann ich die Änderungen sehen

Mein Rückenwind.config.js:

/**@type {import('tailwindcss').Config}*/
module.exports = {
    Inhalt: [
        './components/**/*.{js,vue,ts}',
        './layouts/**/*.vue',
        './pages/**/*.vue',
        './Plugins/**/*.{js,ts}',
        './nuxt.config.{js,ts}'
    ],
    Thema: {
        verlängern: {}
    },
    Plugins: [require('daisyui')]
}

Ich habe die Datei tailwind.css in asset/css/tailwind.css

abgelegt.

Und importiere es in meine Layout-Komponente:layouts/default.vue

Meine nuxt.config.ts:

// https://v3.nuxtjs.org/api/configuration/nuxt.config
Standard exportieren defineNuxtConfig({
    CSS: ['~/assets/css/tailwind.css'],
    bauen: {
        Postcss: {
            postcssOptions: {
                Plugins: {
                    tailwindcss: {},
                    Autopräfixer: {}
                }
            }
        }
    }
})

Mein package.json:

{
  "privat": wahr,
  "Skripte": {
    "build": "nuxt build",
    "dev": "nuxt dev",
    "generieren": "nuxt generieren",
    "Vorschau": "Nuxt-Vorschau",
    "postinstall": "nuxt Prepare"
  },
  "devDependencies": {
    „nuxt“: „3.0.0-rc.11“,
    "tailwindcss": "^3.1.8"
  },
  "Abhängigkeiten": {
    "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

然后您可以在开发工作结束时删除该链接。