Add `Tailwind CSS` ✨

[nelsonic]

It's occurred to me that the CSS/Styles in this example are "meh" ...

And with the addition of Tailwind CSS in Phoenix 1.7 https://github.com/dwyl/learn-phoenix-framework/issues/152 We can significantly improve the UI!

Luckily, we've already done the "hard" part in: dwyl/phoenix-liveview-chat-example#15-tailwind-css-stylin

So I expect that we can borrow much of the code from that tutorial and estimate that it shouldn't take us more than T1h to get it done. (probably much less Time/Effort, but being conservative for any layout issues ...)

Todo

• [x] Add docs section to Main README.md for adding Tailwind
• [x] Add Tailwind CSS to this Phoenix 1.6.x project manually
• [x] Attempt to borrow the code from: https://github.com/dwyl/phoenix-liveview-chat-example/blob/main/lib/liveview_chat_web/templates/layout/root.html.heex
• [x] Adapt as needed

[nelsonic]

Included in: #120

[nelsonic]

@LuchoTurtle this is pretty close to being done ...

I just don't have time to do the alignment of the inputs and buttons ...

Can you take a look when you finish your Flutter work? 💭

[nelsonic]

@LuchoTurtle please include a screenshot of the finished thing in the issue before assigning it back to me.

[LuchoTurtle]

Sorry about that.

It should look like this.

If the user is logged in, the username is shown. If the username is not available on the profile, it falls back to 'guest'.

[nelsonic]

Sorry for not being clear. The desired UI/UX is already in the OP. This layout you've created certainly looks good. 👍 By all means add it to your Dribbble account: https://dribbble.com/tags/messaging but it's over-thinking it by having the message box off to the right ... 🤷‍♂️ and doesn't look "mobile first" (i.e. "boring") ... 📱 Unless the mobile is a Tablet. 💭

I'm all for creating design variations and A-B testing them once we have a testing framework in place. 🆎 Until then we need to keep the designs as Boring (AF!) as possible even if it means that it "looks the same" as every other app that does something similar.

If even one non-technical person ever has to ask themself "Why is that there?" or "Where is the ...?" then we have failed to build an intuitive interface.

I get that this way on a larger screen the person can see more of the message history. ✅ But you need to see this from perspective of the person who isn't used to seeing this layout and doesn't see the immediate benefit and just thinks "Why...?" 🤷‍♂️

[nelsonic]

For the avoidance of all future doubt: https://en.wikipedia.org/wiki/Occam's_razor

[LuchoTurtle]

Changed it to look like so.

Waiting for a response on https://github.com/dwyl/phoenix-chat-example/pull/120#issuecomment-1323626395 👀

[LuchoTurtle]

https://github.com/dwyl/phoenix-chat-example/pull/120#issuecomment-1325094372

Going to assign this for review, with the login issue resolved 👍

[nelsonic]

Believe we can close this issue now as Tailwind is indeed in the PR we colab'd on: #120 ✅ Thanks again @LuchoTurtle 👌

[nelsonic]

before:

[LuchoTurtle]

Shouldn't this be open until https://github.com/dwyl/phoenix-chat-example/pull/120 is merged?

[nelsonic]

Merged. ✅