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

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"
  ]
}

[christhofer]

@kfsass

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

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

[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 🎉