Publish Your React Component to NPM

How to publish React Component with Tailwind CSS and tsup as module bundle on NPM

First of all we should know whats tsup is.

The simplest and fastest way to bundle your TypeScript libraries.

tsup is highly recommended if you want to bundle your React Component with no config, its fast because powered by esbuild.

The good thing is that.

Anything that’s supported by Node.js natively, namely .js, .json, .mjs. And TypeScript .ts, .tsx. CSS support is experimental.

On this article we will try to create React Component based on Tailwind CSS

A utility-first CSS framework for rapidly building custom user interfaces.

Step To Reproduce

1. Setup Tailwind CSS project
2. Create a sample component
3. tsup configuration
4. Publish it on NPM
5. Try our component

1. Setup Tailwind CSS project

You can refer this link to start the project with Tailwind CSS.

2. Create a sample component

Let’s create a simple component named Button.tsx on this project.

// src/components/Button.tsx

export function Button() {

  return (
    <button type="button" className="text-white bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:ring-blue-300 font-medium rounded-lg text-sm px-5 py-2.5 me-2 mb-2 dark:bg-blue-600 dark:hover:bg-blue-700 focus:outline-none dark:focus:ring-blue-800">
      Default
    </button>
  );
}

Export it into index.ts

// src/components/index.ts

export * from './Button';

You can create a simple utilities to makes it easier for users to apply our Tailwind configuration content on their project.

We need to create myTailwindContent.ts utils for example.

// src/utils/my-tailwind-content.ts

export function myTailwindContent() {
  return './node_modules/my-button-component/dist/**/*.js';
}

Dont forget to replace my-button-component with your package name. Export it into index.ts

// src/utils/index.ts

export * from './my-tailwind-content';

Our project structure should be look like this:

project structure

3. tsup configuration

While the instalation is done, its time to configure our tsup bundle.

Install the tsup package:

yarn add -D tsup

Create a new file named tsup.config.json

// tsup.config.json

{
  "splitting": false,
  "sourcemap": true,
  "clean": true,
  "minify": true,
  "target": "es2020",
  "dts": true,
  "format": [
    "cjs",
    "esm"
  ],
  "entry": [
    "src/components/index.ts",
    "src/utils/index.ts"
  ]
}{
  "splitting": false,
  "sourcemap": true,
  "clean": true,
  "minify": true,
  "target": "es2020",
  "dts": true,
  "format": [
    "cjs",
    "esm"
  ],
  "entry": [
    "src/components/index.ts",
    "src/utils/index.ts"
  ]
}

Add build config on package.json

// package.json

{
  ...,
  "main": "./dist/index.js",
  "module": "./dist/index.cjs",
  "types": "./dist/index.d.ts",
  "files": [
    "dist",
    "package.json"
  ],
  "exports": {
    ".": {
      "require": "./dist/components/index.js",
      "import": "./dist/components/index.cjs",
      "types": "./dist/components/index.d.ts"
    },
    "./utils": {
      "require": "./dist/utils/index.js",
      "import": "./dist/utils/index.cjs",
      "types": "./dist/utils/index.d.ts"
    }
  },
  "scripts": {
    "build": "tsup"
  },
  ...
}

We also need to update our package.json to identify our package on NPM page with the following code:

// package.json

{
  ...
  "name": "my-button-component",
  "description": "My Button Component",
  "author": "Me",
  "license": "ISC",
  "type": "module",
  ...
}

Adjust to your needs. Remove private section to allow NPM publish the package. Build the project:

yarn build

If the build is successfully, you will see dist folder with following content:

dist content

Make sure the dist content is seems as our package.json exports points to.

4. Publish it on NPM

Create an NPM account if you don`t have one

Open console to login to your NPM acccount by typing:

npm login

Once login is successfully, we can publish our package with the following command:

npm publish

If everything is ok, You can go to NPM Package to make sure your component is appeared.

5. Try our component

How to use it on our Tailwind project?

Assume you are already have Tailwind project.

Install the package first:

yarn add my-button-component

Update tailwind.config.js create it if you dont`t have one.

// tailwind.config.js

import { myTailwindContent } from 'my-button-component/utils';

export default {
  darkMode: 'class',
  content: [
    './index.html',
    './src/**/*.{js,jsx,ts,tsx}',
    myTailwindContent()
  ],
}

Call our component:

import { Button } from 'my-button-component';

function Page() {
  return <Button>Click Me!</Button>
}

Run your project as normally, and valla! You just create own React Component successfully.

Github Repo:
https://github.com/muhammad-f-huda/my-button-component