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

About this issue

Original URL
State: closed
Created 3 years ago
Reactions: 15
Comments: 30 (3 by maintainers)

Commits related to this issue

fix: styles error https://github.com/tailwindlabs/tailwindcss/issues/6553 — committed to PaPa31/eth-market-course by PaPa31 2 years ago

Most upvoted comments

@kfsass

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

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

+14

christhofer on Dec 20, 2021

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.

+11

ghost on Dec 19, 2021

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 🎉

ThePeterMick on Mar 22, 2022

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

Dozorengel on Dec 21, 2021

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}"),
  ...
}

matdv on Oct 6, 2022

Facing the same issue 😃

nfuad on Dec 18, 2021

@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.

DistantMe on Dec 16, 2021

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

jon-price-visiontree on Jan 28, 2022

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.

zackhall on Jan 27, 2022