Elijah Asaolu I am a programmer, I have a life.

Bootstrap, Materialize, and Tailwind CSS: Which is best?

6 min read 1730

Bootstrap, Tailwind, and Materialize logos.

Introduction

Building your frontend application without relying on an existing library is great. But learning how to implement them doesn’t just save you time — it also helps you build clean and symmetrical layouts without extra effort. All of these libraries are built with cross-browser functionality in mind.

While there are numerous UI libraries out there, there are tons of differences between each one of them, ranging from accessibility to extensibility (amongst other criteria).

This article will identify the key differences between these three popular UI libraries: Bootstrap, Materialize, and Tailwind CSS.

Bootstrap

Before we get started, let’s talk a bit about Bootstrap.

Bootstrap was initially developed by Mark Otto and Jacob Thornton while they were both working at Twitter. The first version was originally released on Friday, August 19, 2011. Since its release, the library has gained a lot of attention in the developer community, with over 140k stars on Github (presently) and 1000+ active contributors.

Bootstrap at first uses CSS and optionally jQuery design templates for its components. But the latest version, Bootstrap 5 Alpha, dropped support for jQuery in favor of vanilla (plain) JavaScript.

Using Bootstrap

Integrating Bootstrap into a new or existing project is super easy. You can get started by including the CDN or downloading the source file(s) and linking them in your markup page. Also, the developer community strives to help bring Bootstrap to literally all frontend frameworks like React, Vue.js, and Svelte.

BootstrapVue: BootstrapVue helps you build applications using Vue.js and Bootstrap v4. It provides the most comprehensive implementations of the Bootstrap v4 components and grid system. Apart from core Bootstrap components, bootstrapvue provides additional components like the skeleton loader and lazy load images. Plus, it also includes support for Bootstrap icons out of the box.

Reactstrap: Reactstrap is like BootstrapVue, but for React.js. And unlike BootstrapVue, this library does not support the standard bootstrap icons. Also, there are no additional components.

Sveltestrap: As the name implies, Sveltestrap provides Bootstrap v4 components for a Svelte app, without requiring you to use Bootstrap component classes. A slight difference between BootstrapVue and Reactstrap and this library is that it does not include Bootstrap CSS by default. You’ll need to either include it via Bootstrap CDN or install it from npm.

We made a custom demo for .
No really. Click here to check it out.

Accessibility

Ideally, Bootstrap was built to conform to the standard Web Content Accessibility Guidelines 2.0 (WCAG 2.0). But of course, most accessibility factors also depend on the developer’s markup structure, additional styling, and scripts used. The Bootstrap team was fair enough to have noted how to include further accessibility roles and attributes for each interactive component in their documentation. That makes it easier for developers to more accurately state the functionality of their component.

For screen-readers: Bootstrap provides a utility class (.sr-only) to hide contents visually while also making them accessible to assistive technologies like screen-readers.

This comes in handy in situations where additional information needs to be conveyed to non-visual users.

Here’s an example:

<p class="text-danger">
  <span class="sr-only">Danger: </span>
  This action is not reversible
</p>

Extending Bootstrap

You might want to make changes to some existing Bootstrap styles. For example, you may what to change the default colors for different components or modify borders.

There are two major ways to work around this.

Override with a custom CSS file: This is definitely the easiest work around when it comes to extending Bootstrap. This method requires you to create an external (custom) .css file and reference it after the main Bootstrap CSS file.

Here’s an example:

<link rel="stylesheet" type="text/css" href="bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="override.css">

Customize using SASS: This method might be quite complicated for those who are not familiar with SASS (syntactically awesome style sheets). SASS is basically a preprocessor scripting language compiled into CSS. SASS makes creating and reusing CSS variables less painful. Plus, its support for other features like nested styling, mixins, and modules makes it loved by the developer community.

Bootstrap 4 was written in SASS, then further compiled to pure CSS using a SASS preprocessor, so this makes it easy for developers familiar with SASS to modify and finetune the entire library to their taste.

Material CSS

Material CSS is a set of libraries/framework built to conform to the standard material design system.

The material design system was created by Google to help developers build high-quality digital experiences for Android, iOS, Flutter, and the web. Applications in this case are built to follow the principles, behaviors, and design guidelines as documented in the official website.

The design guideline also includes documentation for how components should be created, colors and theming options to follow, principles on how interaction and animation flows should be, and fonts and recommended icons, among many guidelines.

Using Material CSS

Materialize CSS: The first CSS library to conform to this design pattern is Materialize CSS. This library was built by a team of 4 students from Carnegie Mellon University. This library was built with SASS, and then converted to CSS with a preprocessor. Getting started is also as easy as including the CDN or downloading the source file(s) and linking them in your markup page.

Vuetify: Vuetify provides tons of material design components in a Vue.js-based application. While there are multiple material design frameworks for Vue.js, Vuetify has strived to become a favorite among Vue developers because it’s quite easy to learn, compared to other frameworks. Plus, it was built to be modular, responsive, and performant by default, and it can easily be customized and extended. There is also a feature to choose between different theme options.

