Replacing the tailwind color palette as documented clobbers non-shades such as "transparent"

[firxworx]

Awesome work! I stumbled upon your blog post earlier today while reading into oklch + color-mix and I had to try it out!

Issue:

The README states that harmony is a "drop-in replacement for the Tailwind color palette" however it appears to be missing a few key entries like "transparent" and "current" so using it as such will clobber these utilities.

Fix/Workaround:

Add missing entries back in. In a tailwind config or preset:

// heads up if you `import *` your console will fill with deprecation warnings related to past name changes
import { inherit, current, transparent, black, white } from 'tailwindcss/colors'

// @ts-expect-error -- types not accessible w/ app's tsconfig using module esnext
import harmonyPalette from '@evilmartians/harmony/tailwind'

const config = {
  // ...
  theme: {
    colors: Object.assign(
      {
        inherit,
        current,
        transparent,
        black,
        white,
      },
      harmonyPalette,
    ),
  // ...
} satisfies Config

I'm not sure if you would prefer exporting tailwind-specific object that includes these extras or simply updating the README with the above.

Example Use-Case Impacted

nav menu with transparent background in desktop (to show parent header's backdrop blur) and a solid background when conditionally styled as a mobile menu and serving as body of a disclosure/drop-down: bg-P-nav-menu sm:bg-transparent

Thanks again!

[swombat]

Alternative option which works also when you have a lot of stuff defined elsewhere (e.g., as I have, because I'm using BullletTrain which has a lot of theme stuff setup).

Install lodash.merge:

npm install lodash.merge

Then, in the tailwind.config.js:

const merge = require('lodash.merge');
import harmonyPalette from "@evilmartians/harmony/tailwind";
let merged = merge(themeConfig.theme.extend.colors, harmonyPalette);
themeConfig.theme.extend.colors = merged;

This successfully overlays Harmony onto whatever mess I already have, instead of clobbering everything as the suggested install steps do.