Tailwind workflow

[sebastian]

I have had a love a first sight experience with Leptos. The concepts, the way it is being built, and the community around it are all individually wonderful and make for a wonderful whole! I was really excited to see there being Tailwind support built right into cargo-leptos too!

I have spent years working with other framework, ranging from rails, phoenix (with elixir) and creating react apps in F# with Fable and frontends with Svelte. Having a quick turnaround time from making edits in my editor to seeing the changes reflected in the browser is something I have come to rely quite heavily on - particularly when working with Tailwind where I tend to make a lot of small incremental changes, seeing if the results are as I would like them to be.

I would love to learn what your workflow is when it comes to building and designing with Tailwind when using Leptos.
In the app I am currently building it takes around 5 seconds before any change made to a component is reflected in the interface. This is quite frustrating, particularly so since I, still new to Leptos, often make mistakes and then stare at the browser in vain looking for my changes to appear, wondering if the change I made was invalid, I accidentally edited the wrong file, or whether I just accidentally broke the build. As a result I have come to rely on having a secondary sveltekit app on the side where I create and prototype my components, but that feels rather cumbersome and forces me to do a lot of copying and pasting, and spending time keeping two distinct apps in sync, only one of which is ever meant to see the light of day. Do you have a similar workflow, or do you see entirely different refresh times (i.e. is my setup broken? (I am currently using the latest version from the main branch on a modern MacBook Pro so am used to most things being fast))

The hot-reload experience in Dioxus is quite amazing actually. I imagine the underlying technology might be quite different, but I am hoping against hopes that something similar is in the future for Leptos too!

Looking forward to learning more!

[gbj]

One thing you might want to try right off the bat is cargo leptos watch --hot-reload, which is semi-experimental but very similar to the Dioxus approach. (i.e., works on most static HTML parts of a view, not things that need re-compilation via Rust)

At the moment this works slightly better if you're running npx tailwindcss in a separate process instead of using the built-in cargo-leptos Tailwind support.

[gbj]

The main.js thing is surely from a Firefox extension you have enabled or something — that code isn't anything from Leptos and I don't see it generated anywhere by wasm-bindgen, and if it's only in one browser I'd assume a browser extension. But it doesn't seem to be the issue here.

Looking at the video it looks like the line numbers in the patches that are being sent don't correspond to the line numbers in your actual file. I'd guess that's why it's not finding them in the DOM to update... Each invocation of the view! macro gets wrapped in comments indicating where in the source code it comes from, which is used to update it.

What is your cargo leptos --version and what version of leptos is in your Cargo.toml?

[sebastian]

Sorry, accidentally posted in a new comment rather than this thread... But that aside: my original question, about workflow, you kindly answered already! And now it has turned more into a support/debugging issue... I am of course more than happy to continue debugging (after all I would love the hot-reload to work for me), but I just wanted to say that I really don't expect you to spend your time troubleshooting with me!

[sebastian]

Ok, from further testing, here is what seems to happen: hot reloading works once after the server have started. Then I get an error from the second attempt at doing hot-reloading onwards. The error in question is this one:

[sebastian]

Please note that when starting fresh with a new leptos application, the hot reloading works! I'll recreate my app. It seems to be stuck in some old state.

[gbj]

Wow, that's awesome to hear! It's not a perfect system clearly, but I hope debugging it hasn't cost you more time than you'd save by it working 😂

Just kidding, I'm glad it's working okay now and feel free to open another discussion if it breaks and I'm happy to help debug.

[sebastian]

I was originally on:

• cargo-leptos 0.1.11 (but I wonder if that is a bit deceiving. I installed the version from the main-branch yesterday, so it might be newer
• leptos is also from main as of yesterday (source = "git+https://github.com/leptos-rs/leptos.git?branch=main#6b90e1babd425c9a324181c86e3fd1b942c9b10f").

I tried running the latest stable releases too (0.4.2 of leptos and cargo-leptos 0.1.11 of cargo-leptos but installed via crates.io), and had some success with that! The hot reloading worked for a little while, but now it's all gone again, unfortunately.

CleanShot.2023-07-09.at.19.09.07.mp4