Is there a way to reflect changes without a hard browser reload?

[hirasso]

Hi there! Today I have set up my very first tailwindcss test project 😻

The reason I waited so long before trying it out is that I'm very used to a workflow where I tweak my styles until they look great, without having hard browser reloads between style changes. That depends on the DOM staying unchanged, and the CSS being injected every time I change it. In the past, I have achieved this with various build tools (BrowserSync, Parcel.js, WebPack + webpack-livereload-plugin, ...)

Is something like this also possible with tailwindcss? I'm aware that here, the mechanism would be kind of reversed to my usual workflow. Basically I'm looking for something just like the one on the tailwindcss home page suggests:

1. I edit some classes in my (php) source files
2. I save the file
3. Tailwind's JIT compiler picks up the changes
4. It re-compiles based on the new classes and injects the updated css into my open document
5. The new class names are being injected into my open document, as well
6. All this without a full browser reload

I might be missing something – maybe that is already possible? I'm grateful for any hints.

[wongjn]

Yep! You could use a build tool like Gulp, Parcel.js, WebPack, Vite, etc. to compile the Tailwind CSS and hot reload the CSS into any open pages without a full browser reload.

[hirasso]

Thanks @wongjn ! For the newly generated CSS this would work, of course. But the actual classes in my MarkUp wouldn't be updated, before I would manually reload the page (please note that I'm primarily working with PHP) and thus the newly compiled CSS wouldn't have any effect. Or am I missing something?

[hirasso]

Basically, the center of my question is step 5 of my list:

The new class names are being injected into my open document, as well

[wongjn]

You should be able to use one of the build tools as mentioned previously.

[hirasso]

It will still be a hard reload, as long as I don't use @apply exclusively (no direct utility classes in my HTML). Anyways, no huge deal.

[arpadroid]

I just published a package that solved this very frustrating issue that I was never able to solve using webpack.
Please take a look at my solution https://www.npmjs.com/package/arpadroid-themes
If you like it please do give it a star :)

[DavidPetrasek]

this npm package does not exist