My Tailwind UI

A minimal React component library with Tailwind CSS styling that can be used in any React application.

Installation

npm install my-tailwind-ui

Usage

Import the CSS file and components in your application:

import "my-tailwind-ui/dist/styles.css";
import { Button } from "my-tailwind-ui";

function App() {
  return (
    <div>
      <Button variant="primary" size="md">
        Click me!
      </Button>
      <Button variant="secondary" size="lg">
        Secondary Button
      </Button>
      <Button variant="outline" size="sm">
        Outline Button
      </Button>
    </div>
  );
}

Components

Button

A customizable button component with multiple variants and sizes.

Props

• variant: 'primary' | 'secondary' | 'outline' (default: 'primary')
• size: 'sm' | 'md' | 'lg' (default: 'md')
• All standard HTML button attributes are supported

Examples

<Button variant="primary">Primary Button</Button>
<Button variant="secondary" size="lg">Large Secondary</Button>
<Button variant="outline" size="sm" disabled>Disabled Outline</Button>

Development

This library uses:

• React 18 for components
• TypeScript for type safety
• Tailwind CSS for styling
• Vite for bundling

Building

The library compiles Tailwind CSS into a standalone CSS file that includes all the necessary styles, so consuming applications don't need to have Tailwind CSS configured.

npm run build

This generates:

• dist/index.js - UMD bundle
• dist/index.esm.js - ES module bundle
• dist/index.d.ts - TypeScript definitions
• dist/styles.css - Compiled Tailwind CSS

License

MIT