tailwindcss v3.0.5 is not picking up changes unless I change tailwind.config.js file

[giky]

What version of Tailwind CSS are you using?

v3.0.5

What build tool (or framework if it abstracts the build tool) are you using?

"postcss": "^8.4.5"

What version of Node.js are you using?

v16.6.2

What browser are you using?

Chrome

What operating system are you using?

macOS

Reproduction URL

{
  "name": "tw2",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build"
  },
  "dependencies": {
    "vue": "^2.6.11"
  },
  "devDependencies": {
    "@vue/cli-service": "~4.5.0",
    "autoprefixer": "^10.4.0",
    "less": "^3.0.4",
    "less-loader": "^5.0.0",
    "postcss": "^8.4.5",
    "tailwindcss": "^3.0.5",
    "vue-template-compiler": "^2.6.11"
  },
  "browserslist": [
    "> 1%",
    "last 2 versions",
    "not dead"
  ]
}

Describe your issue

Sometimes tailwind is not adding classes to final CSS when I'm adding them to my HTML files unless I edit the tailwind.config.js file, I usually comment and uncomment some line in that file and all of sudden I see the class has been added to the CSS file, I had this very same issue on my Next.js project as well.

I made a new reproduction repository and tested things there, it was all good and working. Not really sure why it's not working on my own projects at some point. This may sound stupid but maybe tailwind is not picking up changes as the project get's more complicated?
I made this issue to know if anyone had some similar experience or not, so maybe someone can guide me on how to resolve this.

But if I change to the old version tailwindcss 2.2.19, there will be no problem

{
  "name": "tw2",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build"
  },
  "dependencies": {
    "vue": "^2.6.11"
  },
  "devDependencies": {
    "@vue/cli-service": "~4.5.0",
    "autoprefixer": "^10.4.0",
    "less": "^3.0.4",
    "less-loader": "^5.0.0",
    "postcss": "^8.4.5",
    "tailwindcss": "^2.2.19",
    "vue-template-compiler": "^2.6.11"
  },
  "browserslist": [
    "> 1%",
    "last 2 versions",
    "not dead"
  ]
}

[DistantMe]

@giky I am having the exact same issue with a fresh install using npm i -D tailwindcss (version 3.0.5)

Following the "Installation" section in the tailwindcss docs to the letter, when saving my *.html file I get the "Rebuilding..." line in the terminal, but the resulting *.css file does not include the changes that I've made. I've noticed that sometimes when giving focus back to my terminal window, the "Rebuilding" line comes up again and it will actually generate the correct output... so I am really unsure what is going on here. I didn't have these issues in the 2.x branch from memory.

I attempted to roll back to 3.0.0 and I am having the same results.

This is on a fresh install of Alpine (3.15) in a VM, running node 16.13.1 and npm 8.1.3.

[adamwathan]

@giky Can you please provide a reproduction? Not easy to help if we can’t clone a repository down that demonstrates the issue.

Last I checked vue-cli was using PostCSS 7 internally which would explain a lot of incompatibilities with Tailwind, since we rely on PostCSS 8 and the latest version of postcss-loader.

[giky]

@giky你能提供复制品吗？如果我们不能克隆一个展示问题的存储库，那么帮助就不容易。

最后我检查了 vue-cli 是否在内部使用 PostCSS 7，这可以解释与 Tailwind 的许多不兼容性，因为我们依赖于 PostCSS 8 和最新版本的 postcss-loader。

https://github.com/giky/twcss3bug

[heyfuaad]

Facing the same issue :)

[DistantMe]

Facing the same issue :)

@nfuad are you using tailwindcss + vue like the OP, or just a plain tailwindcss v3 install like myself?

@adamwathan any luck looking into this one by chance? I'm still having zero success with a complete vanilla install (literally just npm + tailwindcss on a fresh VM and following the guide in the install documentation).

Hoping I can figure this out, I really want to start using v3.

[ghost]

