I Tried Building a Component Library Using Tailwind CSS!

Hey guys, it's your boy Lucky Jain and today, I thought, why not build my own component library using Tailwind CSS? Every time I start a new project, I have to search for components, copy-paste them, then customize them... It's such a time waste! So I decided to build my own reusable component library.

Let's dive into how I built it, the challenges I faced, and some cool reusable components I created along the way!

---

Why Tailwind CSS?

Honestly, Tailwind is too good when it comes to styling. It's a utility-first CSS framework where you get pre-defined classes that can be directly added to HTML elements. No more unnecessary CSS files and confusion!

Some reasons why I chose Tailwind:

• Reusability and flexibility
• No need to write custom CSS again and again
• Easy to maintain and scale
• Looks super clean with dark mode support

Now, without wasting any time, let's get started with the setup.

---

Setting Up the Component Library

First, I created a simple React + Vite project:

npm create vite@latest my-ui-library --template react
cd my-ui-library
npm install

Installing Tailwind CSS

npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init -p

Then, I configured Tailwind in tailwind.config.js:

export default {
  content: ["./index.html", "./src/**/*.{js,ts,jsx,tsx}"],
  theme: {
    extend: {},
  },
  plugins: [],
};

And imported Tailwind in src/index.css:

@tailwind base;
@tailwind components;
@tailwind utilities;

---

Building the Components

Now comes the real fun - creating reusable UI components!

1. Button Component

First, let's build a simple but powerful button component:

const Button = ({ text, onClick, variant = "primary" }) => {
  const baseStyles = "px-4 py-2 font-semibold rounded-md focus:outline-none";
  const variants = {
    primary: "bg-blue-500 text-white hover:bg-blue-600",
    secondary: "bg-gray-500 text-white hover:bg-gray-600",
    danger: "bg-red-500 text-white hover:bg-red-600",
  };

  return (
    <button className={`${baseStyles} ${variants[variant]}`} onClick={onClick}>
      {text}
    </button>
  );
};

export default Button;

Usage:

<Button text="Click Me" onClick={() => alert("Button Clicked!")} variant="primary" />

---

2. Card Component

A simple card to wrap content and make it look good:

const Card = ({ title, description }) => {
  return (
    <div className="bg-white shadow-md rounded-lg p-4 border border-gray-200">
      <h2 className="text-lg font-bold">{title}</h2>
      <p className="text-gray-600">{description}</p>
    </div>
  );
};

export default Card;

Usage:

<Card title="Tailwind is Awesome!" description="This is a reusable card component." />

---

Making It a Package

If you want to publish this as an npm package, just set the main entry in package.json and configure the build command. Then, you can publish it using npm publish and share your library with others!

{
  "name": "my-tailwind-ui",
  "version": "1.0.0",
  "main": "dist/index.js",
  "scripts": {
    "build": "tsc"
  }
}

To publish:

npm login
npm publish

Then anyone can install it using:

npm install my-tailwind-ui

---

Conclusion

Building a component library with Tailwind CSS was super fun! Initially, I thought it would be difficult, but once you understand the structure, it's actually quite easy. Plus, now I have my own reusable UI kit that I can use in every new project.

If you're thinking about building your own component library, just go for it! Write code, experiment, and build your own Tailwind UI kit!

If you liked this post, share your thoughts in the comments!

---