tunio-colors/README.md

Softer and pleasant colors for Tailwind CSS v4.0+

# Tunio Colors

Softer and pleasant colors for Tailwind CSS v4.0+ that replace the default color palette while maintaining the same naming convention.

<mcreference link="https://tailwindcss.com/blog/tailwindcss-v4" index="1">1</mcreference> <mcreference link="https://medium.com/@dvasquez.422/custom-colours-in-tailwind-css-v4-acc3322cd2da" index="2">2</mcreference>

## Installation

```bash
npm install tunio-colors
```

## Usage

### With Tailwind CSS v4.0+

Tailwind CSS v4 introduced a new configuration system that uses CSS instead of JavaScript files. <mcreference link="https://tailwindcss.com/docs/adding-custom-styles" index="4">4</mcreference>

1. **Import the colors in your main CSS file:**

```css
/* Import Tunio Colors theme */
@import 'tunio-colors/colors.css';

/* Import Tailwind CSS */
@import "tailwindcss";
```

That's it! No configuration files needed. The colors will automatically replace Tailwind's default colors.

### Alternative: Manual Theme Configuration

If you prefer to configure colors manually or need to customize specific shades:

```css
@import "tailwindcss";

@theme {
  /* Import specific colors from Tunio Colors */
  --color-red-500: 356 65% 55%;
  --color-blue-500: 217 91% 60%;
  --color-green-500: 146 63% 44%;
  /* Add more colors as needed */
}
```

### Available Colors

The package includes the following color palettes, each with shades from 50 to 950:

- `red`
- `orange` 
- `amber`
- `yellow`
- `lime`
- `green`
- `teal`
- `cyan`
- `sky`
- `blue`
- `indigo`
- `violet`
- `purple`
- `fuchsia`
- `pink`
- `rose`

### Usage Examples

Once installed, use the same color classes as you would with default Tailwind colors:

```html
<!-- Background colors -->
<div class="bg-red-500">Softer red background</div>
<div class="bg-blue-300">Pleasant light blue background</div>

<!-- Text colors -->
<p class="text-green-600">Softer green text</p>
<p class="text-purple-800">Pleasant dark purple text</p>

<!-- Borders and other utilities -->
<div class="border-2 border-cyan-400 rounded-lg">Cyan border</div>

<!-- With opacity modifiers (Tailwind v4 feature) -->
<div class="bg-red-500/50">Semi-transparent red background</div>
<p class="text-blue-600/75">Semi-transparent blue text</p>
```

### TypeScript Support

The package includes full TypeScript support:

```typescript
import { tunioColors, getTunioColor, getTunioColorNames } from 'tunio-colors';

// Get a specific color
const redColor = getTunioColor('red', '500'); // 'hsl(356 65% 55%)'

// Get all available colors
const colorNames = getTunioColorNames(); // ['red', 'orange', 'amber', ...]

// Use in your components
const MyComponent = () => {
  return <div style={{ backgroundColor: tunioColors.blue[500] }}>Hello</div>;
};
```

## Compatibility

- **Tailwind CSS v4.0+**: ✅ Full support with modern CSS features
- **Tailwind CSS v3.x**: ❌ Not compatible (use version 1.x for v3 support)

## Features

- ✨ **Softer, more pleasant color palette** - Carefully crafted colors that are easier on the eyes
- 🎨 **Full opacity modifier support** - Works seamlessly with Tailwind's opacity utilities
- 🚀 **Optimized for Tailwind CSS v4.0** - Uses the new @theme directive for better performance
- 📦 **TypeScript support included** - Full type definitions and helper functions
- 🎯 **Zero configuration** - Just import and use, no config files needed
- 🔄 **Drop-in replacement** - Same naming convention as default Tailwind colors

## Migration from Tailwind v3 to v4

If you're upgrading from Tailwind CSS v3 to v4, use the official upgrade tool:

```bash
npx @tailwindcss/upgrade
```

Then update your Tunio Colors usage from the old config-based approach to the new CSS import method.

Then update your package.json to use the latest version of tunio-colors.

## License

MIT