Obinna Ekwuno Writer of all things technical and inspirational. Developer and Community Advocate. In a love-love relationship with JavaScript🔥

Tailwind CSS vs. Bootstrap: Is it time to ditch UI kits?

10 min read 2869

Editor’s note: This post was last updated on 19 July 2021 to include information about the most recent major Tailwind CSS release, Tailwind CSS v2.2.

We’re experiencing a renaissance of amazing web platforms and responsive design. Responsive user interfaces are often implemented using UI kits such as Bootstrap, Foundation, Bulma, and good old-fashioned media queries.

These UI kits enable us to easily implement directives to achieve the exact UI and proper responsiveness we require with less code. But have we been doing it right?

What if we could achieve a responsive UI without being bound by the rules of a UI kit? Is there a way to achieve responsiveness and still keep our custom user interface designs? For developers who value a high degree of customizability Tailwind CSS offers more flexibility than a UI kit such as Bootstrap.

In this guide, we’ll explore the differences between Tailwind CSS and Bootstrap, review some examples to demonstrate the advantages of using a utility-first CSS framework over a traditional UI kit, and highlight some of the most recent major changes to the ever-evolving Tailwind CSS framework.

What is Tailwind CSS?

According to the official documentation, Tailwind CSS is a utility-first CSS framework for rapidly building custom user interfaces. I like to think of it as a cool way to write inline styling and achieve an awesome interface without writing a single line of your own CSS.

In my opinion, the one thing that most developers will find a bit distracting with Tailwind CSS is the fact that your markup looks a lot busier than you might like. Tailwind CSS isn’t the first utility-first CSS library, but it is the most popular at the moment.

What’s the difference between Tailwind CSS and Bootstrap?

Bootstrap is the most popular HTML, CSS, and JavaScript framework for building responsive, mobile-first projects on the web. Tailwind CSS, on the other hand, is the most popular utility-first CSS framework for fast UI development.

The main difference between TailwindCSS and Bootstrap is that Tailwind CSS is not a UI kit. Unlike UI kits such as Bootstrap, Bulma, and Foundation, Tailwind CSS doesn’t have a default theme or built-in UI components. Instead, it comes with predesigned widgets you can use to build your site from scratch.

Bootstrap is known for its responsiveness, whereas proponents of Tailwind CSS typically value the framework’s customizability. The best choice for you depends on your priorities and project requirements, but let’s talk about why Tailwind CSS is quickly gaining popularity and more widespread use.

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

Is Tailwind CSS better than Bootstrap?

Frameworks like Bootstrap have abstracted the creation of components to the point where it compels developers to use only the available patterns provided. The same goes for other UI kit-type frameworks. Some might argue that overriding the framework with our own CSS is an option, but if we override a lot, then is there really any point in using the framework? We’d be pulling in the library and still writing our own code  —  this is just more files to worry about, and we are not even saving time.

Another problem I have found with Bootstrap sites is that they almost always look alike, so this inhibits our ability to incorporate creativity into the dev environment. This is one of the advantages of Tailwind CSS: its ability to easily build complex user interfaces without encouraging any two sites to look the same.

Another key advantage of using Tailwind CSS over Bootstrap is that, since apps and sites are composed of predesigned widgets, Tailwind CSS doesn’t impose difficult-to-reverse design decisions.

Working with Tailwind CSS means using a set of utility classes that lets you work with exactly what you need. In my opinion, this is a neat way to create user interfaces that are more flexible to developers’ creativity.

Another advantage I really appreciate  —  and I am sure every frontend developer would also appreciate  —  is never having to worry about changes to one element affecting another related element. No more tabbing back and forth between HTML and style sheets in your editor, no more going back to check and see what you named that other element. In my opinion, this is the future.

How to install Tailwind CSS

Although CDN is a good way to import styling in your project, many features of Tailwind CSS are not available using the CDN builds. To take full advantage of Tailwind’s features, you must first install Tailwind via npm.

Tailwind is available on npm and can be installed using npm or Yarn:

# Using npm
npm install tailwindcss --save-dev
# Using Yarn
yarn add tailwindcss --dev

Next, create a Tailwind config file. Tailwind is configured almost entirely in plain JavaScript.

