Adding Tailwind Utility Classes to your Bootstrap Website

Tailwind is a utility-first CSS framework that one of my colleagues has been advocating internally at Rock Solid Knowledge for some time. After using Bootstrap’s utility classes on my own website, I’m finally sold on the benefits of using utility classes for web design.

Bootstrap’s utility classes are relatively basic, and I soon became jealous of some of the utility classes found in Tailwind, especially the ability to prefix any utility class with a breakpoint name (e.g. md:w-3/4).

Unfortunately, my website is pretty reliant on Bootstrap components and defaults (my bad), and the idea of ripping that out and rebuilding it from scratch with another framework was a bit too much for me. And while there may be tools out there that help you convert bootstrap CSS into Tailwind, I didn’t fancy the challenge of going through all of my articles checking for issues.

What I have ended up doing is keeping Bootstrap as my main CSS framework, but also adding Tailwind utility classes into the mix by customizing it to play nicely with Bootstrap.

This article will walk through how I have configured Tailwind to work peacefully alongside Bootstrap. To learn more about Tailwind, check out Karl’s article “Switching to Tailwind CSS”.

Configuring Tailwind

To get started with Tailwind, you’ll need to install and process it. I’m going to briefly show how to do that using my preferred tooling of npm & Gulp. Check out Tailwind’s Getting Started documentation for examples that use different build tools.

npm install tailwindcss

You’ll then want to create another CSS file (or modify an existing one that you are already processing in some way, by adding:

@tailwind utilities;

This will bring in the bulk of Tailwind’s utility classes. There are other imports, such as “base” and “components”; however, I found that I didn’t need them from day one. I’m happy using Bootstrap’s components and grid system such as alerts and buttons, for now.

Bootstrap Compatibility

Next, you’ll need to create a tailwind.config.js file either manually or using npx tailwindcss init. With this configuration file, you’re going to make Tailwind play nicely with Bootstrap by setting a prefix on all Tailwind utility classes, to prevent any duplicate class names, and then changing Tailwind’s breakpoints to match Bootstrap’s.

module.exports = {
  prefix: 'tw-',
  theme: {
    screens: {
      'sm': '576px',
      'md': '768px',
      'lg': '992px',
      'xl': '1200px',
    }
  }
}

Gulp Integration

Next up, you’ll need to process your CSS so that you can use it in your website. You can again do this manually using npx, but I’m going to walk through how to do it using gulp and PostCSS.

First, you’ll need to bring in two new dependencies:

npm install autoprefixer
npm install gulp-postcss

You can then use PostCSS to take your existing CSS file, which contains your @tailwind imports (in my case, “styles.css”), and build it into a new CSS file, ready for use in your HTML.

const { src, dest } = require('gulp')
const concat = require('gulp-concat')
const postcss = require('gulp-postcss')

function tailwind() {
    return src('styles.css')
        .pipe(postcss([
            require('tailwindcss'),
            require('autoprefixer')
        ]))
        .pipe(concat('tailwind.css'))
        .pipe(dest('./css'))
}

exports.tailwind = tailwind

You should end up with a “tailwind.css” file in your CSS folder, suitable to be used alongside Bootstrap.

PurgeCSS

Using both Bootstrap and Tailwind means that your CSS is going to be bloated with a lot of unused classes. So, as a bonus, let’s see how you can use PurgeCSS to automatically remove those unused classes, while still playing nicely with Tailwind.

You can do this using Tailwind’s purge configuration (which uses PurgeCSS internally) or manually.

With Tailwind, that’s as simple as updating your tailwind.config.js with the purge option:

purge: {
    enabled: true,
    content: ['./*.html']
}

However, if you are already using PurgeCSS in your gulp task as I had been with Bootstrap, you can continue to use this, but you’ll need some Tailwind specifics.

To do this, you’ll need to use the regex Tailwind recommends as your defaultExtractor. Otherwise, PurgeCSS, unfortunately, detects Tailwind’s breakpoint prefixes as unused.

purgecss({
    content: ['./*.html'],
    defaultExtractor: content => content.match(/[\w-/:]+(?<!:)/g) || []
})

You can add this snippet to PostCSS using the @fullhuman/postcss-purgecss library or add it directly to an existing gulp task with the gulp-purgecss package.

If configured correctly, PurgeCSS should take your tailwind.css file from just under 2 megabytes down to a few kilobytes.

Source Code

You can find a basic implementation of this on GitHub, containing a working gulp task for the above and an HTML page showing the Tailwind and Bootstrap breakpoints working in tandem.