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

user_11196771 0
Viewed 4593

Edit: This issue is now deprecated since version 3.0.0 of tailwind works with react without having to use CRACO.

While trying to use Tailwind with React in JIT mode the classes that I add have no styles, even after refreshing the page. I have to restart the server for the styles to take effect.

tailwind.config.js:

module.exports = {
    mode: "jit",
    purge: ["./src/**/*.{js,jsx,ts,tsx}", "./public/index.html"],
    ...
}

craco.config.js:

module.exports = {
    style: {
        postcss: {
            plugins: [require("tailwindcss"), require("autoprefixer")]
        }
    }
}

package.json:

{
    "name": "random-name",
    "version": "0.1.0",
    "private": true,
    "dependencies": {
        "@craco/craco": "^6.3.0",
        "react": "^17.0.2",
        "react-dom": "^17.0.2",
        "react-scripts": "4.0.3",
        "web-vitals": "^1.1.2"
    },
    "scripts": {
        "start": "craco start",
        "build": "craco build",
        "test": "craco test",
        "eject": "react-scripts eject"
    },
    "devDependencies": {
        "@tailwindcss/postcss7-compat": "^2.2.17",
        "autoprefixer": "^9.8.8",
        "postcss": "^7.0.39",
        "tailwindcss": "npm:@tailwindcss/postcss7-compat@^2.2.17"
    }
}
tailwind-css reactjs
3 Answers

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.

user_138332180

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

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

Check your package.json for the posctcss version. When I installed Tailwind it was version 7 and I had the same problem. I just updated my postcss to the latest version and it solved the problem for me.

user_139762110
Related