Why styles don't update when saving the files in Tailwind CSS JIT mode and I need to restart the server?

Update

As of Tailwind v3.0+ JIT mode is now a built-in feature.

In Tailwind CSS v3.0, the new engine has gone stable and replaced the classic engine, so every Tailwind project can benefit from these improvements out of the box.

Old Answer

This seems to be a common issue when using tailwind JIT mode and it's explained in troubleshooting guides.

As of Tailwind CSS v2.2+, the JIT engine depends on PostCSS’s directory dependency messages to register your content files as CSS build dependencies with your build tool. These are a fairly new addition to PostCSS (added in May 2021), and not all build tools have been updated to support them yet.

If your CSS isn’t rebuilding when you change your content files, try setting TAILWIND_MODE=watch as part of your watch script to tell Tailwind to use a legacy dependency tracking strategy instead, which works well with many build tools.

Since CRACO is used to configure tailwind CSS for React.js , add this to your package.json file.

{
  // ...
  scripts: {
    "dev": "TAILWIND_MODE=watch craco start",

    // Do not set TAILWIND_MODE for one-off builds
    "build": "craco build",
    // ...
  },
  // ...
}

Also, please note that

You should only set TAILWIND_MODE=watch when you are actually running a dev server/watch process, and only if your build tool doesn’t yet support PostCSS directory dependency messages. This flag is a temporary workaround for incompatible tooling, and will eventually be removed in a future version of Tailwind CSS.

In package.json you should activate watch mode on the start script like

"scripts": {
   "start": "TAILWIND_MODE=watch craco start",
   ...
}