Who hasn't heard of Bootstrap or used it directly as the main styling tool to implement someone's idea of a digital experience?
Although it may sometimes be hard to acknowledge the passage of time, its progress is unstoppable and always brings something new and shiny. And when it comes to development, particularly frontend, it is advancing by leaps and bounds. Practically every week, a new framework emerges offering something new or performing a task more efficiently, but does that mean we always have to use the latest?
The answer, if you're an experienced professional, is not straightforward. One limitation when choosing tools is determined by widely accepted standards and those with greater compatibility across servers and browsers. No matter how appealing a new tool's innovations sound, we must ensure it will be compatible with the largest number of uses and users. For projects that require minimal evolution or will be maintained over time, it makes sense to use well-established tools in the market that ensure some support and compatibility in the future.
All this underpins the common attitude of attachment to the familiar, to my old well-known hammer. This is not always a bad thing, but it can lead to missing out on the advantages of standardised, future-proof tools. Change always meets resistance, some of which are reasonable and others not so much.
So it is always good to keep an eye on new developments to see if they surprise us, for better or worse, and perhaps return to our familiar tool with greater confidence. Or perhaps not.
Bootstrap y Tailwind CSS
When it comes to CSS frameworks, Bootstrap has long been the first choice, both for small projects that customise it minimally and large projects that fully utilise its features. The new player in the field, however, is undoubtedly Tailwind CSS.
Both tools have different approaches, and in this article we want to outline the advantages of each framework to reach a final conclusion by analysing both in their stable versions at the time of writing. In this case, it’s Bootstrap 5.3 versus Tailwind CSS 4.0.
An important note here: Bootstrap includes a set of components, whereas Tailwind CSS it is just a CSS framework. Therefore, alongside Tailwind, we have analysed daisyUI in its version 5.0. daisyUI is a component library based on Tailwind, which brings the comparison between Bootstrap and Tailwind closer.
Bootstrap
For many years, Bootstrap has been our faithful ally in the demanding task of implementing designs as diverse as one can imagine. We want to highlight that we've also developed an attachment to our "old hammer". Bootstrap has been that reliable tool for translating designs into HTML and CSS. It would be unfair to proceed with this comparison without acknowledging everything this tool has contributed and how it has supported us.
We believe Bootstrap has set precedents and remains remarkable in certain aspects:
- Proven reliability: It is a framework that has stood the test of time, offering consistency and stability.
- Predefined components: Buttons, modals, grids—Bootstrap provides a solid set of ready-to-use components.
- Ease of use: Its widespread adoption means many developers are already familiar with its structure and classes.
So why consider possible replacements? This returns to the points made at the beginning of the article: while Bootstrap has been immensely helpful, we've encountered certain limitations that we can no longer ignore:
- Customisation and updates: Although Bootstrap offers some flexibility, its customisation capabilities are limited compared to current tools. This is often reflected in the lack of customisable CSS variables or properties in certain components, which await updates that have not yet arrived.
- Update pace: The development pace of Bootstrap 5.4 or 6 has not been as fast as desired, with some delays in bringing updates and enhancements to already accepted standards.
- CSS optimisation: The inclusion of unused styles for rendering each page in a website results in a larger-than-necessary final CSS file.
Tailwind CSS
Tailwind is a utility-first framework that provides a large number of atomic and reusable classes, allowing interfaces to be created without the need to write custom CSS styles. In a way, it is akin to using inline styles through the application of very specific classes.
Despite its growing popularity, this approach has led to its reputation being somewhat tarnished, occasionally facing outright rejection. But what are these opinions based on?
We believe that many of these views stem from only a superficial trial without truly engaging with the framework in depth, or, perhaps more importantly, not adapting it to one's own workflow.
Let's explore this latter point.
The utility-first concept is based on adding these atomic, non-semantic classes directly to the HTML markup. "Non-semantic" means that the classes do not indicate the function or meaning of the element on the page, such as "highlight," "message," "error," or "featured"; rather, they indicate the element's appearance. For example:
<a href="#" class="rounded-md bg-indigo-600 px-3.5 py-2.5 text-sm font-semibold text-white shadow-xs hover:bg-indigo-500 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600">Button</a>This can make the HTML difficult to read, especially for those used to the traditional separation between HTML and CSS, and it leads to complaints from people familiar with the HTML standard, which states that classes should describe the element's nature, not its appearance. These complaints are completely legitimate.
However, Tailwind does not enforce this way of working, and, in fact, there are component libraries such as the aforementioned daisyUI that operate under Tailwind's guidance and offer a more familiar and semantic approach:
<a href="#" class="btn btn-primary">Button</a>This is the approach we have taken, and to be fair, Bootstrap has influenced how we use Tailwind. This translates into an approach that allows us to not only utilise its main feature of non-semantic properties/classes (agnostic of specific uses like --color-mint-100), but also to apply them more semantically. We achieve this by complementing Tailwind with daisyUI and using classes such as --color-primary. This shares, in a way, the essence of Bootstrap, especially when considering daisyUI's button proposal or its other components:
<button class="btn btn-neutral">Neutral</button>
<button class="btn btn-primary">Primary</button>
<button class="btn btn-secondary">Secondary</button>
<button class="btn btn-accent">Accent</button>
<button class="btn btn-info">Info</button>
<button class="btn btn-success">Success</button>
<button class="btn btn-warning">Warning</button>
<button class="btn btn-error">Error</button>
Technical comparison
And a comparison table between the two could not be missing.
Feature
Bootstrap
Tailwind CSS
Final CSS file size
It may contain unused styles
Only used styles are used
Design philosophy
A closed, opinionated design basis
No predefined design
Personalisation
Based on Sass variables supplemented with newly added CSS variables, making customisation dependent on Sass.
Based in defined CSS variables
JavaScript dependency
Some components require JavaScript
No use of JavaScript, not even in daisyUI
CSS processing
Uses Sass/PostCSS
CSS processing is included in Tailwind CSS
Community Updates
Slow updates
Frequent updates and a vibrant community
Semantic classes
Included
Not included but implementable
NPM package size
9,22MB
558kB
Components
Several ready-to-use basic components (Card, accordion, drop-downs, etc.)
No components included but they can be implemented or added using daisyUI or other extension
Our impression is that Tailwind CSS, having been developed more recently, embraces more modern and current standards, whereas Bootstrap carries older concepts that it must maintain for compatibility and the resources needed for updates, hindering its modernisation.
For instance, regarding newer standards, Tailwind offers customisation through CSS variables, which allows for greater flexibility compared to Bootstrap, which may require modifying Sass to make changes. With Tailwind, it is possible to change many aspects of a website by altering CSS variables directly in the browser, whereas Bootstrap necessitates a CSS compilation phase (requiring Node.js to apply these changes).
Another example is the generation of CSS. Tailwind uses tree-shaking to automatically generate only the CSS that is used, whereas Bootstrap delivers the entire framework's CSS, requiring manual pruning to optimise this aspect.
Finally, Tailwind makes use of CSS layers, a relatively new concept but already widely supported by browsers, while Bootstrap does not utilise them, likely because it was developed before they were available.
So… who is the winner?
This comparison is not about declaring a winner, but rather about understanding the strengths and limitations of each framework to make informed decisions. Both tools have their place, and the right choice depends on your specific use case.
We believe Bootstrap is still ideal for projects that:
- Require a quick setup with predefined components
- Do not need extensive customisation
- Prioritise familiarity and ease of use (e.g., internal tools, intranets, etc.)
Conversely, we believe Tailwind CSS is more suitable for projects that:
- Require unique and customised designs
- Benefit from lightweight CSS files
- Embrace more current application standards
We would like to emphasise that it is beneficial to use Tailwind in a more semantic way, as mentioned earlier, which allows for taking advantage of Tailwind without overusing classes that solely indicate presentation.
Final thoughts
While Bootstrap remains a reliable tool, Tailwind CSS offers greater flexibility and customisation for modern projects. Tools like daisyUI bridge the gap by combining Tailwind's utility approach with Bootstrap's semantic components. Ultimately, the choice depends on project requirements and the team's familiarity with each framework.
Highlighting the current community trend: Tailwind CSS has a more active and innovative community, whereas Bootstrap seems slower in adopting new standards. We are eager to see the new versions of Bootstrap that may be released, and it will certainly have its rightful place if it catches up. However, today, we believe Tailwind has certain advantages, at least in specific situations.
We hope we've provided enough information for you to reach the most accurate conclusion for any situation you might encounter.
Article crafted with genuine AI (artisanal intelligence) :D (Except help with English translation ¯\_(ツ)_/¯)
