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

Use future proof and full gamut OKLCH colors in Tailwind
https://github.com/jokull/tailwind-oklch

Last synced: 13 days ago
JSON representation

Use future proof and full gamut OKLCH colors in Tailwind

• Host: GitHub
• URL: https://github.com/jokull/tailwind-oklch
• Owner: jokull
• Created: 2022-06-28T12:10:03.000Z (over 2 years ago)
• Default Branch: main
• Last Pushed: 2022-06-28T12:13:56.000Z (over 2 years ago)
• Last Synced: 2024-12-17T03:58:33.410Z (15 days ago)
• Language: TypeScript
• Size: 63.5 KB
• Stars: 5
• Watchers: 2
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# Tailwind OKLCH Example

Example of using a CSS accent variables for chroma and hue to generate Tailwind color pallettes in

OKLCH with modern color palettes (like P3, which most modern screens support).

If you project has a vivid brand color you need something like this. Support in Chrome, Edge and

Firefox is coming soon - but Safari already supports full gamut colors.

**Resources**

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

- https://oklch.evilmartians.io/

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

**Setup**

```bash

npm install

npm run start

```

**Safari (P3 support)**



**Firefox (fallback RGB)**



## Caveats

Tailwind let's you append opacity like `text-accent-600/50` to get 50% opacity. Currently the color

syntaxes supported are `rgba` and `hsl` but not `oklch`. Because of this we can't yet take advantage

of the opacity color modifier syntax for our palette (see

https://tailwindcss.com/docs/customizing-colors#using-css-variables).

## License

[MIT](https://choosealicense.com/licenses/mit/)