Le navigateur ne se met pas à jour automatiquement lors de l'utilisation de Tailwindcss

Question

Chaque fois que j'ajoute une classe, pour voir les changements, je dois arrêter d'exécuter nuxt, recharger la fenêtre VS Code et exécuter à nouveau "npm run dev". Ensuite, je peux voir les changements

Mon tailwind.config.js :

/**@type {import('tailwindcss').Config}*/
module.exports = {
    contenu: [
        './components/**/*.{js,vue,ts}',
        './mises en page/**/*.vue',
        './pages/**/*.vue',
        './plugins/**/*.{js,ts}',
        './nuxt.config.{js,ts}'
    ],
    thème: {
        étendre: {}
    },
    plugins : [require('daisyui')]
}</pré>


</p>
<p>J'ai placé le fichier tailwind.css dans Assets/css/tailwind.css</p>
<p>Et importez-le dans mon composant de mise en page : layouts/default.vue</p>
<p>Mon nuxt.config.ts :</p>
<p>

<pre class="brush:js;toolbar:false;">// https://v3.nuxtjs.org/api/configuration/nuxt.config
exporter la définition par défaut de NuxtConfig ({
    css : ['~/assets/css/tailwind.css'],
    construire: {
        post-css : {
            options postcss : {
                plugins : {
                    vent arrière : {},
                    préfixe automatique : {}
                }
            }
        }
    }
})</pré>


</p>
<p>Mon package.json :</p>
<pre class="brush:json;toolbar:false;">{
  "privé" : vrai,
  "scripts" : {
    "build": "nuxt build",
    "dev": "nuxt dev",
    "générer": "nuxt générer",
    "aperçu" : "aperçu nuxt",
    "postinstall": "nuxt préparer"
  },
  "Dépendances dev" : {
    "nuxt": "3.0.0-rc.11",
    "tailwindcss": "^3.1.8"
  },
  "dépendances" : {
    "Daisyui": "^2.31.0",
    "firebase": "^9.10.0"
  }
}

Answer 1

Je considère Nuxt.js comme un framework de rendu côté serveur comme NextJs pour React. De cette façon, toutes les données et HTML sont restitués par le serveur Nuxt, qui envoie le bundle "html/css" généré au client contenant uniquement les classes CSS que vous utilisez dans votre code. Je dirais donc qu'il est normal de reconstruire chaque fois que vous souhaitez voir des modifications apportées à la classe CSS que vous venez d'ajouter.

Si vous souhaitez voir les modifications directement sans reconstruire à chaque fois (par exemple dans les outils de développement du navigateur pour écrire facilement des classes CSS), je vous recommande de créer un lien vers le fichier racine HTML (index.html), complété par la table CSS Tailwind. Vous pouvez trouver une version sur la page de documentation tailwind ici : https://tailwindcss. com/_next/static/css/b606771d290f9908.css

Vous pourrez ensuite supprimer le lien à la fin de votre travail de développement.