Remove support for TAILWIND_MODE=watch

[RobinMalfait]

This PR will remove the TAILWIND_MODE=watch functionality.

What is TAILWIND_MODE=watch, and why is it removed?

The TAILWIND_MODE=watch always has been a temporary solution. The issue was that we required a way to know when one of your (content) files changed to trigger a new Tailwind CSS build.

PostCSS didn't have support for this, which meant that we didn't know about changes in your content files and therefore you didn't see your changes being reflected when visiting your website / web app.

The solution to this problem was introducing "directory dependency messages" in PostCSS. This allows us to register your content files as dependencies so now whenever you make a change, Tailwind would be re-triggered and now you see proper changes in your browser, yay!

See:

• Add dir-dependency documentation postcss/postcss#1580

The issue with this is that we need to wait for all the tools to update to the latest PostCSS and this process takes a while. We also don't have control over when other tools will do this.

So we introduced TAILWIND_MODE=watch as a temporary solution. This created our own watcher behind the scenes to know when your content files changed.

We also had this section in our docs: https://v2.tailwindcss.com/docs/just-in-time-mode#styles-don-t-update-when-saving-content-files

This flag is a temporary workaround for incompatible tooling, and will eventually be removed in a future version of Tailwind CSS.

Some time has passed, so it is time to remove this temporary solution. The main reason for this is that we had an issue opened recently that actually caused problems with our temporary solution. You can read more about it here: #6343

The change introduced in PostCSS has been propagated to a bunch of tools already, but there is a chance that you might have issues if you use tools where this change has not yet been propagated.

What does this mean for me?

• If you never used the TAILWIND_MODE=watch option, then you don't have to worry about this change at all.
• If you do use TAILWIND_MODE=watch:
  • Try to just remove it. There is a chance that you don't require it at all and that everything will work as expected.
  • When Tailwind CSS is not reflecting changes (aka "stops working"), try to update your build tools to the latest version (parcel, webpack, Next.js, ...)

I still have issues!

• If you still have issues after trying the steps above, then we highly encourage you to open an issue with a minimal reproduction repo that showcases the problem.
• We really want to propagate this required PostCSS change to every tool under the sun that requires it.

---

TL;DR:

• If you don't use TAILWIND_MODE=watch, you are good to go!
• If you are, try deleting TAILWIND_MODE=watch and it might just work
• If things fail, please read the longer version.

[luisorbaiceta]

Using the flag allowed to use Tailwind along with Storybook without any problem. Now styles are not being applied correctly

[RobinMalfait]

Using the flag allowed to use Tailwind along with Storybook without any problem. Now styles are not being applied correctly

Please open an issue about this with a minimal reproduction repo.

[luisorbaiceta]

My bad. Issue is not coming from the removal of the flag. It's caused when updating Tailwind and using it with storybook in nested folders. I will dig deeper and open a separate issue

[AdrianMrn]

I've got one! 😁 #7063