Run jit compiler in the browser?

[tslocke]

I'm creating a page builder that supports Tailwind. To avoid lag I try to do everything in-browser. I was able to get it working with tailwind 3.1 but had to resort to some hacks. Upgrading to new versions is a pain.

Was hoping there's an official way to do this.

It must be possible because play.tailwindcss.com doesn't make any network calls, but I believe the code is no longer open source.

I think the jit may be part implemented in Rust now? Still possible to run client side thanks to web assembly, but getting complicated!

Any advice appreciated : )

[alex-krasikau]

Hey @tslocke!

Play CDN sounds like a good solution for your case. It runs the Tailwind in the browser and doesn't require an additional build step.

[tslocke]

Ahh interesting. Thanks : ) However I think I need a bit more control than that - something with an API like class-names in, css out. I guess, like play.tailwindcss.com it's not open source?

[tresorama]

Someone know if there is a way to run tailwind against a string that contains html in the browser ??

This is what i tried without success:

1. Injecting tailwind play with <script src="https://cdn.tailwindcss.com"></script> and search if window.tailwind has a methods to run against a string. It doesn't.
2. Tried bundling postcss and tailwindcss with a bundler (vite) and run it in the browser. While postcss alone works, as soon as I add tailwindcss errors about Node.js API not available are raised, and even with a polyfill vite-plugin-node-polyfills I get no success.
3. Tried looking at what https://play.tailwindcss.com/ does , and with a brief look it seems to be using service-worker (that I never used before) but I have no idea how they bypassed the problems of step 2

Anyone done this with success and can share it ?

[tslocke]

Have a look at @mhsdesign/jit-browser-tailwindcss

[tresorama]

Thanks! Not yet tried but it looks promising!