I'm having the same issue. I am using the Tailwind CLI instructions provided on https://tailwindcss.com/docs/installation and the installation goes smoothly. However, when starting the Tailwind CLI build process with npx tailwindcss -i ./src/input.css -o ./dist/output.css --watch, the src/output.css is successfully created, then I receive the Rebuildling... message in terminal when changes are made to index.html, but the output.css file does not update.

[kfsass]

similar issue for me using Vue 3 + Vite. in the above code, the fill- class is set dynamically from a prop. Tailwind did not generate the fill-mountbatten-pink class in its CSS even when the class made it into HTML. I was able to set the class name statically in the template and Tailwind generated the class's rules into its final sheet as normal. I haven't been able to reproduce this issue since!

[heyfuaad]

@DistantMe, no I have a next.js 12.0.6 + tailwind setup.

[christhofer]

@kfsass

You can't use dynamic class with concatenation like that.

https://tailwindcss.com/docs/content-configuration#class-detection-in-depth

[thejprice]

Same issue for me as well. Either gotta restart vite or changing tailwind.config.js to see updated classes.

[DistantMe]

@adamwathan Just an update, I've gone ahead and tested the standalone binary (3.0.7) on MacOS, this works completely fine and updates the *.css files as expected when using --watch.

Can't seem to get the Linux x64 binary to work under Alpine though, guessing it's not built for use against musl? If I could get the standalone working in Alpine, that would be a decent solution for me.

edit: installing gcompat let's me use the standalone binary on Alpine, so I'm all good now. Hopefully there's a fix for the npm version.

[Dozorengel]

Not gonna work even on 3.0.0, just checked it out, installed as a postcss plugin in nx workspace with angular preset

Upd: it works watching a single file, but with glob pattern like src/**/*.html it doesn't

[thejprice]

I was also able to get it working by setting the watch mode like so:

TAILWIND_MODE=watch bin/vite dev

[javier-rivera-deel]

Can confirm a similar behavior in which when recompiling (using webpack hot reload) the styles are not regenerated unless I re start my local server. I'm on Tailwind 3.0.7 on a React project.

This is a pseudo repro step list to help understand the issue:

• Local server is up and hot reloading on save
• I have a div with no background color
• I modify the same div adding a bg-orange-300 class and save
• Background color is not applied unless I restart my local server

Edit: I had to update all dependencies related to style loader in webpack and now is working as expected.

[whitespacecode]

Having the same problem with dynamicly build css classes in my vuejs project i have found you can just safelist classes.
I wasn't noticing this problem if somewhere else in your code you already use that class it renders just fine.

Thanks @christhofer of pointing this out.

safelist documentation

Part of my code, where you can pass any color as prop:

data: function () {
        return {
            buttonColors: 'bg-color-100 text-color-800 group-hover:bg-color-200',
            iconColors: 'text-color-500',
        };
    },
    computed: {
        buttonColor() {
            return this.buttonColors.replace(/color/g, this.color);
        },
        iconColor() {
            return this.iconColors.replace(/color/g, this.color);
        },
    },
    

[adamwathan]

@giky Thanks for the reproduction! In this case the issue seems to be that vue-cli is using very old versions of some dependencies which don't support the features necessary for the JIT engine to work. Specifically it is using [email protected], and only the latest versions of postcss-loader v4 and v5 support the necessary dependency registration APIs:

postcss/postcss#1537

So I'm afraid vue-cli just currently doesn't support Tailwind 3, and vue-cli itself needs to be updated for it to work.

In these cases we recommend using Tailwind CLI to compile your CSS on the side if you can't migrate to an up to date tool:

https://tailwindcss.com/docs/content-configuration#it-just-isn-t-working-properly

---

