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)
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.
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:
.margin-10-20 (top margin 10, right margin 20 )
Instead of using names for color (classes), I reference them to a palette.
So I use
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.