How to Publish a Package to NPM

I made a plugin for tailwind , let’s publish it to the Node Package Manager (NPM) registry now.

First, you need to create an account on NPM, if you don’t have one.
Make sure you have node and npm installed in your system. If not, make sure you install the latest version .

# Check if node and npm is installed
node -v
npm -v

Publish to Git

For public packages, you should publish the package to GitHub or other git clients. This makes sure your package users can browse through all the code files without installing the package.

git init
git add .
git commit -m "Initial Commit"
git remote add origin https://github.com/praveenjuge/tailwindcss-brand-colors
git push -u origin master

Prepare Package

Initialize package.json file by doing npm init --yes.

Open package.json file and update the following:
Make sure you have the correct package name "name": "tailwindcss-brand-colors",
Follow semver versioning in "version": "0.1.0",
Select main entry point to your package in "main": "index.js",
Select License in "license": "MIT",
Select files to publish

"files": [
  "src",
  "dist",
  "index.js"
],

This is enough to publish your package to NPM.

Test Locally

You can test your package locally before publishing it to NPM. Create a new folder, initialize npm and install your package to test it.

npm install -S ./path/to/your/package

This will install your package from your local folder and you can test if everything works correctly before publishing. You can also do this before releasing new versions to test your packages.

`npm publish`

If everything is done you can publish the first version by doing npm publish. If there are any errors, the Command Line Interface (cli) gives you all the information you need to fix it.

npm publish

You can now see your package in your account on npmjs account. Check out the package we published now here: https://www.npmjs.com/package/tailwindcss-brand-colors

release-it

release-it is a cli tool to automate versioning and package publishing-related tasks.

It can,

Bump version (in e.g. package.json)
Git commit, tag, push
Create release at GitHub or GitLab
Generate changelog
Publish to npm

You can use it for future release for automating your releases.

Now, start building some new package that you always wanted to see and remember, “Idle hands build nothing.”