open-index/open-npm huggingface dataset:
npm package: @learntube/ui-library
Description: Welcome to your custom component library!
Latest version: 0.1.14

# 🧱 Your Component Library

Welcome to your custom component library!

- Built with **React + TypeScript**
- Styled with **Tailwind CSS**
- Documented via **Storybook + MDX**

## ✨ Features

- Reusable UI components  
- Fully customizable  
- Developer-friendly APIs

## 📘 Documentation

For full documentation and interactive examples, visit our Storybook:

👉 [https://ui-library-10ccb5.gitlab.io/](https://ui-library-10ccb5.gitlab.io/)


## 🚀 Getting Started

Install the component library:

```bash
npm install @learntube/ui-library
```

## ⚙️ Tailwind CSS Setup

To ensure Tailwind styles from the component library apply correctly, follow these steps:

### 1. Install Tailwind CSS (if not already installed)

```bash
npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init
```

### 2. Add the library to the content array

Update your `tailwind.config.js`:

```js
// tailwind.config.js

const learntubePreset = require('@learntube/ui-library/tailwind.preset');

module.exports = {
  presets: [learntubePreset],
  content: [
    "./src/**/*.{js,ts,jsx,tsx}",
    "./node_modules/@learntube/ui-library/dist/**/*.{js,ts,jsx,tsx}"
  ],
  theme: {
    extend: {},
  },
  plugins: [],
};
```

### 3. Add Tailwind directives to your CSS

Make sure your global CSS file (e.g., `index.css`) includes the following:

```css
@tailwind base;
@tailwind components;
@tailwind utilities;
```

### 4. Import the CSS in your app entry file

In your `main.tsx` or `index.js`, import the global CSS:

```tsx
// main.tsx
import './index.css';
```