JIT fails to work with Vite

[17twenty]

What version of @tailwindcss/jit are you using?

0.1.4

What version of Node.js are you using?

v14.5.0

What browser are you using?

Chrome

What operating system are you using?

MacOS

Reproduction repository

https://github.com/17twenty/tailwind-jit-test

Setup a vite project (without adding Vue yet) and can't seem to get the JIT / watcher to work with vite.

Running gives:

$ npm run dev

> tailwind-jit-test@1.0.0 dev /Users/nick/Projects/tailwind-jit
>  npm run watch:css & vite


  vite v2.1.2 dev server running at:

  > Local:    http://localhost:3000/
  > Network:  http://192.168.1.3:3000/

  ready in 189ms.


> tailwind-jit-test@1.0.0 watch:css /Users/nick/Projects/tailwind-jit
> TAILWIND_MODE=watch postcss ./css/styles.css -o ./build/styles.css -w --verbose

but changing the index.html only triggers vite to reload, the watcher doesn't seem to work.

Probably a misunderstanding of the docs on this repo but would love to get it working for a Vue project afterwards.

[robdvins]

Same here! I just crated a project using @vite/create-app, added @tailwindcss/jit, imported tailwindcss/tailwind.css and it just generated modern-normalize stuff. When I add a class to the index.html or some .vue file it doesn't seem to generate anything.

Im using JIT v0.1.4 with Node v14.16.0 and Firefox on Windows.

[17twenty]

Yeah, i hadnt even added Vue to my project @robdvins - no joy. Figure it was best to start from the basics before layering on the rest of my workflow.

Tried a number of different options but still can't get the JIT watcher and vite to play nice-nice. Hoping it's an easy one @adamwathan - even if it's a "Do X to make it work and throwaway what you have"

[gcavanunez]

@adamwathan has this example of using vite with the jit engine https://github.com/adamwathan/tailwind-jit-vite-example
may be of aid

[17twenty]

Hey @gcavanunez , thanks - I'd had a look at that previously but as I hadn't use the Vue cli I wanted to understand how the basics of it tie together. It could just be the case it doesn't work outside of the defined setup at the moment 🤷‍♂️

[adamwathan]

@17twenty You're trying to make it a bit more complicated than it needs to be I think! I've created a PR that fixes your setup:

17twenty/leancanvas-tailwind-jit#1

The TL;DR is you don't need postcss-cli or anything, Vite has PostCSS support built in.