Tailwind CLI's --watch not working properly - tailwind-css

Question

Each time I add a new class to the index.html file, I need to rebuild the output.css file manually.
The package.json file:
{
"name": "tailwind-practice",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"build": "npx tailwindcss --watch -i ./input.css -o ./output.css"
},
"keywords": [],
"author": "",
"license": "ISC",
"devDependencies": {
"tailwindcss": "^3.1.7"
}
}
The tailwind.config.js file:
/** #type {import('tailwindcss').Config} */
module.exports = {
screens: {
'sm': '480px',
'md': '768px',
'lg': '1440px',
},
content: ['./index.html'],
theme: {
extend: {},
},
plugins: [],
}
I am supposed to run npm run build once, and each time I saved the html file, tailwind is supposed to add my new classes to output.css. But it doesn't. I checked the file after saving index.html and I couldn't find my new classes there. But the CLI shamelessly said it rebuilt it in 20ms. I needed to run npm run build each time to successfully build my css file. Also, I deleted my previous nodejs installation and reinstalled the current version, updated VS Code, updated Google Chrome, and now, I am considering moving back to Windows from Manjaro.
Edit: A useful observation.
After saving index.html, the CLI said this:
Rebuilding...
Done in 27ms.
But when I stopped the process and reran npm run build, it said:
Rebuilding...
Done in 198ms.
There is a relatively huge time delay when it actually works.
Edit 2:
It works when I save index.html multiple times rapidly.
I moved from Manjaro to Ubuntu, and it still doesn't work!

Answer 1

You need to add these to your input.css to make the --watch work properly.
#tailwind base;
#tailwind components;
#tailwind utilities;
Without these, TW won't know from where it should pull info for your CSS classes and write a processed version in output.css
Let's say you wrote <h1 class="underline">Hello world! </h1> in index.html.
Tw needs to look for information on how it can parse + process the underline class and what should be written in output.css regarding this class.
Try it and let me know if it works.

Answer 2

try changing
from
npx tailwindcss --watch -i ./input.css -o ./output.css
to
npx tailwindcss -i ./input.css -o ./output.css --watch

Answer 3

Assuming this is how you think Tailwind CLI works:
This is your input.css:
.aaa {
color: blue;
}
This is your index.html:
...
<div class="aaa">AAA</div>
You execute npm run build
You go to index.html and add an HTML element with some Tailwind class
...
<div class="aaa">AAA</div>
<div class="font-bold">BBB</div>
You expect your output.css to be magically built into this:
.aaa {
color: blue;
}
.font-bold {
font-weight: 700;
}
This is how Tailwind CLI actually works:
In your input.css you have to first specify which Tailwind layers you think you will use in your index.html. Let's add a layer called utilities which enables you to use Tailwind classes such as font-bold, underline, etc.
#tailwind utilities;
.aaa {
color: blue;
}
You execute npm run build
You go to index.html and add an HTML element with some Tailwind class which belongs to the utilities layer
...
<div class="aaa">AAA</div>
<div class="font-bold">BBB</div>
You go to output.css et voila - the Tailwind class is there:
.font-bold {
font-weight: 700;
}
.aaa {
color: blue;
}
You add another Tailwind class from the utilities layer
...
<div class="aaa">AAA</div>
<div class="font-bold underline">BBB</div>
et voila:
.font-bold {
font-weight: 700;
}
.underline {
-webkit-text-decoration-line: underline;
text-decoration-line: underline;
}
.aaa {
color: blue;
}