React component library with Tailwind in 3 mins!
Tags: react, tailwindcss, tutorial, typescript
Published: 2021-10-07 00:24:06

*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)

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

if you get this error: 

```javascript
Error: PostCSS plugin tailwindcss requires PostCSS 8.
```

Just do:

```javascript
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:

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

now to create out tailwind config just run: 

```javascript
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:

```javascript
// ./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.


```javascript
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

```javascript
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:

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

for this:

```javascript
"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.

```javascript
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](https://www.npmjs.com/package/create-react-library)
[Tailwind CSS](https://tailwindcss.com/)
[Project](https://github.com/alexandprivate/alice-component-library-starter)

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 

```javascript
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_