To do this, you’ll need to generate a Tailwind config file for your project. It is recommended to create a tailwind.js file in your project’s root. The CLI utility helps you handle this easily:

# Using npm
npx tailwind init [filename]
# Using Yarn
yarn tailwind init [filename]

If you’re an experienced Tailwind user who doesn’t need the comments in the config file, you can use the --no-comments flag when generating your config file to strip them out.

What does utility-first mean?

Tailwind CSS is a utility-first library, which simply means that, unlike Bootstrap, Tailwind doesn’t provide automatically prestyled components. Rather, it provides utility classes that help us style our components in certain ways and allow us to build our own classes.

Let’s look at two simple examples to explore this concept.

Example 1: Simple button demo

See the Pen
Box example .
by Ekwuno Obinna (@ekwunoobinna)
on CodePen.

From the above example, you can see how easy it is to implement a button component with Tailwind CSS.

Example 2: Simple card demo

The code below is a simple example of a card created with the Tailwind CSS framework . If you are familiar with CSS, you might already be able to make out some of the things going on with the styling. It might be a bit tricky to memorize all of this at first, but once you have some familiarity with the syntax, you will be alright.

The code snippet below has a container that has a shadow for large screens due to the shadow-lg class and a white background implemented with bg-white. You’ll also notice the px-4 and py-1 classes — these are just to help with padding in the x- and y-axes for the message button.

<div class="bg-white mx-auto max-w-sm shadow-lg rounded-lg overflow-hidden"> 
  <div class="sm:flex sm:items-center px-6 py-4"> 
    <img class="block h-16 sm:h-24 rounded-full mx-auto mb-4 sm:mb-0 sm:mr-4 sm:ml-0" src="https://avatars2.githubusercontent.com/u/4323180?s=400&u=4962a4441fae9fba5f0f86456c6c506a21ffca4f&v=4" alt=""> <div class="text-center sm:text-left sm:flex-grow"> 
      <div class="mb-4"> 
        <p class="text-xl leading-tight">Adam Wathan</p> 
        <p class="text-sm leading-tight text-gray-400">Developer at NothingWorks Inc.</p> 
      </div> 
      <div> 
        <button class="text-xs font-semibold rounded-full px-4 py-1 leading-normal bg-white border-2 border-purple-400 text-purple-500 hover:bg-purple-600 hover:text-white">Message</button> 
      </div> 
    </div> 
  </div> 
</div>

Here is a CodePen that shows what the above code looks like:

See the Pen
Tailwind Css Card
by Chidume David (@philipsz-davido)
on CodePen.

Tailwind CSS vs. Bootstrap: Performance

The default Tailwind configuration comes with 36.4KB minified and g-zipped. Compared to Bootstrap at 22.1KB ,  Tailwind is 14.3KB heavier. You might be thinking, ”Is this really the way to go in terms of performance?”

The reason for this is simple: Tailwind comes prepacked with a lot of options and styles for users to choose from, and it packs all these variations to reduce the tendency to write your own CSS. Fortunately, Tailwind comes with a few strategies you can use to keep your generated CSS small and performant.

Limit your color palette

Because the built-in utility modules in Tailwind use the plugin system under the hood, it’s possible to delete a ton of code and make the plugin system the way that new classes are registered inside Tailwind CSS.

This makes it possible to include only code we actually need in projects while ignoring everything else  — unlike Bootstrap, in which there is a lot of overhead code. This upgrade feature shortens the build time from 158 seconds to 8 seconds.

We can get the exact amount of color variations we need in a project, like so:

// ...

module.exports = {
  // ...

  textColors: {
    'black': colors['black'],
    'grey-darker': colors['grey-darker'],
    'grey-dark': colors['grey-dark'],
    'red-dark': colors['red-dark'],
    'red': colors['red'],
    'blue-dark': colors['blue-dark'],
    'blue': colors['blue'],
    // ...
  }
}

Just made a nice O(n) to O(1) performance optimization to the @tailwindcss build process 💪🏻
You monsters using at-apply for everything will be happy 😇 — Adam Wathan (@adamwathan) March 1, 2018

Remove unused CSS with PurgeCSS

Tailwind also removes unused CSS with PurgeCSS, a tool for removing unused CSS from your project. It does this by simply comparing the CSS class names available in your template against the class names used and then removing the unused CSS.

