Colors do not render on browsers that support P3 colors

[louisgv]

I tried the latest RC on both (3.x on radix-color and 1.x on windy), and although the color was injected into the CSS, it does not render at all in the UI for either dark mode or light mode.

I'm not sure what's going on. I've tried windy@0.6.1 + radix-color@2.1.0, and that didn't work either (???)

The only combination that works for me is windy@0.6.1 + radix-color@1.0.0

EDIT: windy@0.6.1 + radix-color@2.1.0 works now - it was due to some style caching issue.

I'm using tw@3.3.3 and config looks like this:

const { fontFamily } = require('tailwindcss/defaultTheme');

/** @type {import('tailwindcss').Config} */
module.exports = {
  darkMode: ['class'],
  content: [
    'app/**/*.{ts,tsx}',
    'components/**/*.{ts,tsx}',
    'pages/**/*.{ts,tsx}'
  ],
  theme: {
    container: {
      center: true,
      padding: '2rem',
      screens: {
        '2xl': '1400px'
      }
    },

  plugins: [require('windy-radix-palette'), require('tailwindcss-animate')]
};

[nicknikolov]

Same, this is what the docs page looks for me (on both Chrome and Safari)

Is the only solution to downgrade for now?

[brattonross]

I think this happens when the browser detects support for P3 colors. See this twitter thread between @garand and myself, where we discovered this.

Excluding P3 colors may be a way to fix this in user-land right now, by explicitly picking which colors you pass to the plugin. There are a few small issues with my handling of P3 colors at the moment, so there are definitely some bugfixes coming.

---

The main issue I have right now is that rgb and p3 colors share the same color name when extending tailwind configuration. Since we currently support transparency, the values in tailwind config need to be in a certain format, but these differ between rgb and p3 (see tailwind docs, and this article).

RGB expects e.g. rgb(0 0 0 / <alpha-value>) P3 expects e.g. color(display-p3 0.31 0.49 0.29 / <alpha-value>)

If the plugin were to not support transparency, there'd be no need for this discrepancy, and the tailwind config could just simply point to the CSS variable of the color, which would change based on P3 support.

I might be mistaken, but it seems non-trivial to have the same tailwind color support P3 while also supporting transparency (e.g. bg-red-9/10) in tailwind. The only way I can think of that might potentially work is to add base styles for all the different types of opacity manually, instead of relying on tailwind to do it for us by using <alpha-value>. But then obviously we'd also need to handle all the different kinds of opacity, and if more are added by tailwind in the future, that's maintenance of this library that needs to be done.

Back some time ago, this library intentionally didn't support tailwind's transparency, because I felt that by doing that you were basically defeating the point of using Radix Colors. To me, P3 support OOTB is more important than transparency, but I also don't want to let down people who use this library and want to be able to use transparency, even if I don't agree with them about its use.

Therefore, my thinking is that I will adjust the API of this plugin so that transparency is an optional feature, in favour of P3 support by default. If you want to be able to use tailwind's transparency, then the regular color palette would switch to only rgb, with P3 colors being moved to their own color name e.g. bg-redP3-9. Perhaps I'd even ship a custom variant to help with P3 support, so you could do bg-red-9 p3:bg-redP3-9. For users who don't want to use tailwind's transparency (hopefully most people if you are using Radix Colors), P3 colors should just work.

[brattonross]

I've just published v2.0.0-beta.0, which should fix this issue... the demo site should now look correct on browsers that support P3 as well.

Let me know if you still see this issue

[nicknikolov]

Hey brattonross, yes demo page seems to work again for me! Also thanks a lot of the thorough explanation and breakdown, was nice to learn more about the internals.