Tailwindcss の使用時にブラウザが自動的に更新されない

Question

クラスを追加するたびに、変更を確認するには、nuxt の実行を停止し、VS Code ウィンドウをリロードして、「npm run dev」を再度実行する必要があります。その後、変更が確認できます

私の tailwind.config.js:

/**@type {import('tailwindcss').Config}*/
module.exports = {
    コンテンツ： [
        './components/**/*.{js,vue,ts}',
        './レイアウト/**/*.vue',
        './pages/**/*.vue',
        './プラグイン/**/*.{js,ts}',
        「./nuxt.config.{js,ts}」
    ]、
    テーマ： {
        伸ばす： {}
    }、
    プラグイン: [require('daisyui')]
}

tailwind.css ファイルをassets/css/tailwind.css

に配置しました。

そしてそれをレイアウト コンポーネントにインポートします:layouts/default.vue

私の nuxt.config.ts:

// https://v3.nuxtjs.org/api/configuration/nuxt.config
デフォルトのエクスポートdefineNuxtConfig({
    css: ['~/assets/css/tailwind.css'],
    建てる： {
        postcss: {
            postcssOptions: {
                プラグイン: {
                    追い風: {}、
                    自動プレフィクサー: {}
                }
            }
        }
    }
})

私の package.json:

{
  「プライベート」: true、
  「スクリプト」: {
    "ビルド": "nuxt ビルド",
    "dev": "nuxt dev",
    "生成": "nuxt 生成",
    "プレビュー": "次のプレビュー",
    "postinstall": "nuxt prepare"
  }、
  "開発依存関係": {
    "nuxt": "3.0.0-rc.11"、
    "追い風CSS": "^3.1.8"
  }、
  「依存関係」: {
    "だいすい": "^2.31.0",
    "firebase": "^9.10.0"
  }
}

Answer 1

私は Nuxt.js を React の NextJs のようなサーバーサイド レンダリングのフレームワークだと考えています。 このようにして、すべてのデータと HTML は Nuxt サーバーによってレンダリングされ、コードで使用する CSS クラス のみを含む、生成された「html/css」バンドルがクライアント に送信されます。 したがって、追加した CSS クラスへの変更を確認したい場合は、毎回リビルドするのが普通だと思います。

毎回再構築せずに変更を直接確認したい場合 (CSS クラスを簡単に作成するためのブラウザ開発ツールなど)、Tailwind CSS テーブルを備えた HTML ルート ファイル (index.html) にリンクすることをお勧めします。 。 バージョンは、tailwind ドキュメント ページ (https://tailwindcss) で見つけることができます。 com/_next/static/css/b606771d290f9908.css

その後、開発作業の終了時にリンクを削除できます。