dogweather

dogweather

Differences between Tailwind and Bootstrap?

Can someone sum up the differences between Tailwind and Bootstrap? I did two web searches and skimmed five articles, and they’re all super-spammy.

Is Tailwind less semantic? Does it encourage you to not create your own classes? Is that a problem?

Most Liked

trisolaran

trisolaran

I can try: Bootstrap is a component library with some utility classes on the side, whereas tailwind is a pure utility library with no components.

With Bootstrap, you get a set of predefined components you can use right away (buttons, modals, cards etc.). Tailwind on the other hand doesn’t have any components, but it makes it relatively easy to build them by offering utility classes, which allow you to style your HTML without having to write almost any CSS at all.

Bootstrap does have some utility classes, but it doesn’t embrace the concept as much as tailwind.

I came to tailwind from bootstrap and I wasn’t very happy initially because, even though I really liked the idea of styling everything using classes, I was missing a set of predefined components I could just use. I don’t like having to style my own buttons, modals and so on.

Luckily, if you want to use off-the-shelf components, there are excellent component libraries based on Tailwind. The best one IMO is daisyui :heart:

LostKobrakai

LostKobrakai

I usually drive the point home with this: Tailwind classes abstract CSS, Bootstrap classes abstract complete and pieces of (prebuild) UI. If the goal is to use CSS features to build UI then Tailwind is great. If the goal is to not need to bother doing that then Bootstrap is likely a better fit. Component libraries like daisy UI are great because it’s usually easier to fall back from the “don’t bother” to “ok I need to bother” state for required customizations than it would be with e.g. Bootstrap.

olivermt

olivermt

Ooooh I should get it published right after xmas. Just been a nuts period in my dayjob last couple of months

Where Next?

Popular in Questions Top

lessless
I believe there are people here who are dealing with CSV files import on the daily basis, and since Excel is a really popular tool there ...
New
ashish173
I am using Ecto timestamps with postgres, I can see the timestamps() use the :naive_dateime but for my use case I wanted to store the ti...
New
Lily
In templates/appointment/index.html.eex: <%= for appointment <- @appointments do %> <tr> <td><%= appoi...
New
bsollish-terakeet
Credo is smart enough to check for (something like) this: assert length(the_list) == 0 with this response: Checking if an enum is empt...
New
shijith.k
I am trying to start a new phoenix project with elixir 1.9, but mix phx.new does not work. It says that ** (Mix) The task "phx.new" could...
New
alice
Hey, Just curious what are the main benefits of Elixir compared to Clojure? When is Elixir more useful than Clojure and vice versa? Th...
New
dblack
I’ve got an issue with an app and I’ve no idea of how to troubleshoot it. I’m hoping someone here might have seen something similar. I p...
New

Other popular topics Top

JeremM34
Hello, how can I check the Phoenix version ? Thanks !
New
Brian
What is the proper way to load a module from a file in to IEX? In the python world, doing something like this pretty standard: from ....
New
openscript
Hello! Sorry for this astonishing simple question, but I’m really stuck. I try to set up the intellij-elixir plugin, but I don’t know ho...
New
shijith.k
I am trying to start a new phoenix project with elixir 1.9, but mix phx.new does not work. It says that ** (Mix) The task "phx.new" could...
New
WestKeys
Currently suffering from paralysis by [HTTP client] analysis. This is rather unusual in Elixirland as there tends to be consensus on the ...
New
jason.o
In the code below, if the create action is not set to accept “extra_key” as an input, it errors out with a message shown above. Is there ...
New

We're in Beta

About us Mission Statement