openzim
Upgrade Bootstrap to 5.x or switch to TailwindCSS
We are currently on Bootstrap 4.4.1. We received a dependabot alert of moderate severity for this version, and the upgrade path is to 5.x. However, the security alert doesn't affect us because we don't use the "carousel" component.
Either way, it's clear from this incident that security updates are no longer being backported to the 4.x branch. We should update while we have time before it becomes necessary by the next security incident.
It all depends on which components are used... We found in https://github.com/kiwix/kiwix-js/pull/1235 that a lot of the "dropped" browsers still work (when the codebase is bundled) for our use case, and the upgrade was quite simple. (But that PR is stalled for other reasons.)
I have a branch where I am attempting to upgrade to Bootstrap 5, but there are major difficulties:
I'm willing to accept that this is "my own fault" because I generally styled the app by throwing classes at things until it worked rather than properly using the Bootstrap design system.
Given that every single page and div of the app needs to be inspected with the upgrade to Bootstrap 5, and given that certain components, like the ones in the screenshot, would have to be styled again basically from scratch, it might be an opportune time to consider a switch to TailwindCSS.
Tailwind is very mature at this point, and I have experience using it. The biggest drawback is that it sometimes results in classes like:
class="cursor-pointer w-10/12 md:w-48 py-4 md:py-2 px-4 text-xl md:text-base disabled:cursor-auto bg-blue-600 text-gray-200 disabled:text-gray-600 disabled:text-white disabled:bg-blue-400 hover:bg-blue-800 disabled:hover:bg-blue-400 focus:ring-4 focus:outline-none focus:ring-blue-300 font-semibold hover:text-white font-bold py-2 px-4 border border-blue-500 rounded hover:border-transparent disabled:hover:border-blue-500"
Still, I think this is better than Bootstrap, which similarly uses "non-semantic class names" but also employs a set of "secret" rules that apply to classes pagewide, or to certain combinations of classes. At least in the above, the class disabled:hover:bg-blue-400 does exactly what it says it does: when disabled and hovered, fill with a blue background.
I have the same kind of mixed feelings for the Zimfarm ^^ I might soon get convinced to make the move to Tailwind CSS with GSOC students ^^
I was thinking of migrating KJS and/or PWA to Tailwind. It would be a final goodbye to some of the very old platforms we still support (hey, you can still run both KJS and the PWA in IE11 from a file:// URL without using a server if you're crazy enough 😱)... The only problem is... time ⌛🕛
To me the most important is that we keep AFAP the same stack on wp1, zimfarm, cms, imager.
So we will never be able to switch unless we all switch at the same time? That sounds pretty impossible.
AFAIK, it is not what @kelson42 meant. The intent is that we should discuss changes first to ensure we stay as aligned as reasonably possible. We should avoid to have every project use yet another library. And we should ensure we all aim more or less in the same direction.
You discussed the issue here. I agreed this is the kind of move we already considered for Zimfarm as well. So for me all lights are green for the move of WP1.
Btw, I just remembered that @rgaudin already used TailwindCSS for https://github.com/offspot/dashboard and he was quite pleased by it AFAIK. @rgaudin do you intend to use TailwindCSS for the CMS once we will resume work on it?
That's a discussion we should have ; I wanted to evaluate tailwind with the dashboard because it's somewhat of a different code base while CMS is not.
As discussed, Tailwind seems like a good option. At least much better than Bootstrap 4. @benoit74 @rgaudin do you think we can move forward with this?
From my perspective, I don't see any reason not to choose TailwindCSS since you are comfortable with it, it is still among the best choices to make in 2025 and we already used it for other projects.
Would still be interested to discuss with @rgaudin to better understand the choice we should make for the CMS 😉
Hi @audiodude and @benoit74, I see the discussion about migrating to TailwindCSS. I have experience with Tailwind and would be interested in helping with this migration I noticed @benoit74 mentioned working on this with GSoC students . Is this migration still planned? If so, I'd like to contribute to it.
Hi @ziaddevv. We are still interested in pursuing the switch to Tailwind, yes. However we have a list of issues that we'd like to address before tackling this or any other "tech debt" issues. You can see that list here: https://github.com/orgs/openzim/projects/29