Packaging a React/Tailwind CSS UI Library

We have recently started converting our ClairUI library from Bootstrap to Tailwind CSS. The major reason behind the change is that we wanted to get rid of the cumbersome way of implementing our UI components that is due to the way Bootstrap is conceived.

Don’t get me wrong, Bootstrap is awesome. It has served its purpose for a while now and I would definitely use it for a pure HTML/JS project anytime. However, when it comes to implementing “UI Kits” in React (with all the involved complexity of managing React components on their own), Tailwind CSS offers a much faster approach to designing your components.

What do you need to build your React UI library with Tailwind CSS?

Well, not much.

Here are the few things you need to get started.

You will need to install Tailwind CSS and its dependencies.

yarn add --dev tailwindcss@npm:@tailwindcss/postcss7-compat postcss@^7 autoprefixer@^9

You probably used create-react-app to start your React project. It doesn’t let you override the PostCSS configuration natively, so you will need CRACO in order to be able to configure Tailwind CSS correctly. CRACO is literally just a package that allows you to override CRA configurations such as the PostCSS one.

yarn add @craco/craco

You can skip this step if you are not using CRA and can override PostCSS configs.

At the root of your app, create a craco.config.js file containing the following base.

module.exports = 
{
  style: 
  {
    postcss: 
    {
      plugins: 
      [
        require('tailwindcss'),
        require('autoprefixer')
      ]
    }
  }
}

You can then replace your start, build, and test scripts in your package.json.

"scripts": 
{
  "start": "craco start",
  "build": "craco build",
  "test": "craco test"
}

Getting started with Tailwind CSS

Now that you have the pre-requisites installed, let’s get into Tailwind CSS.

At the root of your app, create a tailwind.config.js file by using the following command:

 yarn tailwindcss-cli@latest init

This should result to this minimal base

module.exports = {
  purge: [],
  darkMode: false, // or 'media' or 'class'
  theme: {
    extend: {},
  },
  variants: {
    extend: {},
  },
  plugins: [],
}

You now need to configure the purge option with the paths to all of your components. This will allow Tailwind CSS to tree-shake unused styles in production builds.

purge: ['./src/**/*.{js,jsx,ts,tsx}', './public/index.html']

Your app is now ready for your use of Tailwind CSS.

Packaging your library

Ok, you’re done building your UI kit and finally want to publish it on NPM.

Where do you start?

First of all, you will need Rollup to package your library. As per their own description of the library, Rollup is a module bundler for JavaScript which compiles small pieces of code into something larger and more complex, such as a library or application.

So let’s get you started by adding Rollup to your dev dependencies.

yarn add --dev rollup

At root, create a rollup.config.js file with the following base.

export default 
{
  input: <PATH_TO_YOUR_INDEX>,
  output: 
  {
    file: pkg.main,
    format: 'cjs',
    exports: 'named',
    sourcemap: true,
    strict: false
  }
}

The output configuration is up to you and what you actually want. For ClairUI, this setup is what we are looking for.

Adding PostCSS support to Rollup

Now that rollup is there, we need rollup-plugin-postcss to be installed so that Rollup knows how to handle Tailwind CSS.

yarn add --dev rollup-plugin-postcss

Now that the plugin is installed, import it into your rollup.config.js file.

import postcss from "rollup-plugin-postcss"

Still in your rollup.config.js, add the following object to your config under input and output keys.

plugins: 
[
    postcss
    ({
      config: 
      {
        path: "./postcss.config.js"
      },
      extensions: [".css"],
      minimize: true,
      inject: 
      {
        insertAt: "top"
      }
    })
]

What matters the most in this object is the inject key. It will dictate where in your library file will the CSS be injected. Since Tailwind CSS cares about the order of priority, you will need your CSS injected at the top.

Adding React support to Rollup

Now you will need rollup to know about your library need for React. The way to do that is to add react and react-dom to your peer dependencies in package.json.

"peerDependencies": {
    "react": "^17.0.2",
    "react-dom": "^17.0.2"
},

Finally for this part, add react and react-dom to your rollup external dependencies below your plugins key in rollup.config.js.

external: ["react", "react-dom"]

Now, running the rollup build command should finally build your library.

NODE_ENV=production rollup -c

Aaaaaand, that’s it! Your React/Tailwind CSS is now ready to be published on npm and used in your projects!