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.