recherche

Maison  >  Questions et réponses  >  le corps du texte

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

<p>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</p> <p>Mon tailwind.config.js :</p> <p> <pre class="brush:js;toolbar:false;">/**@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" } } </pre></p>
P粉009828788P粉009828788459 Il y a quelques jours540

répondre à tous(1)je répondrai

  • P粉398117857

    P粉3981178572023-08-27 12:35:52

    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.

    répondre
    0
  • Annulerrépondre