Using JIT with dynamically created classes (with React props)

[willhindson]

What version of @tailwindcss/jit are you using?

0.1.8

What version of Node.js are you using?

14.16.0

What browser are you using?

Chrome

What operating system are you using?

MacOS

Reproduction repository

I hope this is relatively easily explained by my two screenshots :)

JIT is working great in a Next.js React app, however I have come across an issue which I'm not too sure will be solvable as I don't have enough technical understanding of the order in which processes work here.

TL;DR: I want to pass in props to a component so that classes are generated based on those props. As soon as the four lines highlighted in screenshot 1 are added, the app crashes with an unknown word error. I assume this is because purge is combing through the files and doesn't recognise these lines. To fix this, I tried adding a default value with an || selector (screenshot 2), and this stops the app from crashing. The correct CSS is generated in the browser, but I assume due to the order in which things occur, those classes are not generated by Tailwind JIT and therefore not applied.

My question is twofold:

1. Is there a way to solve this now?
2. Is this something that can be technically fixed in upcoming TWJIT builds?

Thanks! Loving the promise of JIT and TW in general :)

[adamwathan]

Hey! This is just a limitation of how the whole thing works, classes must be statically extractable in advance because we don't ship any sort of run-time to the browser. You'll want to read about writing purgeable HTML in the Tailwind docs, as the same constraints apply to the JIT engine 👍🏻

If you want to try a CSS-in-JS flavor of Tailwind that does support this sort of thing, check out twin.macro.