Why am I only now learning about Milligram? It is included by default! Why the Tailwind hype?

Sure, milligram is enough for a lot of use cases. If you need a little more you can also use (CSS-only) bootstrap very easily with phoenix 1.6 per CDN (so you can stay completely node/npm/webpack-free).

You can’t do that with tailwind because it has to be processed. But tailwind imo is only needed if you want more advanced or very customized styling - but for that its great.

try to set :hover using inline styles.

You can just toss a <style> tag anywhere you want in a Phoenix template and add hover styles to your heart’s content. What’s the big deal?

<div> a bunch of previously existing template content here... </div>

<style>
#my-div { background-color: lightblue; }
#my-div:hover { background-color: yellow; }
</style>
<div id="my-div"> hello world.  </div>

Milligram and Tailwind are really two different technologies with completely different aims.

Milligram is a lightweight CSS library - attempting to give you some styles for free.

Tailwind is attempting to bring a new spin on how to write maintainable front ends.

It sounds like you may not have needed the power of Tailwind so it stands to reason Milligram might be a better fit. But it is worth reading about the value of tailwind

As to why you never heard of Milligram only you can answer that it’s right there when you start a phoenix app!

For me, the main benefit of Tailwind is TailwindUI which allows me to stitch a pretty good looking UI quickly. Plus tons of useful utilities like space-x-n, style purging, etc.

See also DaisyUI

DaisyUI looks really interesting. It seems that the missing link for me was not understanding that Tailwind is not meant to be used directly, but is rather meant to be used by specialized people who build CSS UI frameworks like Bootstrap and Daisy UI etc and then actual app developers just use those.

Also, @Adzz I had read that article re: Tailwind by Adam Wathan about the separation of concerns and it made a ton of sense to me at the time, which is why I decided to go ahead with Tailwind. But in practice using Tailwind directly seems far less practical. It’s like a theoretically beautiful solution that just makes CSS an even bigger headache in practice. You’re just writing the same miserable CSS, but this time in a foreign language and with twice as many terms to memorize.

I’m wondering now whether it might not make the most sense for me to just ditch compiling and loading CSS in the head of the html via an app.css file and instead just include <style> elements at the top of each Phoenix template that styles whatever is in the template. At least that way everything is super-straightforward and I can style the HTML in the same file that I write the HTML. No reason to get too clever here.

Tailwind is not meant to be used directly, but is rather meant to be used by specialized people who build CSS UI frameworks like Bootstrap and Daisy UI etc and then actual app developers just use those.

I’m not entirely sure that is true for a lot of us.

I don’t know CSS so I learnt tailwind instead. There’s nothing stopping you creating classes yourself with @apply.

Certainly it is great as a design framework builder because it gets you closer to the metal than something like Bootstrap and Bulma, but I found it to be useful long before TailwindUI came along. I experienced a great deal of pain with CSS over the years for which the concept of atomic styles helped to combat. Tailwind then provided an exhaustive and consistent atomic style API, great documentation, and even support for using it to build custom design frameworks.

That being said, if Milligram is enough, you should totally use that. I wouldn’t personally place CSS in <style> tags for reasons of maintainability and page size but, sure, you could do that. I suspect you’ll still find the need for at least some defaults (like normalize) that you won’t love pasted into every page.

I’m a terrible UI designer but Tailwind was a breeze for me fwiw. Honestly the biggest analysis paralysis issue that I always faced on personal projects was figuring out which CSS framework to invest my time learning.

Thanks to Tailwind, I never have to do that again and it’s a great feeling.