I keep having to run npx tailwindcss -i ./src/input.css -o ./public/output.css to see the expected output of my code

In my project, I will have a div that is styled:

<div class="pt-14 px-30">
<p>Lorem Ipsum</p>
</div>

and if i change it to <div class="pt-10 px-20": both properties will be ignored.
After looking on Stack Overflow, I ran the command npx tailwindcss -i ./src/input.css -o ./public/output.css and the expected output would show, but I would have to run this command every time I changed my CSS to see the correct output. Is there a way I can get around this and see the output after saving the file?

>Solution :

You can do this via tools like npm scripts, gulp, or webpack.

Open your package.json file and add a script

"scripts": {
  "watch:css": "tailwindcss -i ./src/input.css -o ./public/output.css --watch"
}

Open your terminal and run the script you just created:

npm run watch:css