Browser doesn't update automatically when using Tailwindcss

Question

Every time I add a class, to see the changes I have to stop running nuxt, reload the VS Code window and run "npm run dev" again. Then I can see the changes

My tailwind.config.js:

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

I placed the tailwind.css file in assets/css/tailwind.css

And import it into my layout component: layouts/default.vue

My nuxt.config.ts:

// https://v3.nuxtjs.org/api/configuration/nuxt.config
export default defineNuxtConfig({
    css: ['~/assets/css/tailwind.css'],
    build: {
        postcss: {
            postcssOptions: {
                plugins: {
                    tailwindcss: {},
                    autoprefixer: {}
                }
            }
        }
    }
})

My package.json:

{
  "private": true,
  "scripts": {
    "build": "nuxt build",
    "dev": "nuxt dev",
    "generate": "nuxt generate",
    "preview": "nuxt preview",
    "postinstall": "nuxt prepare"
  },
  "devDependencies": {
    "nuxt": "3.0.0-rc.11",
    "tailwindcss": "^3.1.8"
  },
  "dependencies": {
    "daisyui": "^2.31.0",
    "firebase": "^9.10.0"
  }
}

Answer 1

I think of Nuxt.js as a framework for server-side rendering like NextJs for React. This way, all data and HTML is rendered by the Nuxt server, which sends the generated "html/css" bundle to the client containing only the css classes that you use in your code. So I would say it's normal to rebuild every time you want to see changes to the css class you just added.

If you want to see the changes directly without rebuilding each time (such as in the browser dev tools to easily write css classes), I recommend linking to the HTML root file (index.html), complete with the Tailwind CSS table. You can find a version on the tailwind documentation page here: https://tailwindcss. com/_next/static/css/b606771d290f9908.css

You can then delete the link at the end of your development work.