Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.
And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.
Watch mode caveats: refresh not happening for nested css under `@layout ...`. nor when changing the input css only
See original GitHub issueWhat 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-1style toinput.cssunder@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-2style toinput.css(on top level, not under@layer components) - I add
<button class="btn-cool-2" inindex.html`. I can see new Rebuilding… in the log. - Result: I can see
btn-cool-2in 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-2ininput.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.
Issue Analytics
- State:
- Created 2 years ago
- Reactions:1
- Comments:6 (4 by maintainers)
Top Results From Across the Web
Top Related Medium Post
Top Related StackOverflow Question
Troubleshoot Live Code
Top Related Reddit Thread
Top Related Hackernoon Post
Top Related Tweet
Top Related Dev.to Post
Top Related Hashnode Post
@moroz1k Your issue sounds like this one which is different:
https://github.com/tailwindlabs/tailwindcss/issues/4838
That’s fixed in the insiders build now:
npm install -D tailwindcss@insiders@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
vimsaves modified files. I wil rather open a separate issue for that.