React component library with Tailwind in 3 mins!

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

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.

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

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

npm install -D tailwindcss@latest postcss@latest autoprefixer@latest
Enter fullscreen mode

Exit fullscreen mode

if you get this error:

Error: PostCSS plugin tailwindcss requires PostCSS 8.
Enter fullscreen mode

Exit fullscreen mode

Just do:

npm uninstall tailwindcss postcss autoprefixer

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

Exit fullscreen mode

Create the PostCSS and Tailwind configs

in the root of our project add

postcss.config.js with this content:

module.exports = {
  plugins: {
    tailwindcss: {},
    autoprefixer: {},
Enter fullscreen mode

Exit fullscreen mode

now to create out tailwind config just run:

npx tailwindcss init
Enter fullscreen mode

Exit fullscreen mode

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';
Enter fullscreen mode

Exit fullscreen mode

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'
Enter fullscreen mode

Exit fullscreen mode

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}']
Enter fullscreen mode

Exit fullscreen mode

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 ",
Enter fullscreen mode

Exit fullscreen mode

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 ",
Enter fullscreen mode

Exit fullscreen mode

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'
Enter fullscreen mode

Exit fullscreen mode

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! 🙂

Create React Library
Tailwind CSS



Leave a Reply

Your email address will not be published. Required fields are marked *

This site is protected by reCAPTCHA and the Google Privacy Policy and Terms of Service apply.

GIPHY App Key not set. Please check settings

Five Video Features Developers No Longer Need to Build From Scratch

Built-in-like Range in JavaScript – DEV Community