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

Sam Potts

@sampotts.dev

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 ')]), ); ```

12/11/24, 12:56 am0 reposts0 likes

Sam Potts

@sampotts.dev

12 Nov 2024

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

Sam Potts

@sampotts.dev

12 Nov 2024

Tailwind Play is here: play.tailwindcss.com/0xMWd5Pvhs

play.tailwindcss.comTailwind PlayAn advanced online playground for Tailwind CSS that lets you use all of Tailwind's build-time features directly in the browser.