Tailwindcss를 사용할 때 브라우저가 자동으로 업데이트되지 않습니다.

Question

<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" } }

Answer 1

저는 Nuxt.js가 React용 NextJ와 같은 서버 측 렌더링을 위한 프레임워크라고 생각합니다. 이런 방식으로 모든 데이터와 HTML은 생성된 "html/css" 번들을 코드에서 사용하는 CSS 클래스만 포함하는 클라이언트에 보내는 Nuxt 서버에 의해 렌더링됩니다. 따라서 방금 추가한 CSS 클래스의 변경 사항을 보고 싶을 때마다 다시 빌드하는 것이 정상이라고 말하고 싶습니다.

매번 다시 빌드하지 않고 변경 사항을 직접 확인하려면(예: CSS 클래스를 쉽게 작성하기 위한 브라우저 개발 도구에서) Tailwind CSS 테이블이 포함된 HTML 루트 파일(index.html)에 연결하는 것이 좋습니다. tailwind 문서 페이지(

https://tailwindcss)에서 버전을 찾을 수 있습니다. com/_next/static/css/b606771d290f9908.css

개발 작업이 끝나면 링크를 삭제할 수 있습니다.