Tailwind CSS

[nelsonic]

As noted by @SimonLab in #74 Tailwind is similar to Tachyons 😍
However it appears to have more traction, some might say it has a tailwind propelling it ... 🌬️

https://tailwindcss.com/

My reading of the Tailwind landing page is that it doesn't offer much new over Tachyons, 🤷‍♂️
but the packaging seems far more polished ... 💄

From Chris' recent post: https://fly.io/phoenix-files/tailwind-standalone/ [ 2021-12-22 ]
It's clear that Tailwind will be included as the default CSS Framework in Phoenix quite soon: 🔜

https://github.com/phoenixframework/tailwind

Since v1.4 all Phoenix Apps include the Milligram CSS Framework https://milligram.io
e.g: assets/css/phoenix.css
all of our v1.6.x Apps have it ... and it's been a pain to override with Tachyons! 🙄

It appears as though Milligram hasn't been updated in a while ... https://github.com/milligram/milligram

Pull Requests ignored: https://github.com/milligram/milligram/pulls

The creator of Milligram appears to be taking a break from GitHub: https://github.com/cjpatoilo

Makes perfect sense. There's (a lot) more to life than GitHub/Code. ☀️

Anyway, back to Tailwind.
The writing is on the wall: Phoenix will include it (prob v.1.7+) so we should consider adopting it. 💭

Overview

https://tailwindcss.com/docs/utility-first

Context

https://podcast.thinkingelixir.com/21

https://changelog.com/jsparty/155

Note: skip the first 4 mins of "sponsors" and intros to the actual interview. Play at 1.5x Speed.

Tailwind UI looks good but has restrictive license: https://tailwindui.com/license

"In simple terms, use Tailwind UI for anything you like as long as it doesn't compete with Tailwind UI."

"Creating an admin panel tool (like Laravel Nova or ActiveAdmin) that is made available either for sale or for free"

DaisyUI appears to be a viable MIT license alternative: https://github.com/saadeghi/daisyui

Todo

• Read the docs and see how it differs / improves upon the utility class model in Tachyons.
  (is it just packaging/presentation or something genuinely different/better...?)
• Try it in a sample project e.g. one of the recent Demo apps: Advanced Example > RT Colab gitea-demo#12

See: https://pragmaticstudio.com/tutorials/adding-tailwind-css-to-phoenix

• Evaluate if the Hype is justified and we should just learn+use it!

[nelsonic]

Going to track our learning in: https://github.com/dwyl/learn-tailwind

[nelsonic]

Official instructions: https://tailwindcss.com/docs/guides/phoenix

[nelsonic]

Just reading through https://tailwindcss.com/docs/customizing-colors ...
While I'm not a fan of needing to have JS to "process" the CSS file,
I can certainly see the power of this approach.
And with esbuild handing the build + live reload it's a reasonable workflow. 💭

[nelsonic]

Intro logo:

[nelsonic]

[nelsonic]

FYI: I'm deep-diving into understanding how the internals of Tailwind work
and how we can use it for our project(s)
so that I grok it well enough to write a tutorial that will be useful to other people.

I know I'm definitely doing more work on this up-front than I strictly need to. ⏳
But as with all our other tutorials, examples & demos, I know that:

a) it will be immediately beneficial to me to have a good understanding.
b) we will point new-joiners to the doc and encourage them to extend/update it as part of their learning
c) making it generally useful to anyone means we make something that other people can contribute to. That makes everyones' lives better.
d) I will refer back to it in the future when I need a refresher.

Going to try and wrap up my "first pass" on this today and hand-over to @SimonLab for review+improvements. 🤞

[nelsonic]

https://www.tailwindtoolbox.com/

[nelsonic]

[nelsonic]

[nelsonic]

https://github.com/dwyl/learn-tailwind already in decent state. 😜

[nelsonic]

Included in #80 as part of updating the core stack to PETAL #87