tw-harmony

tw-Harmony

A Tailwind CSS port of the Harmony color palette.

Installation

npm add -D tw-harmony

Usage

// tailwind.config.ts
import type { Config } from 'tailwindcss'
import { colors } from 'tw-harmony'

export default {
  theme: {
    colors: colors()
  }
} satisfies Config

Notes

Compatibility

For this to work properly on not-so-modern browsers, you'll need to add @csstools/postcss-oklab-function plugin to your PostCSS config:

npm add -D @csstools/postcss-oklab-function

// postcss.config.js
import tailwindcss from 'tailwindcss'
import oklab from '@csstools/postcss-oklab-function'
import autoprefixer from 'autoprefixer'

export default {
  plugins: [tailwindcss(), oklab({ preserve: true }), autoprefixer()]
}

Non-PostCSS setups like Lightning CSS, the oxide engine, Tailwind CLI, Play CDN, Tailwind Play, etc. don't properly generate fallbacks. So, you'll need to call the color method with the legacy option set to true:

export default {
  theme: {
    colors: colors({ legacy: true })
  }
}

IntelliSense

You'll get IntelliSense and color previews in VS Code without any additional setup. Just make sure you have the Tailwind CSS IntelliSense extension installed. No setup is required for JetBrains IDEs either.

Note that, there might be slight differences between the generated previews and the actual colors as the colors shown in previews are transformed to sRGB.

License

MIT

Used Harmony color palette is licensed under CC BY 4.0 by Evil Martians.