Specifying CSS Color Module Level 4 Colors #2218
Replies: 4 comments 1 reply
-
This is still vexing me as well. Since @RXminuS mentioned this same issue in #4306, I thought I'd mention my findings and my inadequate and hacky workaround. My first thought was to write a plugin to change the way generateColors() works. If I'm not mistaken, this is the internal function Tailwind uses to generate the Now for my workaround. I've found that I can specify colors explicitly in my
Now, you can use the colors like this and have it display properly in all browsers:
However, there are some issues. First, if you leave one of the values out, the text will disappear on Chrome and Firefox if you leave out
With this file imported, now I can just write the following and be assured both values are set and that the definitions remain in my
As an aside I've done something similar for grays to allow them to automatically adjust for dark mode which is another case where it's easy to leave out a color class if you don't test dark and light modes thoroughly. Like this:
This will be correct about 90% of the time but still allows a designer to apply specific gray and dark:gray classes as desired if it's better for the design. I have no idea how well either of these solutions will play with the JIT engine that Tailwind is introducing. Now, back to our CSS Color Module Level 4 colors. The solution I've given above fails miserably when it's used on classes which blend or mix colors like Instead, I have to be cognizant of the repercussions any time I design a component which may use my brand colors (specified in P3). For shadows, I drop back to using only the fallback colors and do a Javascript dance to convert rings to borders if I detect a browser capable of displaying p3 colors. Otherwise, strange things happen, like buttons with a ring border that disappears and never returns if it's specified as a p3 color profile in Safari. (It'll never automatically use the fallback in those instances because the CSS specifications say it should use the more modern color definition so it just disappears entirely when it can't blend it properly.) What I would like to seeIdeally, we'd be able to specify more than one definition for each color in our
Though I'd be fine with something like this as well:
The latter seems to match the current pattern of Tailwind configuration of passing either a string or an object even though it is a bit more verbose. If multiple definitions could be specified in the configuration, I'd happily create definitions for every single color in |
Beta Was this translation helpful? Give feedback.
-
For those wondering, "what's the difference?" There are colors that can be specified in other color profiles that cannot be expressed in sRGB which is the default profile used in CSS. To display those colors correctly we need to specify them in a specific color profile. Try the following on Safari (which supports the P3 color definitions) to see the difference. HTML
CSS
Notice how much more vibrant the colors are in the P3 color profile? Those are just some of the colors which cannot be specified with standard CSS. Also, notice the big missing hole where the P3 colors should have been in Chrome and Firefox which don't support CSS Color Module Level 4 Colors yet. |
Beta Was this translation helpful? Give feedback.
-
Yeah, I was thinking about that as a workaround as well. But especially with the new JIT it just feels yucky to have to generate so an enormous blob of colour classes. Ideally, Tailwind would support P3 variants of colours and automatically generate the combination if set. I think this would be hard to do as a plugin from having poked around a bit @adamwathan, would this be something you'd consider adding to the core or should I continue exploring how to do this from the outside? |
Beta Was this translation helpful? Give feedback.
-
This wouldn't be that hard to implement by overriding the root variables for colors if the browser supports it: :root {
--tw-ring-color: rgb(252, 230, 0);
}
@supports (color: color(display-p3 1 1 1 / 1)) {
:root {
--tw-ring-color: color(display-p3 0.988 0.902 0);
}
} To prevent initially having to implement configuration for these, we could initially use a let r = 252
let g = 230
let b = 0
let rgb = `rgb(${r}, ${g}, ${b})`
let p3 = `color(display-p3 ${r / 255} ${g / 255} ${b / 255})` Could also have css handle the |
Beta Was this translation helpful? Give feedback.
-
I have a brand color which I would like to specify in tailwindcss which requires a specific color profile to display properly. So, I'd like to provide a color using the CSS Color Module Level 4 color() function. Since this is not widely supported on browsers, it also means I need to specify a fallback color to be used in older browsers as well.
Normally, this would be done in CSS like this:
However, I'm uncertain how to specify a color like this in tailwinds. Ideally, I'd like to set it up in the tailwind.config.js (preferably with 50-900 variants) but I'm non-plussed as to how I should do that.
Is this even possible?
Beta Was this translation helpful? Give feedback.
All reactions