Rescript React with TailwindCSS V2 - JIT compiler

1

Hey everyone! Looking to upgrade our Tailwind version from v1 to v2 and wanted to see if anyone is using the new JIT tailwind compiler with a PPX like this one:

I tried real quickly and was not successful in getting the PPX to work since there is not a css file for the PPX to generate all the available className strings to type check again.

Thanks in advance!

1 Like
2

Yeah, tailwind JIT traded performance for less concise editor tooling (which was a good trade, if you ask me). Not sure if there’s going to be a fix for that in the future due to the way how extraction works now. If there is, it’s probably going to happen in their editor extension (which imo is a better place for doing class name verification).

1 Like
3

We use JIT with tailwind PPX as we want to have classes validated and also we want to have escape hatch for irregular dimensions.

We generate full css file specifically for tailwind-ppx with tailwind build styles/main.css -o tailwind.css.

And in rescript we have to join validated classes with irregular classes className={%tw("color-green") ++ " mb-[37px]"}

2 Likes
4

So by running this build command, you are generating every style possible similar to the legacy tailwind setup just for the PPX, but ultimately using the JIT styles in the browser?

5

Correct.

I would simply remove tailwind-ppx if it was my personal project, but our team wants more safety.

1 Like
6

Suggest the verification pass to the Tailwind project :smiling_imp:

It seems wrong to me that the onus of a verification check is to be placed on every possible project out there rather than having it solved once and for all by the upstream. It is doubly true with on-demand building of the CSS, since it won’t be possible for a downstream tool to solve the problem.

2 Likes