Tunio Colors

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

1 2

Installation

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. 4

1. Import the colors in your main CSS file:

/* 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:

@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:

<!-- 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:

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:

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