Pick the exact number of screens you need

Tailwind CSS allows you to pick the exact amount of screen sizes you need. Here’s how defining fewer screens affects the output:

  • Five screen sizes (default): 36.4KB
  • Four screen sizes: 29.4KB
  • Three screen sizes: 22.4KB
  • Two screen sizes: 15.4KB
  • One screen size: 8.4KB

Improved Tailwind CLI

Tailwind CSS 2.2 introduced major optimizations to the Tailwind CLI tool. The Tailwind CLI was totally revamped from the ground-up to make it more performant.

With the upgraded CLI, Tailwind CSS requires no installation or configuration. You can pass subcommands to the Tailwind CLI to process CSS files to your specification. The command npx tailwindcss can be passed subargs, so this does away with any Tailwind configuration; everything can be done via the command line.

Tailwind CLI can run in watch mode. This means that the Tailwind CLI runs in the background to watch for changes in our CSS and rebuilds the CSS whenever a change is detected. This is highly performant because it eliminates the need to rebuild your CSS manually after each change.

In addition, the Tailwind CLI now includes PostCSS plugin support. By creating a postcss.config.js file and including PostCSS extra plugins, you can use the --postcss flag in your npx tailwind command to include the PostCSS plugins when building your CSS.

Finally, the revamped Tailwind CLI can be set to build your CSS for production. Building for production will cause the Tailwind CLI to remove unused CSS. This results in a highly optimized and smaller build, which leads to optimal performance because of the low file-size footprint. To set production, we use the NODE_ENV=production and the --minify flag to compress the CSS for an optimal build.

How flexible is Tailwind CSS?

Tailwind is very flexible because it allows you to add your own utilities and provides a guide to help you implement this.

Let’s take a simple style implementation as an example. A normal Tailwind setup is a single CSS file that looks like this:

@tailwind preflight;

@tailwind components;

@tailwind utilities;

To override the default utilities, we would have to import the override last so that it’s applied first (which is a common CSS rule):

@tailwind preflight;

@tailwind components;

@tailwind utilities;

.bg-cover-image {
  background-image: url('/path/to/image.jpg');
}

But if you’re using postcss-import or a preprocessor like Less, Sass, or Stylus, keeping your utilities in a separate file and importing them would be the best move:

@tailwind preflight;

@tailwind components;

@tailwind utilities;

@import "leveledup-utilities";

The same can be done for responsive layouts. Custom utilities will always take precedence over prefixed utilities as long as it is done properly.

Extracting utility patterns with @apply

Let’s say you’re reusing a certain button style in multiple places. Retyping the same type of specification for the same component becomes a bit boring. Not to worry: Tailwind has a way to reuse styling with @apply.

Here’s an example:

<button class="btn-gray">
  Button 
</button> 

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

Note: hover:, focus:, and {screen}: utility variants can’t be mixed in directly.

Tailwind CSS in 2021: What’s new and where are we headed?

On 17 June 2021, Tailwind released “one of the most feature-rich Tailwind releases of all-time,” Tailwind CSS v2.2. This release came on the heels of Tailwind CSS v2.1, which introduced Just-in-Time mode, a new just-in-time compiler that generates styles on demand as you write your templates rather than generating everything in advance at initial build time.

In addition to the new Tailwind CLI, the most recent major release includes the introduction of pseudo-class support, shorthand color opacity syntax, a host of new variants, and much more. Check out Tailwind’s release history to keep up with the most recent changes.

Let’s highlight a few features that were introduced in Tailwind v2.2.

First-letter and first-line variants

This feature is a pseudo-element variant. It allows us to add the ::first-letter and ::first-line CSS pseudo-selectors to our elements.

The ::first-letter CSS selector selects and styles the first letter of the element’s text node it was applied to.

<p class="first-letter:font-bold">
  This blog post represents everything you can find in today's work.
</p>

The above code will make the first letter of the p element’s text node bolder than other letters in its text node.

<p class="first-letter:font-bold first-letter:text-4l">
  This blog post represents everything you can find in today's work.
</p>

The above code makes the first letter of the p element’s text node bolder and larger than other letters in the text node.

The ::first-line pseudo-selectors style the first line of a block-level element.

<p class="first-line:text-red-500">
  This blog post represents everything you can find in today's work.
