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