Using OKLCH colors in Tailwind CSS

I’ve previously written about how to use P3 colors together in Tailwind CSS to progressively enhance the color spectrum of your website. However today we can use OKLCH in every major browser for way better support. My friend Jay and I covered it extensively in our podcast Code Rush. OKLCH is a color space that also includes P3 colors. This allows you to use a broader range of colors than regular RGB does. To display those colors users need a wide-gamut monitor. Most modern devices support this color space so its worth it to hook into this.

What is OKLCH again?

OKLCH is a new way to encode colors (like hex, RGBA, or HSL):

OKLCH has native browser support.
It can encode more colors for modern screens (P3, Rec. 2020, and beyond).
Unlike HSL, OKLCH always has predictable contrast after color transformation.
In contrast with LCH and Lab, no hue shift on chroma changes.
Provides great accessibility on palette generation.

Source: https://oklch.com

The great thing about OKLCH is that when you use a color that is not available on a certain device, it automatically falls back to a color that does. This makes it easy to progressively enhance the experience for users with wide-gamut monitors.

Setting fallbacks

To make sure your website works on older versions of browsers that don’t yet support OKLCH you have to set the CSS color property you’re working with multiple times.

1.bg-primary {
2  background-color: rgba(0,176,86);
3  background-color: color(display-p3 .07462 .70961 .29084);
4  background-color: oklch(66.28% .24 151.4);
5}

OKLCH falling back to display-p3 and then RGBA.

In this example the browser will use OKLCH when available. Otherwise it’ll fall back to display-p3 (Safari only) and RGBA.

Fallbacks in Tailwind

In Tailwind it is not possible to define fallback colors. So to make use of OKLCH you’d have to use multiple color definitions and support variants to only use a certain color when the browser supports them. This would lead to classes like this:

bg-primary supports-[color:oklch(0_0_0)]:bg-primary-oklch

As you can see this is clunky and hard to read. I’ve reached out to the Tailwind team a couple of times over the past few years to ask them if setting fallback colors is something they’re considering adding, but I didn’t get a response. This leads me to believe it’s something they’re not currently interested in. So the search is on to find a different solution.

PostCSS to the rescue

It turns out however there’s a lovely PostCSS plugin that does exactly what we need. Install it by running npm i @csstools/postcss-oklab-function --save-dev. This plugin automatically adds fallback colors to the final compiled CSS. This even saves us from manually defining fallback colors.

Define your colors in your Tailwind config file like so:

1module.exports = {
2  theme: {
3    colors: {
4      primary: 'oklch(66.28% 0.24 151.4 / <alpha-value>)',
5      secondary: 'oklch(66.35% 0.299 7.04 / <alpha-value>)',
6      tertiary: 'oklch(65.49% 0.1937998046114747 239.2963644488785 / <alpha-value>)',
7    }
8  }
9}

Define your colors in Tailwind using OKLCH with the opacity modifier.

The <alpha-value> makes sure Tailwind adds the opacity custom property to all your classes so you can use the opacity shorthand modifier. An example of this is bg-primary/80 to set a transparent background color.

Update your postcss.config.js file so it includes the new plugin:

1module.exports = {
2     plugins: {
3         tailwindcss: {},
4         '@csstools/postcss-oklab-function': { 'preserve': true },
5         autoprefixer: {},
6     },
7 };

Include the plugin in your PostCSS pipeline.

By adding preserve: true we make sure the plugin keeps your OKLCH definitions. It removes them by default. We want to keep them so we can use a wider color spectrum on modern devices.

And that’s all. An automatic solution to using OKLCH with fallbacks in Tailwind CSS. I just implemented it on this website as well. Before it used display-p3 colors which is Safari only. Now all modern browsers render the primary, secondary and tertiary colors of this website in a wider spectrum.