Tailwind__css- live server not working properlly

Question

This is my first time in here so at first I want to say Hello to everyone! I just start using tailwindcss , I've watch few tutorials on YT and I've done exaclly everything as in video.The issue I got with live server extension, I have to press couple times ctr+s to see changes on my web, same situation with prettier.If anyone had same problem pls write down how to solve it.

Answer 1

I can't get exactly what you are asking for, but i faced a similar problem like this.

When adding tailwind classes to html element and saving the file while live server(vs code) is running, but the browser don't show the changes unless I reload it.

For fixing this issue,

Go to live server extension -> extension settings -> scroll down until you find

Liver Server -> clik on the ⚙️ -> extension settings-> Full Reload -> enable it.

Then restart the live server, there we go you fixed the issue.

It works for me, happy day!!!

Answer 2

If you've restarted VS Code then make sure to run npm run watch to execute the watch command of your package.json file.

{
  "name": "projectname",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "build": "tailwindcss -i ./input.css -o ./css/main.css",
    "watch": "tailwindcss -i ./input.css -o ./css/main.css --watch"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "tailwindcss": "^3.3.2"
  }
}

And then run live server again.