Tailwind CLI's --watch not working properly.

[mostafizurtaif]

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.

Some useful observations:

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.

Also, it works when I hit the S button while pressing Ctrl multiple times. In other words, if I save index.html multiple times rapidly, it works fine.

[rica213]

Hello @mostafizurtaif, I've got the same issue. Did you find any fix to it?

[jakemauer]

I'm having this issue as well. --watch does not actually watch files on my machine. I'm on MacOS 13.2 Intel 64bit running Tailwindcss CLI v3.2.4. The problem occurs both with the NPM installed version and the standalone MacOS binary.

[sibeduli]

any solution this year perhaps?

[sibeduli]

1 year later no update? using latest tailwind still produce the same thing

[jdknight]

I'm new to Tailwind CSS and noticed two unexpected things when trying to use the --watch option.

First, it appears that when watching for changes, only new classes or modifications were being updated. When removing classes on some elements, they were not optimized out on a watch event (only removed if I restarted tailwindcss). This made me believe the utility was not watching when I toggled the use of some classes in some HTML templates, but maybe there is a design reason to only add new/updated styles in a watch event.

Second, I had created a Bash script to perform a series of watch-related actions, one being using tailwindcss. When invoked in this script, it was closing stdin for tailwindcss, which appears to stop the program from watching. To workaround this, I updated the watch request to always occur (--watch=always) which resolved my issue.

(Windows; tailwindcss 3.4.1)

[billksun]

How did you find out about --watch=always? This saved my dev environment workflow!

[jdknight]

Stumbled upon it by chance when a search engine brought me to #9966. Not sure why it is not in the official documentation (perhaps just overlooked?).

[leo-petrucci]

Thank you, don't know what I would've done without this answer. I'm using Turborepo and it fixed my issues 👍

[Codearick]

Use Vite if you're using React with it, it might solve the problem.

[rickalex21]

Still don't work, as a work around I use:

        "build:tailwind": "tailwindcss -i src/styles.css -o dist/css/styles.css",

Then I use chokidar to watch the file.

I also tried what @jdknight mentioned --watch=always and it does not work.

Tried versions 3.4.14 and 3.4.13

[singh-inder]

You can give this solution a try