tailwindlabs/tailwindcss-jit

No new classes are created since JIT install

APB9785 opened this issue · 6 comments

APB9785 commented

What version of @tailwindcss/jit are you using?

v0.1.6

What version of Node.js are you using?

v15.7.0

What browser are you using?

Chrome

What operating system are you using?

macOS

Reproduction repository

I am building on Elixir/Phoenix stack

Ever since installing the JIT installer, no new classes are being generated. I can add a new class <div class"text-2xl">text and it will only be regular sized. But if I use a class that was already generated before the JIT install, such as "text-xl", then it works fine.

I am using the Elixir framework called Phoenix, which runs Node and handles all JS-related tasks automatically, only requiring the developer to write Elixir and HTML. Many Phoenix developers use Tailwind, and it works very well "out of the box" for our stack. It's only been since I installed the JIT compiler (using the instructions on the GitHub readme), that this issue has been occurring.

APB9785 commented

Simply removing the JIT compiler from postcss.config.js and returning to plugins: { tailwindcss: {} ... } resolves the issue for me. So either JIT breaks Phoenix compatibility somehow, or the installation instructions here are not sufficient. I will keep looking into the issue and report back here with any findings.

adamwathan commented

Hey! Please provide a reproduction repository so we can actually clone it down and troubleshoot it.

adamwathan commented

Going to close since a reproduction was not provided, happy to help though if you can open a new issue that includes the required field, thanks ❤️

  • 👎1
rktjmp commented

https://github.com/rktjmp/phx-tailwindcssjit

E: working setup in repo above.

@adamwathan, sorry for the @, but thanks for the great tool! (it was webpack) but I noticed this pattern:

  1. Start server
  2. CSS applies as it should
  3. Edit template, altering one elements classes (bg-[#000] => bg-[#333])
  4. Template reloads, class change does not get translated into css file
  5. Invalidate app.css hash, prompts recompile, class change now works
  6. Edit template again, class change does get translated to css file (no need to invalidate css hash)

I am pretty sure this will be a webpack issue, but since the readme mentions "incremental rebuilds as fast as 3ms", is there a chance the incremental build is getting confused somehow, before I "touch" the css file?

Again, 99% smells like webpack caching/watching but is there any chance it's the incremental system? Any where I can look to rule it out? I can open another issue if I look and it seems worth it.

APB9785 commented

Any classes generated before the JIT install work fine for me. It's only new classes added after the JIT install, which are not generated. An example repo should be simple if you have Erlang/Elixir/Phoenix installed, just use run the app generator "mix phx.new app_name" at CLI.

  • 👍1
APB9785 commented

This is likely an issue with the installation instructions missing a step which is required for other frameworks such as Phoenix.