Tailwind CSS vs. Bootstrap vs. Semantic UI
Trying to choose a library to handle the styling of a website? A few top contenders in 2021 are Bootstrap, Semantic UI, and the new kid on the block, Tailwind CSS. What are the differences, and which one will be right for you?
Web Development is an ever-evolving field. Every year brings new changes, designs, libraries, and more. Raising the bar for what makes a good website design. 2021 is no different. So what can we use to give us the edge on creating our website? Let’s look at some CSS libraries I like that have much popularity going into 2021.
Bootstrap is currently the most popular CSS framework out there. It makes sense that Bootstrap is the most popular CSS framework, given it has been around for a decade. Initially, Twitter developers used it as an internal tool to keep design intuitive and consistent, since then it has been released as it’s own fully fledged open-source project. Bootstrap’s straight forward component design system is popular among beginners. Most components can be used simply by added a class or two to HTML tags. While simple, this also means there isn’t a whole lot of customization and has lead to websites using the framework to have a “Bootstrap look.”
> Semantic UI
> Tailwind CSS
If you have ever encountered Tailwind before you have read this line,
Tailwind CSS is a utility-first CSS framework.
If you never really understood what this fancy piece of tech-talk means, but never asked, don’t worry, I’ll explain it. What makes Bootstrap and Semantic UI component frameworks is that they do the heavy lifting by doing most of the design work for you. If you want a button, you need to add the button class and an optional modifier classes. You don’t have to think in terms of CSS, just in terms of the library you are using.
Tailwind works differently by not providing components but by offering classes that let you build your components. Instead of replacing CSS, it is a utility to make working with CSS easier, hence the name. The biggest pro and con of this library is that you have complete control over the web page’s design. Things won’t be as simple as the component frameworks, but you will have a better time customizing your page. On top of that, Tailwind comes with some nifty features that like pseudo-classes, dark mode support, hover states, and more!
A good heuristic for knowing how useful a framework is it’s community’s size and having a thriving community means it will be more likely to receive support and updates.
Bootstrap has one of the largest and longest-standing communities of any framework out there. With over 2.2 million individual users on Github, there is plenty of support. The official documentation is well written, and there is no shortage of blogs and tutorials on using Bootstrap out there.
I would describe Semantic UI as more of a niche community. While the docs are very well written, total users only come up to 12,500. That being said, I haven’t had any problem finding Stack Overflow solutions to complex problems using Semantic, but you won’t be seeing a lot of beginner material out there. Updates have also come out less frequently, so there are some concerns on if Semantic UI will continue to be relevant.
Tailwind has some momentum as an up and coming library. Even though it’s less than two years old, it has already has over 100,000 users and counting. With its growing popularity, you will find no shortage of examples and inspiration online. They even have their own Youtube channel they post regularly too.
Ranking Framework #1 Bootstrap #2 Tailwindcss #3 Semantic UI
> Responsive Design (Mobile Friendly)
Making a responsive web site in Bootstrap revolves around its column and breakpoint system.
If you wanted to make three columns of text collapsed into one column for screens smaller than the medium(md) breakpoint, it would look similar to this.
<div class="container"> <div class="row"> <div class="col-md"> One of three columns </div> <div class="col-md"> One of three columns </div> <div class="col-md"> One of three columns </div> </div> </div>
While it works well in most cases, you don’t have many options for creating unique experiences for mobile and desktop. You can use some classes to show and hide elements based on screen size. This way, you can create different elements for mobile and desktop, but it ends up being a lot of work coding for desktop and mobile separately.
Semantic UI uses a similar grid system to Bootstrap, but with a couple of extras for things like padding, margins, and float build into the grid system. The example below achieves a similar result as the Bootstrap example.
<div class="ui centered grid"> <div class="six wide tablet eight wide computer column">1</div> <div class="six wide tablet eight wide computer column">2</div> <div class="six wide tablet eight wide computer column">3</div> <div class="six wide tablet eight wide computer column">4</div> <div class="six wide tablet eight wide computer column">5</div> <div class="six wide tablet eight wide computer column">6</div> </div> <!-- With a row div --> <div class="ui four column grid"> <div class="row"> <div class="column"></div> <div class="column"></div> <div class="column"></div> </div> </div>
You will immediately notice there is a lot more when it comes to using this grid. Though the goal is to make reading HTML more human-friendly, you end writing a lot more, which can become a bit messy.
Responsive design is where Tailwind starts to show how it has been able to stand out. Instead of having a predefined grid system, Tailwind uses conditional classes. Meaning you can customize every CSS property depending on the screen size, not just the layout.
Here is an example of setting the width of a
div based on screen size.
<!-- Width of 16 by default, 32 on medium screens, and 48 on large screens --> <img class="w-16 md:w-32 lg:w-48" src="...">
And a fully-fledged card container would look something like this.
<div class="max-w-md mx-auto bg-white rounded-xl shadow-md overflow-hidden md:max-w-2xl"> <div class="md:flex"> <div class="md:flex-shrink-0"> <img class="h-48 w-full object-cover md:w-48" src="/img/store.jpg" alt="Man looking at item at a store"> </div> <div class="p-8"> <div class="uppercase tracking-wide text-sm text-indigo-500 font-semibold">Case study</div> <a href="#" class="block mt-1 text-lg leading-tight font-medium text-black hover:underline">Finding customers for your new business</a> <p class="mt-2 text-gray-500">Getting a new business off the ground is a lot of hard work. Here are five ideas you can use to find your first customers.</p> </div> </div> </div>
You can see this in action in the Tailwindcss docs
This system does give you much more control, but you run into the same problem of having some messy code.
Bootstrap has a simple and concise grid system. Easy to understand, but you can’t vary your designs much.
Semantic UI has a similar grid system with more features, but your code will look much more messy.
Tailwind using conditional classes to let you change any applied classes based on screen size. Giving you complete control over style, but can be very messy unless you use custom components.
Looks are good and all, but what if you make a web app and need some more advanced functionality for your site.
Bootstrap does not come with much functionality. You can use it with jQuery, but integration with a back-end needs to be written manually, done through a 3rd party library, or needs to be accomplished with server-side rendering.
Semantic is much more friendly for adding functionality to the website. Components like search bars, modals, forms have built-in callbacks, and REST API integration. As a full-stack developer, I enjoyed launching both front and back-ends for features quickly using Semantic.
One of Tailwind’s hidden strengths is that it has no functionality. It’s only adds styling. Meaning you can easily combine Tailwind with popular frameworks like Vue or React. The level of detail plus the component system from a frameworks like those make it one of the most robust web-stacks you can work on.
> Network Performance
Studies show if your website takes more than 3 seconds to load, you will lose about 50% of your viewers. So file sizes are critical, especially in a world where a significant portion of people are using mobile data.
|Bootstrap||187 KB||147 KB|
|Semantic UI||730 KB||550 KB|
|Library||Minified + PurgeCSS|
|Semantic UI||550 KB|
> Additional Details
Anything that makes a library stand out on it’s own.
There isn’t much in the way of features that Bootstrap has, and others don’t, but what it does have is an extensive library of examples and templates to choose from. If you are looking for some guidance, there plenty of open-source example projects to look through. If you are in a hurry and willing to drop $50 to have most of the set-up done for you, then you could look through the pre-made themes.
Semantic UI does well with AJAX webpages. It has classes and components for loaders and placeholders while requests await data. Forms have a built-in validator that supports connecting with a back-end validator. Included callback functions make adding logic to a webpage pretty straightforward. There is also a Semantic-Vue project to combine them into one framework to take things a step further.
Tailwind comes packed with some pretty cool built-in features to make your page pop. Built-in dark mode support lets you appease anyone who uses an IDE, people browsing at 2 am and gives a touch of quality to your site. Hover States, animation, and transform classes streamline the process of adding interactivity. And you even have gradient support to make those colors pop.
Tailwind has the advantage of having a large amount of control over the details of the webpage. While it might be harder for beginner developers, anyone with experience in front-end development should be able to pick it up very quickly. For something more streamlined, Semantic-UI would be the next best thing. With a combination of CSS and JS in one package, you can quickly get web apps up and running. While you lose some control of the finer details of the page’s look, a lot less time is required to get the page functional. In 2021, I would never use Bootstrap for a production website, but if you a student or just trying to get an MVP up and running as quickly as possible, you find a library as straight forward as Bootstrap.
Tailwind is one of the best options for creating modern looking production websites and plays well with other libraries like Vue and React. If you want to get a functional website up and running quickly and don’t mind looking a little cookie-cutter, Semantic-UI is a good choice.