Tailwindcss vs Bootstrap 5

I really like Tailwindcss. Used it on a recent project and found that I was very productive. It really simplifies the mental model. I am yet to use Bootstrap 5 but am curious if anyone has used both and can make comparisons. If not, I plan to do my own comparison over the next couple weeks and will post here.

Stand out features for Tailwindcss:

  • Their implementation of media breakpoints
  • Their approach to managing colours and gradients
  • Very good control of typography (leading and tracking)
1 Like

I think the major differences are:

  • Tailwindcss uses a direct formatting, syntactic and CSS-aligned approach
  • Bootstrap uses a semantic/component based approach first

Both frameworks are great as a base for projects. I do not think in practice one is better than the other. It depends on the kind of project, the people/team, the rules they apply how to deal with implementing design.

Personally I am more in the semantic/component faction. Also, I think for Plone as a component thought framework Bootstrap better matches our needs.

1 Like

Slightly off topic, but for my themes I have a 'mystuff.css' that I always include.

This means I always have classes for layout I use a lot available.
Typically things are:

.background-black
.white
.margin-10
.margin-15
.margin-20
.margin-10-20 (top margin 10, right margin 20 )
.center
.flex
.flex-wrap
.round

etc.

UPDATE:
Instead of using names for color (classes), I reference them to a palette.

So I use

.plone-color1
.plone-background1

etc.
Then it is easy to change colors everywhere.

I fully agree with @jensens . Tailwind does make much sense for me in the context of Plone applications. Initially, I found Tailwind useful for smaller projects like landing pages or business sites (there is e.g. a component-based add-on Tailwind UI). However, the huge amount of CSS around little content make me nervous having to maintain this for the future...so a component/semantic approach feels more natural. In the end, it is a personal preference and depends on your own mindset.

Tailwind css didn't make sense to me at all until I read an article which explained things. It's a 'utility css' framework. Very roughly: it allows you to set css attributes directly on an html element in the html itself, without the 'indirection' of a separate css file with a css class which has that same attribute. Basically: pt-4 -> padding-top: 4px"

This makes sense in projects where you already have this css class indirection or abstraction at a higher level, for example React and Vue components. Then your 'UserCard' component itself is already the abstraction that normally a css class .usercard provides. It is convenient to add the tailwind css utility classes to your component's html markup as were it css properties. Yyou don't have to keep a separate css class and/or mess with css priority rules, inheritance, etc. as React/Vue isolate css.

If you want to reuse the UserCard or create a variation, you just import/extend it in React or you make the component flexible.

If you 'only' have plain html and css, without a macro system you can't do that (imagine copy/pasting a huge style="" attribute if you need another UserCard div in your html). Unless you group the css attributes under a css class and re-use the same css class.