Watch mode caveats: refresh not happening for nested css under `@layout ...`. nor when changing the input css only #7679

javornikolov · 2022-02-26T12:44:02Z

What version of Tailwind CSS are you using?

v3.0.23 (fresh install via npm, npx), v3.0.7 (via tailwindcss-rails)

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

My main issue was with Rails 7.0.2.2 and tailwindcss-rails via bin/dev (i.e. rails taiwindcss:watch)
Issue has been reproduced with most recent tailwindcss without other special framework on top

What version of Node.js are you using?

For example: v17.6.0 for my test with v3.0.23. And for rails I don't have anything else than what is generated via rails new -c tailwind

What browser are you using?

Chrome. But the issue has been observed without brouser (just by checking the content of the generated css)

What operating system are you using?

Ubuntu 21.10 (either via WSL2 and a native one)

Reproduction URL

My simplified test-case is based on https://tailwindcss.com/docs/installation. I start with the initial example. Tailwind is started in watch mode as described. Then I gradually modify index.html and index.css adding 3 buttons and styles. Final version is:

<!doctype html>
<html>
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link href="../dist/output.css" rel="stylesheet">
</head>
<body>
  <h1 class="text-3xl font-bold underline">
    Hello world!
  </h1>
  <button class="btn-cool-1">Click Me</button>
  <button class="btn-cool-2">Click Me2</button>
  <button class="btn-cool-3">Click Me3</button>
</body>
</html>

tailwind.config.js is unchanged

module.exports = {
  content: ["./src/**/*.{html,js}"],
  theme: {
    extend: {},
  },
  plugins: [],
}

@tailwind base;
@tailwind components;
@tailwind utilities;

@layer components {
 .btn-cool-1 {
   @apply mt-3 rounded-lg py-9 px-5 bg-blue-200 inline-block font-medium cursor-pointer;
  }
}

.btn-cool-2 {
   @apply mt-3 rounded-lg py-9 px-5 bg-blue-500 inline-block font-medium cursor-pointer;
}

.btn-cool-3 {
   @apply mt-3 rounded-lg py-9 px-5 bg-green-300 inline-block font-medium cursor-pointer;
}

Describe your issue
My steps:

Scenario 1

I begin with the initial example.
I add btn-cool-1 style to input.css under @layer components. (Nothing changes in output.css)
I add <button class="btn-cool-1" ... to index.html. I can see new Rebuilding... output of tailwindcss watch command
I check output.css - it does not contain the new btn-cool-1. (cat dist/output.css | grep cool - blank output) [FAIL]

Conclusion for Scenario 1: changes are not being picked at all!

