Changes in tailwind.config.js not reflected in output.css when adding or removing classes in HTML

Question

When I add a new class to the HTML, I need to make changes in the tailwind.config.js file and save it. The same applies when I remove a class from the HTML; the corresponding style in the output.css file may not be removed, so I have to save the changes again in the tailwind.config.js file.

The package.json file:

{
  "name": "vue-js",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "tailwindcss": "^3.3.2"
  }
}

The tailwind.config.js file:

{
  "name": "vue-js",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "tailwindcss": "^3.3.2"
  }
}

I am supposed to run npm run build or dev or npx tailwindcss -i ./src/input.css -o ./dist/output.css --watch once, and each time I saved the html file, tailwind is supposed to add my new classes to output.css. But it doesn't work. I have followed the documentation on the official Tailwind CSS website, and I have also installed extensions in VS Code such as Live Preview, Live Server, and Tailwind Intellisense, but it still doesn't work. Please help me, I want to learn Tailwind CSS, but I am frustrated because of this.

I have tried watching the YouTube channel 'Web Programming UNPAS' and followed the exact steps, but it still remains the same.

Answer 1

Your Tailwind configuration is incorrect and seems to have duplicate content from your package.json. Instead, consider reading the documentation on the correct format for your Tailwind configuration file.