Tailwind Component Kit

A modern, customizable component library built with Tailwind CSS v4, inspired by daisyUI. Works seamlessly with both React applications and WordPress sites.

✨ Features

• 🎨 Tailwind CSS v4 - Built on the latest Tailwind with modern CSS features
• ⚛️ React Components - Full TypeScript support with React components
• 🌐 WordPress Compatible - Use CSS classes directly in WordPress
• 🎯 Zero Configuration - No config files needed, automatic content detection
• 📦 Lightweight - Minimal dependencies, tree-shakeable
• 🔧 TypeScript - Full type safety and IntelliSense support
• 🚀 Fast - 3.5x faster builds with Tailwind v4
• 🎨 CSS-First Config - Customize with CSS variables using @theme

📦 Installation

npm install tailwind-component-kit

🚀 Quick Start

For React Applications (Tailwind v4)

1. Install dependencies:

   npm install tailwind-component-kit tailwindcss @tailwindcss/cli

2. Create your CSS file (src/input.css):

   @import "tailwindcss";

3. Import component kit styles (in your main.tsx or index.js):

   import './input.css';
   import 'tailwind-component-kit/dist/styles.css';

4. Add build script to package.json:

   {
     "scripts": {
       "build:css": "npx @tailwindcss/cli -i ./src/input.css -o ./src/output.css --minify"
     }
   }

5. Use components:

   import { Button, Card, CardBody, Panel } from 'tailwind-component-kit';
      
   function App() {
     return (
       <Card>
         <CardBody>
           <Button variant="primary">Hello World</Button>
         </CardBody>
       </Card>
     );
   }

For WordPress Sites

1. Install in your theme:

   cd wp-content/themes/your-theme
   npm install tailwind-component-kit tailwindcss @tailwindcss/cli

2. Create CSS file (src/style.css):

   @import "tailwindcss";

3. Build CSS:

   npx @tailwindcss/cli -i ./src/style.css -o ./style.css --minify

4. Enqueue in functions.php:

   function enqueue_component_kit() {
       wp_enqueue_style('theme-styles', get_stylesheet_uri());
   }
   add_action('wp_enqueue_scripts', 'enqueue_component_kit');

5. Use in templates:

   <div class="card">
     <div class="card-body">
       <h2 class="card-title">Hello WordPress</h2>
       <button class="btn btn-primary">Click me</button>
     </div>
   </div>

📚 Available Components

Button

Variants: primary, secondary, accent, outline, ghost
Sizes: sm, md (default), lg

React:

import { Button } from 'tailwind-component-kit';

<Button variant="primary" size="lg">Click me</Button>
<Button variant="outline">Outline Button</Button>
<Button variant="ghost" size="sm" disabled>Disabled</Button>

HTML/WordPress:

<button class="btn btn-primary btn-lg">Click me</button>
<button class="btn btn-outline">Outline Button</button>
<button class="btn btn-ghost btn-sm" disabled>Disabled</button>

Card

React:

import { Card, CardBody, CardTitle } from 'tailwind-component-kit';

<Card>
  <CardBody>
    <CardTitle>Card Title</CardTitle>
    <p>Card content goes here</p>
  </CardBody>
</Card>

HTML/WordPress:

<div class="card">
  <div class="card-body">
    <h2 class="card-title">Card Title</h2>
    <p>Card content goes here</p>
  </div>
</div>

Panel

Variants: default, bordered, elevated

React:

import { Panel, PanelHeader, PanelBody, PanelFooter } from 'tailwind-component-kit';

<Panel variant="elevated">
  <PanelHeader>
    <h3>Panel Title</h3>
  </PanelHeader>
  <PanelBody>
    <p>Panel content with custom avocado colors</p>
  </PanelBody>
  <PanelFooter>
    <button className="btn btn-primary">Action</button>
  </PanelFooter>
</Panel>

HTML/WordPress:

<div class="panel panel-elevated">
  <div class="panel-header">
    <h3>Panel Title</h3>
  </div>
  <div class="panel-body">
    <p>Panel content with custom avocado colors</p>
  </div>
  <div class="panel-footer">
    <button class="btn btn-primary">Action</button>
  </div>
</div>

Input

React:

import { Input } from 'tailwind-component-kit';

<Input type="text" placeholder="Enter text" />
<Input type="email" error={true} placeholder="Error state" />
<Input type="password" disabled placeholder="Disabled" />

HTML/WordPress:

<input type="text" class="input" placeholder="Enter text" />
<input type="email" class="input input-error" placeholder="Error state" />
<input type="password" class="input" disabled placeholder="Disabled" />

Badge

Variants: primary, secondary, accent

React:

import { Badge } from 'tailwind-component-kit';

<Badge variant="primary">New</Badge>
<Badge variant="secondary">Featured</Badge>
<Badge variant="accent">Sale</Badge>

HTML/WordPress:

<span class="badge badge-primary">New</span>
<span class="badge badge-secondary">Featured</span>
<span class="badge badge-accent">Sale</span>

Modal

React:

import { Modal, Button } from 'tailwind-component-kit';
import { useState } from 'react';

