search

leptos-rs / book

The home for the Leptos book, which can be found deployed at https://book.leptos.dev
MIT License
59 stars 58 forks source link

Minimal way to integrate tailwind with leptos (csr via trunk) #109

Closed TheRealSalmon closed 3 weeks ago

TheRealSalmon commented 3 weeks ago

I was struggling with the example given in the book for integrating tailwind with leptos. However, I found that trunk can link stylesheets in index.html. This creates a much simpler way to integrate tailwind with the tutorial. I'd like to share this in the book, what would be the best way to do so? I'm happy to open a PR once we have a discussion.

Here is my example repo, https://github.com/TheRealSalmon/leptos-tailwind.

gbj commented 3 weeks ago

I'd suggest that the easiest way to integrate Tailwind with Leptos is probably to follow one of these three examples, in the examples directory of the main repo:

If these aren't mentioned in the book a PR to add them to that section would be great.

TheRealSalmon commented 3 weeks ago

I tried following the tailwind_csr repo but found that it was simpler to use trunk to link the style sheet to index.html directly.

gbj commented 3 weeks ago

As I understand it, the example already does that, but is built on top of an older version of the example that uses the Tailwind CLI tool — and was not updated to deal with the fact that it now uses both systems.

TheRealSalmon commented 3 weeks ago

I see that index.html uses style/tailwind.css. But I found it works with style/output.css, the output of tailwindcss.

If you'd rather keep the tutorial pointing to the repos you've mentioned, I think it's fine as is. But I'm just pointing out that I got confused by the overly complex repo and found a much simpler workaround more in the spirit of a minimal tutorial.

gbj commented 3 weeks ago

I see that index.html uses style/tailwind.css. But I found it works with style/tailwind.css, the output of tailwindcss.

Sorry, I don't understand this.

If you'd rather keep the tutorial pointing to the repos you've mentioned, I think it's fine as is. But I'm just pointing out that I got confused by the overly complex repo and found a much simpler workaround more in the spirit of a minimal tutorial.

I don't really use Tailwind, and haven't used it with Trunk. If the example is overly complex maybe the answer here is a PR to simplify the example so that it only contains the minimum needed?

TheRealSalmon commented 3 weeks ago

Sorry I made a typo, it should have read output.css. I will try a PR, no pressure to merge it. I just want to try and simplify things :).

TheRealSalmon commented 3 weeks ago

I was wrong about this whole thing. This example is already using the best solution, the direct integration of trunk with tailwindcss. I misunderstood.