Penyemak imbas tidak mengemas kini secara automatik apabila menggunakan Tailwindcss

Question

Setiap kali saya menambah kelas, untuk melihat perubahan saya perlu berhenti menjalankan nuxt, muat semula tetingkap Kod VS dan jalankan "npm run dev" sekali lagi. Kemudian saya dapat melihat perubahan

Tailwind.config.js saya:

/**@type {import('tailwindcss').Config}*/
module.exports = {
    kandungan: [
        './components/**/*.{js,vue,ts}',
        './layouts/**/*.vue',
        './pages/**/*.vue',
        './plugins/**/*.{js,ts}',
        './nuxt.config.{js,ts}'
    ],
    tema: {
        lanjutkan: {}
    },
    pemalam: [require('daisyui')]
}

Saya meletakkan fail tailwind.css dalam assets/css/tailwind.css

Dan importnya ke dalam komponen reka letak saya: layouts/default.vue

Nuxt.config.ts saya:

// https://v3.nuxtjs.org/api/configuration/nuxt.config
eksport lalai defineNuxtConfig({
    css: ['~/assets/css/tailwind.css'],
    bina: {
        postcss: {
            postcssPilihan: {
                pemalam: {
                    tailwindcss: {},
                    autoprefixer: {}
                }
            }
        }
    }
})

Pakej saya.json:

{
  "peribadi": benar,
  "skrip": {
    "bina": "binaan nuxt",
    "dev": "nuxt dev",
    "jana": "jana nuxt",
    "pratonton": "pratonton nuxt",
    "pasca pemasangan": "nuxt prepare"
  },
  "DevDependencies": {
    "nuxt": "3.0.0-rc.11",
    "tailwindcss": "^3.1.8"
  },
  "kebergantungan": {
    "daisyui": "^2.31.0",
    "firebase": "^9.10.0"
  }
}
            

Answer 1

Saya menganggap Nuxt.js sebagai rangka kerja untuk pemaparan sebelah pelayan seperti NextJs for React. Dengan cara ini, semua data dan HTML dipaparkan oleh pelayan Nuxt, yang menghantar himpunan "html/css" yang dijana kepada klien hanya mengandungi kelas css yang anda gunakan dalam kod anda. Jadi saya akan katakan adalah perkara biasa untuk membina semula setiap kali anda ingin melihat perubahan pada kelas css yang baru anda tambahkan.

Jika anda ingin melihat perubahan secara terus tanpa membina semula setiap kali (cth. dalam alat pembangun penyemak imbas untuk menulis kelas css dengan mudah), saya syorkan anda memautkan ke fail akar HTML (index.html), lengkap dengan jadual CSS Tailwind. Anda boleh mendapatkan versi pada halaman dokumentasi tailwind di sini: https://tailwindcss. com/_next/static/css/b606771d290f9908.css

Anda kemudian boleh memadamkan pautan pada penghujung kerja pembangunan anda.