`TAILWIND_MODE=watch` doesn't work

[hivokas]

What version of Tailwind CSS are you using?

3.0.7

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

vite 2.7.6, vue 2.6.14, vite-plugin-vue2 1.9.0

What version of Node.js are you using?

16.13.0

What browser are you using?

Chrome

What operating system are you using?

macOS

Reproduction URL

https://github.com/hivokas/vite-vue2-jit-issue

Describe your issue

There is an issue opened by @adamwathan in underfin/vite-plugin-vue2 repo: underfin/vite-plugin-vue2#153.

I understand that there is a problem with this plugin, but there is TAILWIND_MODE=watch and I suppose it should work as a temporary workaround. However, it doesn't work when I run TAILWIND_MODE=watch vite. Is it possible to make it work? It might help people who struggle with environments which don't support JIT out of the box.

Thank you for your work on TailwindCSS!

[adamwathan]

Hey! The watch flag is still in there but we don’t recommend it or plan to support it going forward which is why it’s undocumented. Not sure why it’s not working for you but no plans to invest more in that option.

For tools that don’t support the PostCSS dependency APIs properly we recommend using Tailwind CLI and compiling your CSS on the side instead.

[hivokas]

For tools that don’t support the PostCSS dependency APIs properly we recommend using Tailwind CLI and compiling your CSS on the side instead.

@adamwathan I suppose Tailwind CLI won't work with <style> sections of Vue components, is that right?

[adamwathan]

Yeah you’re right about that unfortunately. If you can migrate to Vue 3 that will work. Personally though I wouldn’t recommend using the style block if you’re using Tailwind, why not just put the classes in the HTML? Your builds will be a lot faster too since Vue will attempt to run PostCSS from scratch for every single style block it finds.

[hivokas]

If you can migrate to Vue 3 that will work.

Yeah, that's on the roadmap. However, the project is big and it's not as easy.

Personally though I wouldn’t recommend using the style block if you’re using Tailwind, why not just put the classes in the HTML?

There are some use-cases where it's handy. For example, applying some TailwindCSS classes for all mark tags within the component. In fact such styles could be moved to the global stylesheet, yeah, but it's more comfortable to keep such styles inside the component.

Your builds will be a lot faster too since Vue will attempt to run PostCSS from scratch for every single style block it finds.

Got it.

[hivokas]

Well, this issue is just one more reason to use latest versions of tools. Just one more reason to finally migrate to Vue 3. Which will allow to use Vite directly. Which will allow to use TailwindCSS 3 with JIT.

Thanks for all your work! Appreciate it! @adamwathan