使用 Tailwindcss 時瀏覽器不會自動更新
<p>每次我新增一個類別時,要查看更改,我必須停止運行 nuxt,重新載入 VS Code 視窗並再次運行「npm run dev」。然後我就可以看到變化</p>
<p>我的 tailwind.config.js :</p>
<p>
<pre class="brush:js;toolbar:false;">/**@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')]
}</pre>
</p>
<p>我把 tailwind.css 檔案放在 assets/css/tailwind.css 中</p>
<p>並將其匯入到我的佈局元件中:layouts/default.vue</p>
<p>我的 nuxt.config.ts:</p>
<p>
<pre class="brush:js;toolbar:false;">// https://v3.nuxtjs.org/api/configuration/nuxt.config
export default defineNuxtConfig({
css: ['~/assets/css/tailwind.css'],
build: {
postcss: {
postcssOptions: {
plugins: {
tailwindcss: {},
autoprefixer: {}
}
}
}
}
})</pre>
</p>
<p>我的package.json:</p>
<pre class="brush:json;toolbar:false;">{
"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"
}
}
</pre></p>