Tailwind CLI's --watch not working properly

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!

user_9504633 · Answer

Assuming this is how you think Tailwind CLI works:

This is your input.css:

.aaa {
  color: blue;
}

This is your index.html:

...
AAA

You execute npm run build
You go to index.html and add an HTML element with some Tailwind class

...
AAA
BBB

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

...
AAA
BBB

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

...
AAA
BBB

et voila:

.font-bold {
  font-weight: 700;
}
.underline {
  -webkit-text-decoration-line: underline;
          text-decoration-line: underline;
}
.aaa {
  color: blue;
}

Tailwind CLI's --watch not working properly

1 Answers