Using OKLCH colors in Tailwind

The future of CSS colors is OKLCH. It is a human friendly and powerful syntax to define colors. Currently it is only supported in Safari but modern browser support is coming soon.

To prepare for the future and get vivid CSS colors we can actually specify a whole color palette with a few lines of code and one PostCSS plugin.

.postcssrc

Copy{
	"plugins": {
		"tailwindcss": {},
		"@csstools/postcss-oklab-function": {}
	}
}

Resources

• https://slides.com/ai/oklch-css

• https://oklch.evilmartians.io/

• https://github.com/csstools/postcss-plugins

See the repository for a full example.

https://github.com/jokull/tailwind-oklch