Tailwindcss does not automatically reflect the changes in the browser - vue.js

Question

Every time that 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 place the tailwind.css file inside assets/css/tailwind.css
And import it inside 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 Nuxt.js is a framework that makes server-side rendering like NextJs for React.
In that way, all of the data and HTMLis rendered by the Nuxt server, which sends a generated "html/css" package to the client with only the css class that you used in your code.
So I would say it's normal to rebuild everytime you want to see your change for the css class you just add.
If you want to see directly the changes without rebuilding each time (like in the browser dev tool in order to write your css class easily), I would advise you to link in the HTML root file (index.html), the complete tailwind css sheet.
You can find a version on the tailwind doc page like this one : https://tailwindcss.com/_next/static/css/b606771d290f9908.css
Then you can remove the link at the end of your dev work.