https://github.com/zounar/tailwind-4-rgb-palette
Tailwind 4 color palette in rgb() color notation
https://github.com/zounar/tailwind-4-rgb-palette
browser-compatibility oklch-color tailwind-css
Last synced: about 1 month ago
JSON representation
Tailwind 4 color palette in rgb() color notation
- Host: GitHub
- URL: https://github.com/zounar/tailwind-4-rgb-palette
- Owner: zounar
- License: mit
- Created: 2025-04-05T10:28:02.000Z (about 1 month ago)
- Default Branch: main
- Last Pushed: 2025-04-05T10:46:46.000Z (about 1 month ago)
- Last Synced: 2025-04-11T07:07:05.735Z (about 1 month ago)
- Topics: browser-compatibility, oklch-color, tailwind-css
- Language: CSS
- Homepage:
- Size: 3.91 KB
- Stars: 3
- Watchers: 3
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# Tailwind 4 color palette in rgb()
## Why
Tailwind 4 included [a color palette](https://tailwindcss.com/docs/colors#default-color-palette-reference) that uses
`oklch()` CSS color notation. This format, while supported by all major browsers now,
is [not supported in browsers released in 2023 and sooner](https://caniuse.com/?search=oklch).
By including [palette-rgb.css](./palette-rgb.css) into your project, Tailwind will
use the `rgb()` notation instead increasing the browser compatibility of your website.
## Step 1
- Copy [palette-rgb.css](./palette-rgb.css) into your project
- Add `@import './palette-rgb.css';` after `@import 'tailwindcss';` in your CSS file
## Step 2 (optional)
To further increase browser compatibility of Tailwind 4, you may
opt out from using CSS `@layer` rule, which is
also [not widely supported by old browsers](https://caniuse.com/?search=%40layer).
To do so, you need to import each Tailwind layer
separately ([reference](https://github.com/tailwindlabs/tailwindcss/discussions/13188#discussioncomment-8737721)).
Combined with the RGB palette, the whole import stack should look like so:
```css
@import 'tailwindcss/theme';
@import './palette-rgb.css';
@import 'tailwindcss/preflight';
@import 'tailwindcss/utilities';
```