tailwindcss: JIT doesn't seem to be watching and recompiling files when webpack dev server run with TAILWIND_MODE=watch

What version of Tailwind CSS are you using?

2.1.0

What version of Node.js are you using?

14.15.3

What browser are you using?

Brave

What operating system are you using?

macOS

Reproduction repository

Describe your issue

Hey guys,

I’ve a well established webpack setup, worked with tailwind 1 for a long time.

However I’m trying to migrate to Tailwind 2, I want to use JIT as I need access to the important variant. It appears local webpack-dev-server builds are not recompiling the TailwindCSS at all, I make a change to a component, webpack will watch and recompile the component, but any class changes I’ve made are not created on the fly by Taiwind JIT. I have to restart the dev server and do a fresh build again, it’s as if watching isn’t working at all.

At it’s heart the app uses less files, with tailwind brought in via postcss loader, this was never previously a problem. It’s just trying to get this working with JIT watching compilation. I’m not sure if it’s a race condition or something as there’s now potentially changes to files at multiple points along the webpack style loader pipeline.

Thanks in advance for any insight.

Samples of potentially relevant files:

package.json command

"local": "TAILWIND_MODE=watch NODE_ENV=local webpack-dev-server --config conf/webpack.config.js  --history-api-fallback --hot",

postcss.config

module.exports = {
    plugins: {
        tailwindcss: {},
        autoprefixer: { grid: false },
        "postcss-reporter": { clearAllMessages: true },
        ...(process.env.NODE_ENV !== "local" ? { cssnano: {} } : null),
    },
};

tailwind.config

module.exports = {
    mode: "jit",
    purge: ["app/**/*.{js, jsx, html}", "stories/**/*.js"],
    theme: {
        screens: {
            sm: "700px",
            md: "980px",
            lg: "1200px",
        }....

webpack.local

 module: {
        rules: [
            {
                test: /\.less$/,
                use: [
                    {
                        loader: "style-loader",
                    },
                    {
                        loader: "css-loader",
                        options: {
                            sourceMap: true,
                        },
                    },
                    {
                        loader: "postcss-loader",
                        options: {
                            postcssOptions: {
                                config: "./conf/postcss.config.js",
                            },
                            sourceMap: true,
                        },
                    },
                    {
                        loader: "less-loader",
                        options: {
                            sourceMap: true,
                            lessOptions: {
                                strictMath: true,
                            },
                        },
                    },
                ],
            },

About this issue

Original URL
State: closed
Created 3 years ago
Reactions: 5
Comments: 16 (2 by maintainers)

Commits related to this issue

refactor of config setup || bug referenced from before https://github.com/tailwindlabs/tailwindcss/issues/4023 — committed to AHmims/NextmediaMa_codingChallenge by AHmims 3 years ago

Most upvoted comments

I’ve got this same thing going on; took me a while to realize what the problem actually is because it seemed like sometimes the JIT would pick up the changes and sometimes not.

It looks like it happens when I make a change in a non-CSS file (eg a template file). I think since that’s not causing the postcss-loader rule to execute.

So let’s say I add pb-32 in a .hbs file; that doesn’t get picked up live (if I restart my webpack build it does pick it up on a fresh build). But if I then edit a css file (eg add an empty space in an unrelated file) it does rebuild and pick up the pb-32 from the hbs file as well.

yeldarby on Apr 14, 2021

Seeing the same as @yeldarby . Is there a way to “watch” for changes in the purged glob patterns as well as changes in CSS files?

chrismllr on Apr 23, 2021

In my case setting TAILWIND_MODE=watch in the start of the npm script - instead of in my .env file read - fixed my issues.

johanalkstal on May 10, 2021

Hey! The problem with the reproduction repo is that the environment variables aren’t being set properly:

  "scripts": {
-   "dev": "NODE_ENV=development && webpack serve",
+   "dev": "NODE_ENV=development webpack serve",
-   "build": "NODE_ENV=production && TAILWIND_MODE=build && webpack"
+   "build": "NODE_ENV=production TAILWIND_MODE=build webpack"
  },

Using && starts a separate command and the environment variable isn’t actually applied. Without setting NODE_ENV=development, Tailwind won’t start watching for template changes.

Closing since this fixes the issue in the reproduction, if anyone has another similar issue that was raised in the comments please create a new issue with a new reproduction 👍🏻 Thanks.

adamwathan on May 10, 2021

Reproduction repo

Just enable mode: ‘jit’ in tailwind config file

verbose9 on Apr 9, 2021

Hey! The problem with the reproduction repo is that the environment variables aren’t being set properly:
  "scripts": {
-   "dev": "NODE_ENV=development && webpack serve",
+   "dev": "NODE_ENV=development webpack serve",
-   "build": "NODE_ENV=production && TAILWIND_MODE=build && webpack"
+   "build": "NODE_ENV=production TAILWIND_MODE=build webpack"
  },
Using && starts a separate command and the environment variable isn’t actually applied. Without setting NODE_ENV=development, Tailwind won’t start watching for template changes.

Closing since this fixes the issue in the reproduction, if anyone has another similar issue that was raised in the comments please create a new issue with a new reproduction 👍🏻 Thanks.

Not the case for me, I do have set the node env to development since I am using vue cli and everything was working before I set the jit mode

ahsatha on Jul 7, 2021

I had a thought that might be worth looking into…

As you can see above, we have a less > postcss > css > style loader pipeline, pretty long winded but a fairly common pattern. I’m wondering as the changes to tailwind via JIT is at the postcss point of the pipeline, as opposed to the start (the less loader) whether that impacts the watching/triggering.

An example of a consequence of this pipeline (even with tailwind1 and no JIT) is that if i make a change to tailwind.config. I have to resave a less file to trigger the recompilation of that. This may be unrelated but thought it might help add some context.

oller on Apr 11, 2021