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}*/
모듈.수출 = {
콘텐츠: [
'./comComponents/**/*.{js,vue,ts}',
'./레이아웃/**/*.vue',
'./pages/**/*.vue',
'./플러그인/**/*.{js,ts}',
'./nuxt.config.{js,ts}'
],
주제: {
연장하다: {}
},
플러그인: [require('daisyui')]
}</pre>
</p>
<p>tailwind.css 파일을 자산/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
기본 정의 내보내기NuxtConfig({
CSS: ['~/assets/css/tailwind.css'],
짓다: {
포스트CSS: {
postcss옵션: {
플러그인: {
tailwindcss: {},
자동 접두어: {}
}
}
}
}
})</pre>
</p>
<p>내 package.json:</p>
<pre class="brush:json;toolbar:false;">{
"비공개": 사실,
"스크립트": {
"build": "다음 빌드",
"dev": "nuxt dev",
"generate": "다음 생성",
"preview": "다음 미리보기",
"postinstall": "다음 준비"
},
"devDependency": {
"nuxt": "3.0.0-rc.11",
"tailwindcss": "^3.1.8"
},
"종속성": {
"daisyui": "^2.31.0",
"firebase": "^9.10.0"
}
}