function MyComponent() {
  const [isOpen, setIsOpen] = useState(false);

  return (
    <>
      <Button onClick={() => setIsOpen(true)}>Open Modal</Button>
      <Modal isOpen={isOpen} onClose={() => setIsOpen(false)}>
        <h2 className="text-2xl font-bold mb-4">Modal Title</h2>
        <p>Modal content goes here</p>
        <Button onClick={() => setIsOpen(false)}>Close</Button>
      </Modal>
    </>
  );
}

HTML/WordPress:

<button class="btn btn-primary" onclick="openModal()">Open Modal</button>

<div id="myModal" class="modal" style="display: none;">
  <div class="modal-backdrop" onclick="closeModal()"></div>
  <div class="modal-box">
    <h2 class="text-2xl font-bold mb-4">Modal Title</h2>
    <p>Modal content goes here</p>
    <button class="btn btn-primary" onclick="closeModal()">Close</button>
  </div>
</div>

<script>
function openModal() {
  document.getElementById('myModal').style.display = 'flex';
}
function closeModal() {
  document.getElementById('myModal').style.display = 'none';
}
</script>

🎨 Customization

Using Tailwind v4 @theme Directive

Customize the library by adding your own theme variables in your CSS:

@import "tailwindcss";

@theme {
  /* Custom colors */
  --color-primary-500: oklch(0.5 0.2 250);
  --color-primary-600: oklch(0.4 0.2 250);
  
  /* Custom fonts */
  --font-display: "Inter", sans-serif;
  
  /* Custom breakpoints */
  --breakpoint-3xl: 1920px;
  
  /* Custom spacing */
  --spacing-18: 4.5rem;
}

Override Component Styles

Since the library uses @apply, you can easily override styles:

.btn-primary {
  @apply bg-purple-500 text-white;
}

.btn-primary:hover:not(:disabled) {
  @apply bg-purple-600;
}

.card {
  @apply shadow-xl border-2 border-gray-200;
}

Custom Color Example

The Panel component uses custom avocado colors defined with @theme:

@theme {
  --color-avocado-100: oklch(0.99 0 0);
  --color-avocado-200: oklch(0.98 0.04 113.22);
  --color-avocado-300: oklch(0.94 0.11 115.03);
  --color-avocado-400: oklch(0.92 0.19 114.08);
  --color-avocado-500: oklch(0.84 0.18 117.33);
  --color-avocado-600: oklch(0.53 0.12 118.34);
}

These colors are then available as utilities: bg-avocado-100, text-avocado-500, border-avocado-300, etc.

🛠️ Development

Setup

# Install dependencies
npm install

# Build the library
npm run build

# Watch mode for development
npm run dev

Build Commands

npm run build        # Build everything (CSS + JS)
npm run build:css    # Build CSS only
npm run build:js     # Build JavaScript/TypeScript only

Adding New Components

1. Create component file in src/components/YourComponent.tsx:

   import React from 'react';
   import { classNames } from '../utils/classNames';
   import { BaseComponentProps } from '../types';
   
   export interface YourComponentProps extends BaseComponentProps {
     variant?: 'default' | 'custom';
     children: React.ReactNode;
   }
   
   export const YourComponent: React.FC<YourComponentProps> = ({
     variant = 'default',
     className,
     children,
   }) => {
     return (
       <div className={classNames('your-component', `your-component-${variant}`, className)}>
         {children}
       </div>
     );
   };

2. Add styles to src/styles/components.css:

   .your-component {
     @apply p-4 rounded-lg;
   }
   
   .your-component-default {
     @apply bg-gray-100;
   }
   
   .your-component-custom {
     @apply bg-blue-100;
   }

3. Export component from src/components/index.ts:

   export { YourComponent } from './YourComponent';
   export type { YourComponentProps } from './YourComponent';

4. Build and test:

   npm run build

📝 Publishing

To npm

1. Update version in package.json
2. Build the library:

   npm run build

3. Publish:

   npm publish

Local Testing

# In this library
npm run build
npm link

# In your test project
npm link tailwind-component-kit

📋 Changelog

v1.0.2 - Latest

• ✨ Added Panel component with custom avocado colors
• 🎨 Demonstrates Tailwind v4 @theme customization

v1.0.1

• 🚀 Upgraded to Tailwind CSS v4.0
• ⚡ Added @tailwindcss/cli for build support
• 📝 Updated build scripts for v4 compatibility
• 🎨 Migrated to CSS-first configuration with @theme
• ✅ @apply still fully supported in v4

v1.0.0

• 🎉 Initial release
• ✨ Button, Card, Input, Badge, Modal components
• 🎨 Using @apply directive for all styles
• ⚛️ Full React + TypeScript support
• 🌐 WordPress compatible

🤝 Contributing

Contributions are welcome! Please follow these guidelines:

1. Fork the repository
2. Create a feature branch: git checkout -b feature/new-component
3. Follow the component structure (see Development section)
4. Add styles using @apply in src/styles/components.css
5. Export from src/components/index.ts
6. Build and test: npm run build
7. Submit a pull request

Component Guidelines

• ✅ Extend BaseComponentProps for all component props
• ✅ Provide default values for optional props
• ✅ Support custom className prop
• ✅ Use semantic HTML elements
• ✅ Include TypeScript types
• ✅ Add both React and HTML usage examples
• ✅ Follow accessibility best practices

📄 License

MIT

🙏 Acknowledgments

• Inspired by daisyUI
• Built with Tailwind CSS v4
• Powered by modern CSS features and @apply directive