</p>

This turns the first line of the p element’s text node to the color red.

This feature is used in Tailwind CSS’s JIT mode.

before and after variants

This new feature makes it possible to style before and after pseudo-elements. These pseudo-selectors insert some text before and after an element.

We can now use the before and after pseudo-selectors in Tailwind.

Here’s an example:

<p class="before:content-['B'] before:block before:bg-red-500">
  This blog post represents everything you can find in today's work.
</p>

The above adds the text B add the beginning of the p element. The background of the content is set to deep red.

Let’s see how we can affect the after selector with the same example:

<p class="after:content-['A'] after:block after:bg-red-500">
  This blog post represents everything you can find in today's work.
</p>

This adds the text A at the end of the p element. The text will appear in deep red.

This feature too is enabled in Tailwind’s JIT mode.

Selected text variants

Tailwind CSS now includes a selection text variant that enables you to style the selected text on an element.

<p class="selection:bg-blue-500">
  This blog post represents everything you can find in today's work.
</p>

This will style the background color of the selected text in the p element to deep blue.

Like the other new features described above, the selection text variant is available in JIT mode.

List marker variants

The marker variant compiles down to the ::marker pseudo-selector. It enables you to style the marker of a list item. This selector works on display:list-item elements.

<ul class="marker:text-blue-500">
  <li>Reactjs</li>
  <li>Vuejs</li>
  <li>Angular</li>
  <li>Svelte</li>
  <li>Nextjs</li
</ul>

The above code makes the color of the li items deep blue.

Tailwind CSS’s new features added basically all pseudo-classes, including:

  • only (only-child)
  • first-of-type
  • last-of-type
  • only-of-type
  • target
  • default
  • indeterminate
  • placeholder-shown
  • autofill
  • required
  • valid
  • invalid
  • in-range
  • out-of-range

For a deeper dive into the new features introduced with Tailwind CSS v2.2, check the release history.

Is Tailwind CSS easier than Bootstrap?

Bootstrap is a component-based framework, which means it comes with prebuilt components and includes other utilities for layering displays, spacing, etc.

Tailwind, on the other hand, CSS is a utility-first framework. Using Tailwind CSS is akin to writing regular CSS. Unlike Bootstrap, it has no prebuilt components.

With Bootstrap’s prebuilt components, there is little CSS for you to write. As a result, subtle changes in the design could lead to hiccups. With Tailwind CSS, you style your elements from scratch using Tailwind’s styling syntax. It’s easier to make changes with Tailwind CSS because you only have to remove some CSS classes.

So which is easier, Tailwind CSS or Bootstrap? It depends largely on the use case and learning curve. If you’ve mastered CSS, you’re already well on your way to mastering Tailwind CSS. For this reason, Tailwind CSS is an excellent choice for most projects.

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 — .


Obinna Ekwuno Writer of all things technical and inspirational. Developer and Community Advocate. In a love-love relationship with JavaScript🔥

8 Replies to “Tailwind CSS vs. Bootstrap: Is it time to ditch…”

  1. Need to update your code in the first example. `bg-purple` and `bg-purple-dark` no longer exist. Try `bg-purple-600 hover:bg-purple-800`

  2. “Another advantage I really appreciate — and I am sure every front-end developer would also appreciate — is never having to worry about changes to one element affecting another related element.”

    So if I change a component I need to change all other components manually to keep my layout consistent? That sounds really cumbersome and I don’t see how this is an improvement.

  3. Hey Bas!
    You have two basic choices for repeated elements here:
    1. use @apply in your CSS and build up your own class es for repeated components
    2. use Vue-, React- or PHP-Components and just include them whereever needed.
    It’s not too bad, for elements that lie beyond direct control, like WordPress’ WYSIWYG-Fields I just wrap that in a content class and use apply to style elements in there.

    Cheerio.

  4. Also for Bas,

    It can also depend on where you want to put your eggs.

    Do you want components you can guarantee won’t be effected or broken over time with a maximum css file size.

    Or do you want to update a handful of classes in the off chance your design requirement might change half way through. Which even if it does change, you get the benefit of not breaking other components by changing your design requirements 🙂

    People often forget that other programming languages apply the styling directly to the elements rather than global style sheets, so if it works for them! Can work for you

Leave a Reply