There are lots of other folks replying here about similar problems but not the same problem (that vue-cli doesn't work with Tailwind 3). I'm closing this particular issues since we've gotten to the bottom of it, and it's not a good idea for us to try and track multiple different possible issues under the same issue.

If you are having a problem, please create a new issue including a reproduction and we will do our best to take a look. Most situations similar to this one will definitely be caused by projects using outdated dependencies, so the answer will likely be the same. Not trying to be dismissive or ignore anyone's issues, it's just not possible to keep track of things unless every separate problem has a separate issue.

Some people have mentioned issues with Vite — Vite should work perfectly generally, but there is a known issue with using Vite + the community-maintained Vue 2 plugin:

underfin/vite-plugin-vue2#153

This will require a fix in that plugin for things to work as expected.

The TAILWIND_MODE=watch flag is a bit of a hacky workaround and we don't plan to develop it further, which is why it isn't documented. It can work as a bandaid fix in the mean time in some projects, but in general I highly recommend working towards being able to stop using it by updating your project to use the latest versions of PostCSS, webpack, postcss-loader, etc.

[Dozorengel]

TAILWIND_MODE=watch is a life-saver, especially in angular < 11.2. For some reason this workaround is more efficient than native tailwind watcher support in angular >= 11.2.

[kfsass]

@kfsass

You can't use dynamic class with concatenation like that.

https://tailwindcss.com/docs/content-configuration#class-detection-in-depth

thank you for your kind and informative response. I appreciate you! <3

[zackhall]

I am also running into this issue where it doesn't seem to be picking up on new classes used, so I need to completely restart my build. Tried updating to the latest tailwind to see if that helped but still repro'ed.

Seems to be something with the glob patterns. One thing I found that worked as a temporary workaround was to add whatever file I'm working on at the moment explicitly to the content array in my tailwind config. Doing so, it seems to pick up on changes and I just need to remember to remove that before checking in.

[jon-price-visiontree]

Hate to say it, but I switched over to using windicss for now, no issues so far + added features/benefits.

[saym97]

I am facing same issue with SvelteKit as well. Tailwind doesn't regenerate classes unless I change the config.cjs file or restart the server.
I am using node v16.13.0 , tailwind 3.0.23 and latest postcss and autoprefixer.
Please if somebody knows how to fix it, I would really appreciate it.

[thecrypticace]

@saym97 Can you open a new issue with a reproduction? It would really help!

[saym97]

#7590 (comment)

Here it is , I have created the new issue and explained the problem according to my understanding, Thank very much for replying.

[whitespacecode]

Adding to this i can confirm.
Restarting my npm watch does 'solve' the issue and new classes being added.

[ThePeterMick]

Leaving this here in case it'll help someone, I'm on a Mac and had a similar issue of changes not being picked up when using glob patterns:

Updating my postcss-cli from v8 to "postcss-cli": "^9.1.0" has resolved the issues for me 🎉

[radmiraal]

I ran into the same issue after installing vite-plugin-handlebars, disabling the auto reload of that plugin fixed the problem for me: https://github.com/alexlafroscia/vite-plugin-handlebars#disabling-browser-refresh-on-partial-change

[matdv]

Same issue here when using ViewEncapsulation.ShadowDom for an Angular Elements webcomponent.
Watching the single html file in in the tailwind.config.js also works here, glob pattern is not working properly for me.
Globbing the files myself instead of using glob-patterns in the tailwind.config.js has resolved it:

glob = require("glob");

module.exports = {
  content: glob.sync("./src/**/*.{html,ts}"),
  ...
}

[Debanshu777]

I faced the same issue, but it was my fault. On scrolling up the logs I found I found CssSyntaxError keep in mind I didn't receive the error message but I didn't look carefully since the app was up and running.

error I did

So do keep an eye. Learn from my mistake 😅

This version worked for me!
 "autoprefixer": "^10.4.13"
 "postcss": "^8.4.21"
 "tailwindcss": "^3.2.4"
 "next": "13.1.2"

[krizpoon]

I ended up using fb-watchman to trigger the build process.

[martonsimon]

Modifying ESBuild solved the problem for me (16.1.6)
#3959 (comment)