How to Make Tailwind Css OKLCH Colors Compatible with All Browsers in a Next.js App

Introduction

From tailwind v4.0 there are many major changes introduced in it , one of which is using oklch as color format . Although these are very good colors with compatible in all major modern browsers but some are adapting to it and older browsers doesn't support it yet . when we deploy our webapp we have to make it compatible for majority of our users . In tailwind we don't have a fallback color mode yet which can be applied in browsers which don't support oklch color model . To overcome this issue we can use @csstools/postcss-oklab-function . 

What it does ?

With this library , we can use it as PostCss plugin and when shifting our app in production it will add fallback colors for oklch , which will be applied to browsers who doesn't support oklch model yet . Like this :-

How to use it ?

It has a straight forward use . In this case I will show how to use it with NextJs webapp . 

Step 1 : Installation 

Install the lib with this command in your nextjs app :-  npm i @csstools/postcss-oklab-function 

Step 2 : Initialisation 

After installation , add this as a plugin in your postcss config file (postcss.config.mjs) like this :

Note : don't forget to add {'preserve':true} , else it will replace all oklch with rgb and color models .

Step 3 : Testing 

That's it now we can test it in production by running these commands ( npm run build and then npm start ) . You can inspect the element and you should see the fallback colors in it .

Finishing line

If you found it useful do share it with others also . Let me know if you face any problem in comment section . Thank you for your support !