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

So I spent a good bit of time getting Tailwind working and then learning how to do every little thing with Tailwind – I did this because everyone using Phoenix seems to think it is fantastic. I liked Tailwind when I was reading about it from a theoretical perspective, but in terms of actually using it… well, it seems like I just want something faster and easier and less verbose. I can barely tell the value of Tailwind over just using inline styles.

Then I discovered that Milligram is automatically included when you make a new Phoenix app – right there in assets/css/phoenix.css. From what I can tell so far it is just a super-lightweight version of Bootstrap, which is basically exactly what I need to get going fast.

I’m astonished that people aren’t talking about how it is even faster to just get going with Milligram, which is included by default. The docs don’t seem to mention it – or at least I haven’t come across it anywhere. It would have been super-nice if I’d been tipped off re: Milligram a month ago, when I started my project.

More info at Milligram.io for those who are interested – you don’t even have to install it to get started with it – just don’t delete it!

10 Likes

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>
2 Likes

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 :slight_smile: it’s right there when you start a phoenix app!

4 Likes

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.

3 Likes

See also DaisyUI

8 Likes

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.

1 Like

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.

2 Likes

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.

1 Like

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.

3 Likes

This is not true for me. I’m not in the business of building frameworks and I find Tailwind really better. If CSS is the assembler, then Tailwind is the C programming language. At the end of the day you still work with the same box model, etc, but it makes me go faster. I find myself looking at the Tailwind docs even if I’m not using Tailwind - truncate would be a great example.

The other benefit of Tailwind is that it’s bringing a design system with it. So no more figuring out the px size of a font (“infinite” possibilites), just pick one of xs, sm, base, lg, xl, 2xl, etc. Same goes for colors. A tip from their Rafactoring UI book - consider building your app in grayscale and only add color later. Again, Tailwind brings 10 shades of gray, and by limiting options makes things easier.

The moment when I fell in love with Tailwind was when I was able to recreate a designer-made modal dialog from their book in the Tailwind playground in minutes, which was a feat considering my limited CSS skills. It felt like Tailwind gave me superpowers. Of course the modal in the book was made using the same design system that is embedded into Tailwind, but my previous statement still holds true.

8 Likes

That’s a really great analogy. Tailwind is neither “do it all manually” aka in plain css, nor is is a component library like bootstrap, which supplies styling for html element + custom component.

The issue with plain css is how hard it is to get right, which imo includes the flexibility to adjust to (continuous) change in a project. Also it might look like inline styles are close to tailwind, but it couldn’t be different.

Frameworks like bootstrap are great if you want to hit the ground running and it provides everything you need, but boy is it a pain to extend or use for non supported components. Milligram also sits in that space of styling html elements, but comes with less custom stuff.

Tailwind (as well as other utility css frameworks) sits in between those approaches. It abstracts common pains of plain css like reusability, constant context switching, sizing fragmentation, flexibility, … but the styling of html elements / components is up to the user of the framework. No need to fight the framework to let something look a certain way.

Which one is more useful imo depends on the goal

  • Want to or need to be fully in charge how things look and are architected → Plain CSS
  • Want to or need to be fully in charge how things look → Tailwind
  • Looking for a neat looking set of predefined styling for html / components → Bootstrap/Milligram/Tailwind UI
  • Looking for not just predefined components, but also sections or whole pages → Themes

This is a rough categorisation. Often tools sit in between those categories. E.g. latest bootstrap also has a few utility functions, but also there are bootstrap “themes”; Tailwind UI still has Tailwind beneigh;

8 Likes

I’m not very good at css, but, why would you use space-x-n instead of the native css grid column-gap?

EDIT: as soon as I commented I answered myself, you can use it on non grid stuff right?

.space-x-n might just as well use css grid (it doesn’t). That’s not the point behind tailwind css. Yes you can do everything tailwind does with plain css. The benefits are not in which css you can apply, but in everything else around it.

1 Like

Yes, space-x-n and space-y-n help make spacing your <div>s super nice. For example:

<div class="space-x-1">
  <div>This div</div>
  <div> and this div</div>
  <div> and this div are now all evenly spaced between them</div>
  <div> on the x (this one too).</div>
</div>

It’s a huge productivity booster once you familiarize yourself with how it works.

4 Likes

I don’t want the license restrictions of TailwindUI and so ended up using Daisy also.

It’s not perfect, but it creates a bunch of sane and succinct default components AND the flexibility of verbose Tailwind CSS

I am also using Bulma, which is awesome.

2 Likes

I was actually interested enough in Tailwind UI that I spent the $150 for a license to use it. But then I began collaborating with someone on the project I’m working on and the license now wants me to pony up another $650 because it’s not just me using it anymore. That’s a lot of money for me, I’m afraid.

So now I just have a useless $150 Tailwind UI license that I can’t use for any project that I’m interested enough in to collaborate with someone on.

4 Likes

I think you’re still good if you split the work: the other people do barebones pages and you “upgrade” the views with TailwindUI components.

Does anyone really find that example convincing that TailwindCSS is useful? Really?

From all the CSS frameworks out there the most convincing for me (as a mostly backend guy) was Semantic UI and I was pleased to find that it has been revived by community. I still prefer to write my own CSS instead of using “inline-CSS-as-a-library-that-tries-to-convince-you-that-it-is-not-inline-CSS” where I can use semantically meaningful names in the HTML code. With small amount of CSS code in most cases you can achieve most of that, and in many cases IMHO it will be easier to maintain.

5 Likes