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

Phoenix Forum Chat / Discussions
, ,
44

Just wanted to mention Flowbite here, which is basically an open version of TailwindUI. I find it helpful in jumpstarting my initial designs.
As someone who has been catching up with all the changes in html and css that happened in the last 10-15 years since I’ve built a website I found myself in the analysis paralysis with the amount of information out there right now. This topic has been really helpful in understanding the tooling and workflows of the current day so thanks to everyone contributing. Tailwind is growing on me every day I’m using it.

4 Likes
45

Does not seem (too) open to me.
https://flowbite.com/license/

You cannot:

  • Use the download files to create End Products that are designed to allow an End User to build their own End Products using the download files or derivatives of the download files.
  • Re-distribute the download files or derivatives of the download files separately from an End Product, neither in code or as design assets.
  • Share your access to the download files with any other individuals
1 Like
46

I guess depends on your definition :slight_smile:

In simple terms, use FlowBite for anything you like except for projects that compete with FlowBite and would have a negative impact on our product sales

This is good enough for any of my use cases.

47

Seems like the standard version of Flowbite is free software

The pro-version is not.

48

If you like Flowbite then have look at daisyUI. daisyUI is less “verbose” and has many similar components. :slight_smile:

1 Like
49

I think I saw that Surface uses DaisyUI?

50

You might be referring to this issue, Replace Bulma with TailwindCSS, posted on the surface_catalogue GitHub repo.

That issue was opened by Marlus after this Initial discussion took place on the surface_tailwind GitHub repo.

2 Likes
51

yep, Daisy is progressing quickly and when you need to you can break out into custom Tailwind CSS extravanzas

1 Like
52

Thank you for making me aware of daisyUI.

I’ve tried Flowbite and, although it looks quite nice, it doesn’t feel like a real component library to me. Copy-and-paste of long component definitions with hard-coded colors into my CSS isn’t really what I want.

DaisyUI is a whole different league. Concise classes to style a component (e.g. btn btn-primary btn-sm) and use of semantic colors (primary, secondary etc.) that are resolved differently depending on the theme.

Exactly what I was looking for! Been playing around with it for just 10 minutes and I’m already in love :heart:

2 Likes
53

I know this is an old thread but I like Daisy too; a basic semantic layer that you can easily customize and tweak in multiple ways, including regular Tailwind utilities.

I was surprised how much can be done with pure CSS, even the modal dialog has no scripting. Which might make it a little trickier to integrate into a component, I guess you’d have to bind to the state of the checkbox which controls the show/hide behaviour.

I am still on the fence on Tailwind in general but the core components generated by the latest phx.new and phx.gen.live in 1.7 really have me understanding it quite a lot better. The components look a bit thick with all the utility soup but the actual views are very clean, I think this combo works quite well.

1 Like
54

even the modal dialog 4 has no scripting.

For a proper modal dialog you need to capture focus inside the modal. So that tabbing between elements stays only inside the dialog. Other wise keyboard navigation and accessibility is broken.

1 Like
55

Haha, if that ain’t a mood then I dunno what is… :joy:

I can’t see something like Tailwind working outside a world where “view components” are the norm.

But then… why not just use inline styles on your components?

1 Like
56

Try getting responsive behaviour out of inline styles or focus/hover/… styles. Tailwind often maps to a single style, but there are also quite a few abstractions on top, where a single utility class sets multiple css properties. It‘s for sure a shallow level of abstraction, but I found this very useful and preferable to heavier, but usually less flexible/composable, abstraction attempts.

57

why not just use inline styles on your components?

Tailwind provides:

  • a working set of consistent design tokens out of the box: anything from standardised sizes to margins to color progressions

    I’ve tried to figure out how to do a design system for ages, but I’m not a designer. Many existing design systems and frameworks usually box you into an inflexible set of constraints. Tailwind is flexible, but still gives you consistency (especially coupled with their UI examples)

  • convenient shortcuts to properties and combinations of properties that you might not remember off the top of your head

    As someone mentioned above, a simple shadow-md is actually 0 0 #0000, 0 0 #0000, 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);, and “ain’t no one got time for that” :slight_smile:

    You can replace these with CSS variables, but then you have properties like text-sm which is font-size: 0.875rem; line-height: 1.25rem;, so you have to remember to always use them together. I know, I once tried to use CSS variables only, and was lifting their definitions directly from Tailwind. Then I gave up and just went with Tailwind. :slight_smile:

    (Side note: this was a big missed opportunity for CSS vars: to be able to include several properties in one variable)

  • utility classes are descriptive. Compare shadow-md to the jumble of characters it resolves to

  • less work for the browser to do: it needs to parse classes and apply them, not create a separate combination of styles for each document

  • there’s also a nice thread by Dan Abramov on Tailwind that touches a bit on inline styles, too: https://twitter.com/dan_abramov/status/1452324924421550080

58

It’s been way to long (like 8-10 years ago) to link to sources, but I seem to remember someone benchmarking a single class per css property and that actually turned out to be really performant with browsers (at least the time) – iirc because it matched well to how browsers map styles to elements. Being done for just the benchmark it lacked the necessary tooling and the “terseness” of tailwind class names (it used written out css property names turned to classes) to be useful, but it’s still interesting to see how such “early” experiments map to something becoming popular years later.

1 Like