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