Material-UI for React: Material-UI is an implementation of the material design system for a React-based application, supporting tons of components. It’s also quite easy to learn. And just like Vuetify, Material-UI does have support for different theming options. Another interesting feature is that you can use Material-UI’s styling solution in your app without having to use its components directly.

Accessibility

The Google material design system already includes accessibility guidelines and best practices, as well as libraries/frameworks created around it are bound to follow them by default. Also, most of these libraries like Vuetify and Material-UI do have some additional features to further create rich accessible applications.

Extensibility

Extending Materialize: Materialize components can be extended in two different ways. The first way requires you to create a custom CSS file, e.g., override.css. Link this file immediately after the materialize.css file. Just like bootstrap core, materialize was also built with SASS and compiled to CSS using a precompiler.

The second option is to download the materialize core SASS file, and then edit and fine tune the variables (colors, border-height e.t.c) to your preferred taste. Finally, you’d recompile to CSS.

Extending Vuetify: Vuetify also uses SASS. If your project was built using vue-cli, all you need to do is create a folder called sass, scss or styles in your src directory, along with a file named variables.scss or variables.sass. In there, you specify the variable name along with the override value. The vuetify-loader will automatically bootstrap your variables into Vue CLI’s compilation process, overwriting the framework defaults.

Tailwind CSS

Tailwind CSS is a relatively new frontend framework initially released on November 1st, 2017, with its first version created by Adam Wathan and Steve Schoger. The library has since gained a lot of attention and has even been adopted by big companies, including Algolia and Mozilla.

Tailwind CSS differs from the earlier mentioned CSS libraries in that it does not directly provide UI components. Instead, it provides low-level utility classes that let you build completely custom designs.

Using Tailwind CSS

Tailwind CSS is available as a Node package (npm) and is served via CDN. However, there are some cons attached to using the framework via CDN. Some of these include:

  • You can’t customize Tailwind’s default theme
  • You can’t use any directives like @apply, @variants, etc. (like the extracting components example above)
  • You can’t enable features like group-hover – the group-hover feature allows you to style a child element when hovering over a specific parent element.
  • You can’t install third-party plugins.

Accessibility

Tailwind CSS is built to be performant and accessible by default. Like Bootstrap, Tailwind does provide additional utility classes to further enhance accessibility. One of them is the screen-reader (.sr) class.

Say, for example, you want to make information accessible to screen-readers only. You can easily bind the with a .sr-only class.

For example:

<span class="sr-only">Only visible to screen readers</span>

Tailwind additionally provides a .not-sr-only to make an element visible to sighted users as well as screen readers.

Below is an example making an element accessible to screen readers only on a desktop device, and accessible to both sighted users and screen-readers on smaller devices.

<span class="sr-only sm:not-sr-only">This is some information...</span>

What does this mean?

Below is an example of how to create a primary (blue) button in Bootstrap, Materialize, and Tailwind CSS.

Bootstrap example

<button class=”btn btn-primary”>Awesome Button</button>

Materialize example

<button class="btn blue">Awesome Button</button>

Tailwind CSS example

<button class="bg-blue-500 hover:bg-blue-600 text-white font-bold py-2 px-4 rounded">
  Awesome Button
</button>

As you can see, unlike the other libraries, Tailwind lets you customize your element directly using utility classes. You get to directly specify the color variant, the background color on hover, and more.

The example above would be quite exhaustive and time-wasting when you have common components that follow the same design pattern.

That’s why they have included an option for extracting components classes. Here is an example below:

<button class="btn btn-blue">
  Custom Button
</button>
<button class="btn btn-blue">
  Another Button
</button>

<style>
  .btn {
    @apply font-bold py-2 px-4 rounded;
  }
  .btn-blue {
    @apply bg-blue-500 text-white;
  }
  .btn-blue:hover {
    @apply bg-blue-600;
  }
</style>

Conclusion

This article provided an in-depth guide to popular CSS libraries/frameworks.

I hope this helps you choose the right tool to use when developing your frontend applications. If you do have an additional reason for preferring a framework over others, kindly drop the in the comment section. Let’s discuss.

Thanks for reading.

Is your frontend hogging your users' CPU?

As web frontends get increasingly complex, resource-greedy features demand more and more from the browser. If you’re interested in monitoring and tracking client-side CPU usage, memory usage, and more for all of your users in production, try LogRocket.https://logrocket.com/signup/

LogRocket is like a DVR for web apps, recording everything that happens in your web app or site. Instead of guessing why problems happen, you can aggregate and report on key frontend performance metrics, replay user sessions along with application state, log network requests, and automatically surface all errors.

Modernize how you debug web apps — .

Elijah Asaolu I am a programmer, I have a life.

4 Replies to “Bootstrap, Materialize, and Tailwind CSS: Which is best?”

  1. Great article.

    I’ve used Bootstrap for years but at most times I don’t use the default styles, which means the built-in classes, like “btn”, “table”, are usually re-styled, so I decided to try Tailwind to create different custom classes (or custom components in frameworks like Vue) for different projects.

  2. I hated Tailwind the first minutes, until I really realize how it works, and how you should use it. Now I think It’s awesome.

Leave a Reply