Post

A little snippet to add some vibrancy to the Tailwind gradient helpers using oklch colors. This avoids the muddy grey you often get in some gradients. 1st is before, 2nd is using oklch. Miles nicer. You can read more about it in @joshwcomeau.com's article here: www.joshwcomeau.com/css/make-bea...

First import the default theme to amend the gradients. ``` import defaultTheme from 'tailwindcss/defaultTheme'; const vibrantGradients = Object.fromEntries( Object.entries(defaultTheme.backgroundImage).map(([k, g]) => [k, g.replace('gradient(', 'gradient(in oklch ')]), ); ```

...then use that in your config: ``` const config: Config = { theme: { extend: { backgroundImage: vibrantGradients, } } } export default config; ``` Ideally, Tailwind would use oklch color space throughout but that's coming later as far as I can see.