why do I have to rebuild tailwind every time I make a change to my templates?

Question

I'm trying to use tailwind postcss set up but tailwind is not recognizing new classes within my html files. I have to rerun the build process every time I add a class to my html templates. I'm getting no errors when I run my build process.

tailwind config

/** @type {import('tailwindcss').Config} */
module.exports = {
content: ['../../templates/auctions/*.html', '../../templates/**/*.html'],
theme: {
    extend: {},
},
variants: {},
plugins: [],
}

package.json

 {
  "name": "jstools",
  "version": "1.0.0",
  "main": "index.js",
  "scripts": {
    "build": "tailwind build -i ../auctions/tailwind.css -o ../auctions/output.css && cleancss -o ../auctions/output.min.css ../auctions/output.css"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "dependencies": {
    "clean-css-cli": "^5.6.1"
  },
  "description": "",
  "devDependencies": {
    "autoprefixer": "^10.4.12",
    "postcss": "^8.4.18",
    "postcss-cli": "^10.0.0",
    "tailwind-watch": "^0.0.6",
    "tailwindcss": "^3.2.1"
  }
}

Answer 1

There may be many causes, such as caching issues or changes in the configuration. When a rebuilt is necessary every time a new class is added to the HTML, you can add --watch in the build command in your package.json file:

{
    "scripts": {
        "tailwind-watch": "tailwindcss build -i resources/css/site.css -o public/css/style.css --watch"
    },
}