Scenario 2 (continues with the state at the end of Scenario 1

I add btn-cool-2 style to input.css (on top level, not under @layer components)
I add <button class="btn-cool-2" in index.html`. I can see new Rebuilding... in the log.
Result: I can see btn-cool-2 in output.css.

Conclusing for Scenario 2: changes are reflected at the end. [SUCCESS]
Not immediately but only after changing the .html file. I assume this might be expected optimization for building used css classes only - if that is the case, seems correct outocme.

Scenaro 3 (continues from the end of Scenario 2)

I modify btn-cool-2 in input.css - changing the color.
Nothing is refreshed at this point!!
I touch src/index.html, no changes in it.
Result: rebuild... is triggered and change is properly reflected in output.css [SUCCESS]

Conclusion for Scenario 3:

Changing just the .css makes things out of sync - not reflected in output.css. [FAIL or at least obscure]
After touching index.html things get in sync [OK]

Scenario 4 (continues from end of Scenario 3)
12. I add btn-cool-3 style to input.css
13. I touch index.html. I see "Rebuilding..." in tailwind log.
14. Result: the change is properly reflected in output.css [SUCCESS]

Conclusing for Scenario 4:

In this sequence things work OK for top-level css classes
Indicates that what happened in Scenario 2 and others (step 5) is not quite sophisticated optimization if any. Changes in input.css are not triggering refresh of output even when the relevant css classes are being used
I did another change like steps in Scenario 4 but for buttn-cool-1 (under @layout components) - it is not refreshed. Seems Being under @layout ... is breaking the synchronization.

Scenario 5:
When I stop and restart tawilndcss --watch command: the button-cool-1 style is generated inside output.css. So it kind of works but not in watch mode.

Related to #7679 #6553

The text was updated successfully, but these errors were encountered:

adamwathan · 2022-02-26T14:18:57Z

Hey thanks for the detailed issue! I've followed every step outlined here in this screencast and everything works as expected for me:

mono.mov

Can you provide an actual reproduction project and more details about your environment so we can try and reproduce as exactly as possible? A screen recording going through this stuff would be helpful too just to see if we notice any ancillary details that don't seem important enough to provide but could provide the clue to the actual source of any issue you are seeing.

adamwathan · 2022-02-27T16:46:13Z

Here's a repository containing the code from that screencast that you can test:

https://github.com/adamwathan/tailwindcss-issue-7679

Maybe you'll notice some configuration difference or something that could explain the difference in behavior. If not my bet is on it being WSL2 related — we have seen some issues where WSL2 doesn't handle filesystem events properly in other situations:

#7590 (comment)

If that's the culprit we may need to introduce a polling option for Windows users.

moroz1k · 2022-03-01T06:20:32Z

i have the same problem too.

Vite/vue/scss, @layout
in the main scss file, the update occurs, but if you change the styles in the nested ones via @import, then there is no refresh.

p.s. "usePolling: true" not working

adamwathan · 2022-03-01T11:33:04Z

@moroz1k Your issue sounds like this one which is different:

#4838

That’s fixed in the insiders build now:

npm install -D tailwindcss@insiders

adamwathan · 2022-03-03T15:27:17Z

Going to close this since haven’t heard anything back, I can’t reproduce it, and I’ve demonstrated it working as expected. If this is still an issue though and what I’ve provided here helps you narrow down the difference in our setups, definitely open a new issue, happy to take a look!

Just can’t keep our issues in a healthy organized state if we leave inactive issues open that have no reproduction, hope that’s understandable! Thanks ❤️

javornikolov · 2022-03-05T10:39:13Z

@adamwathan, thank you very much for your detailed feedback and sorry for the delayed update from my side!

I took your repo and the issue reproduced with it as well. As I see things are working on your demo so I guess there is some platform-specific issue. I see you are on Mac, my environment(s) are Ubuntu Linux 21.10 (one native and another within WSL2). I will try to setup some CI job on GithubActions and see if I can reproduce it there.

After some more experiments I can confirm that the issue exists both on native Ubuntu and WSL2. It happens when I use vim editor (in interactive mode) for changing the source files. If I copy/paste files or just touch them after using vim - things work OK. I gess there is something special in the way vim saves modified files. I wil rather open a separate issue for that.

adamwathan closed this as completed Mar 3, 2022

javornikolov mentioned this issue Mar 5, 2022

tailwindcss in watch mode doesn't refresh outupt when files are changed using vim #7759

Closed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Watch mode caveats: refresh not happening for nested css under `@layout ...`. nor when changing the input css only #7679

Watch mode caveats: refresh not happening for nested css under `@layout ...`. nor when changing the input css only #7679

javornikolov commented Feb 26, 2022 •

edited

Loading

adamwathan commented Feb 26, 2022

adamwathan commented Feb 27, 2022

moroz1k commented Mar 1, 2022 •

edited

Loading

adamwathan commented Mar 1, 2022

adamwathan commented Mar 3, 2022

javornikolov commented Mar 5, 2022 •

edited

Loading

Watch mode caveats: refresh not happening for nested css under @layout .... nor when changing the input css only #7679

Watch mode caveats: refresh not happening for nested css under @layout .... nor when changing the input css only #7679

Comments

javornikolov commented Feb 26, 2022 • edited Loading

Scenario 1

Scenario 2 (continues with the state at the end of Scenario 1

Scenaro 3 (continues from the end of Scenario 2)

adamwathan commented Feb 26, 2022

adamwathan commented Feb 27, 2022

moroz1k commented Mar 1, 2022 • edited Loading

adamwathan commented Mar 1, 2022

adamwathan commented Mar 3, 2022

javornikolov commented Mar 5, 2022 • edited Loading

Watch mode caveats: refresh not happening for nested css under `@layout ...`. nor when changing the input css only #7679

Watch mode caveats: refresh not happening for nested css under `@layout ...`. nor when changing the input css only #7679

javornikolov commented Feb 26, 2022 •

edited

Loading

moroz1k commented Mar 1, 2022 •

edited

Loading

javornikolov commented Mar 5, 2022 •

edited

Loading