React component library with Tailwind in 3 mins!

This article assumes you have knowledge about building React Components, Libraries, and Tailwind.

The Starter Point

If you ever want to do a React component library with typescript and have a nice setup for your blanket project I will recommend Create React Library for sure! Alongside visually test your components using Storybook, this CLI allows you, out of the box, to test your component in a real React project. Take a look at it for your next React Library Project.

The Styling

Well this part is up to you, I usually pick styled system w/ styled components but to be honest then you have to write a lot a CSS (not too much tho), and if you need to move faster get around with extra files to manage could be an issue.

Even when that approach is ok why not use utility classes? This is where Tailwind came to the rescue!

I will assume you know what tailwind CSS is and how Adam Wathan and the Tailwind team have made our lives easier, I particularly love it and use it all the time, if you do it, your delivery and development time will be shortened more than usual (fact!)

After looking out there for more than 20 mins (a fairly long time for looking at something code-related!) I realized I will need to do it myself and share the starter with everyone out there

Adding Tailwind to Create React Library

Nothing fancy here just install tailwind CSS (follow the documentation)

npm install -D tailwindcss@latest postcss@latest autoprefixer@latest

if you get this error:

Error: PostCSS plugin tailwindcss requires PostCSS 8.

Just do:

npm uninstall tailwindcss postcss autoprefixer

npm install -D tailwindcss@npm:@tailwindcss/postcss7-compat postcss@^7 autoprefixer@^9

Creating the config files

Create the PostCSS and Tailwind configs

in the root of our project add

postcss.config.js with this content:

module.exports = {
  plugins: {
    tailwindcss: {},
    autoprefixer: {},
  }
}

now to create out tailwind config just run:

npx tailwindcss init

Create tailwind css file by creating a css files named the way you want it at the inside the root folder with this content:

// ./src/tailwind.css
@import 'tailwindcss/base';
@import 'tailwindcss/components';
@import 'tailwindcss/utilities';

Now in your root project, you will find the index.tsx file where you need to export all your components to be used from your library, just include our tailwind CSS in there.

import './tailwind.css'

// rest of my components exports here like

export { default as Button } from './Button'

and as the final step let's change a bit the tailwind config, in the purge part

purge: {
  enabled: process.env.NODE_ENV === 'publish',
  content: ['./src/**/*.{js,jsx,ts,tsx}']
},

I will come to the enabled: process.env.NODE_ENV === 'publish', part later

If you read the documentation of Create React Library, you know that you run yarn start to kickstart your Library project, this will run in watch mode and rebuild your library after any component updates

the dist/ folder will be created with an index.css file with all tailwind classes! Now you can develop your components import them in the App.tsx inside example to test it (once again read Create React Documentation)

Publishing and Purging

Now let's come to the part where you wanna publish your library to NPM ... Well that super big CSS in dist/ is not suitable for publishing and this is the real deal part

go to the package.json and do a super simple trick! Change the NODE_ENV value for each script case

When we run yarn start we don't want to purge our CSS since we need all the available tailwind classes for development, but when we run yarn build we need to purge the CSS to only leave the classes our components are using and lower the file size

in the package.json change this:

"build": "microbundle-crl --no-compress --format modern,cjs",
"start": "microbundle-crl watch --no-compress --format modern,cjs ",

for this:

"build": "NODE_ENV=publish microbundle-crl --no-compress --format modern,cjs",
"start": "NODE_ENV=development microbundle-crl watch --no-compress --format modern,cjs ",

When you publish your library, it can be used in any react project importing your components and the theme.

import { Component } from 'your-component-library'
import 'your-component-library/dist/index.css'

Remember the theme could be imported one time in your app in the app.js or index.js files, you don't to do it on every component.

And that's it! You have now you are ready to build amazing react components for everyone out there! Just make it open-source please! :)

Links

Create React Library
Tailwind CSS
Project

Thanks!

Disclaimer! If you are using a Window computer (I don't know why). Setting the NODE_ENV value via script may fail, just run

npm install -g win-node-env

and try again, this should solve the issue :)

Note: This article is not up to date for tailwind v4

Comments

[Brandon McConnell]

I’ve been waiting for a guide like this! Thanks!

However, this appears to be using an older version of Tailwind. I saw on Twitter last week that the latest version of Tailwind no longer uses Purge at all and now only uses the JIT engine. Could you adjust your steps to reflect hat, or add an alternate step to use the latest version of Tailwind (v3 alpha/beta w/ JIT)?

[Alex Suarez]

Hi Brandon! Thank you for your comment! Since V3 is still in alpha, alpha one to be more precise, I will be updating the article in the future when V3 be more stable.

Now with that said, your comment you said V3 doesn't use "purge" anymore and technically that's not true, if you take a look at the release notes, V3 uses 'purge' but they changed the name to 'content' like:

content: ['./src/**/*.html' /* ... */],

Also it should work fine keeping purge as key name, you may want take a second look at the release note -> github.com/tailwindlabs/tailwindcs...

So in theory the only change we need to do is literally change the name "purge" for "content" in the tailwind.config but once again I would prefer to wait for a more stable version.

Thanks again for your comment!

[Brandon McConnell]

That's fair enough! Yes, the switch from purge to content was precisely what I was referring to.

I look forward to your update. Thanks! 🙏🏼

[Alex Suarez]

Thanks! I'll be trying and I'll let you know but I'm pretty sure the only change will be changing purge for content and should work out of the box! 👍

[Ramón Chancay 👨🏻‍💻]

Wow ... didn't know about microbundle-crl, it's a microbundle fork for create-react-library.

This could be bigger including unit testing and more, this is a great start, thanks for sharing.

[Alex Suarez]

You are welcome master

[Tekena Solomon]

You could use the cross-env package

[Alex Suarez]

Hi Tekena, thats true but there is a couple if things here, since this is a library I prefer to keep it as dry as possible, on the other hand cross-env is in maintenance mode right now, and also is focus on windows so the solution to install globally win-node-env solve the issue as well :)

[Rolando Niubo]

I see this article been useful for a lot of ppl right now! It worth sharing!