CSS Variables and Color Space Modifiers

[edwinvelez]

Not too long ago there was Theming Tailwind with CSS Variables and its complimentary source code. Great!

According to Easier CSS variable color configuration and CSS Variables there is a minor update to the recommended solution. Awesome!

In either solution, there seems to be a problem. Because color space modifiers are not valid, the IDE does not know how to pick up on color codes when using numeric values only. Therefore, color previews do not show in the gutter. Additionally, refactoring becomes more tedious and prone to error.

If I misunderstand the correct usage and creating a non-existent issue, I look forward to your guidance.

According to documentation - WRONG!

@tailwind base;
@tailwind components;
@tailwind utilities;

@layer base {
  :root {
    --color-primary: rgb(255 115 179);
    --color-secondary: rgb(111 114 185);
    /* ... */
  }
}

According to documentation - RIGHT

@tailwind base;
@tailwind components;
@tailwind utilities;

@layer base {
  :root {
    --color-primary: 255 115 179;
    --color-secondary: 111 114 185;
    /* ... */
  }
}

Don't include the color space function or opacity modifiers won't work.
-- Source: CSS Variables

The Main Question

It seems that tailwind.config.js generates values based on CSS Variables defined in :root. To achieve this, we pass in an alternative specified by our limitation of using color space modifiers. Tailwind is already parsing strings with <alpha-value>. Instead of the current approach, why not accept rgb( ) values, without modification accepting color space modifiers, and parse the string as you already do with <alpha-value>? If you can replace <alpha-value> then you can strip rgb( ) and continue with your manipulation.

Then define your colors in your configuration file, being sure to include the color space you’re using, and the special placeholder that Tailwind will use to inject the alpha value when using an opacity modifier:

module.exports = {
  content: [
    './src/app/**/*.{js,ts,jsx,tsx}',
    './src/components/**/*.{js,ts,jsx,tsx}',
  ],
  theme: {
    extend: {
      textColor: {
        skin: {
          // Base Text
          base: 'rgb( var( --color-text-base ) / <alpha-value> )',
        },
      },
    },
  },
};

[John-Dennehy]

This really needs to be fixed as breaks important feedback loop when working with colors and UI tools like shadcn UI.

[nikravi]

we found an workaround for this issue. Duplicate variables where the above is in rgb format while the one redefining it is in numbers only

[gabimoncha]

@adamwathan - is there a reason why the color space functions have to be used in the config files instead of css files?

[adamwathan]

The reason is because if a color is defined like this:

--color-primary: rgb(38, 76, 200);

Then a utility like text-primary would need to generate this CSS:

.text-primary {
  color: var(--color-primary);
}

But now there's no way to use a utility like text-primary/50 because there's no way to adjust the alpha value:

.text-primary\/50 {
  color: var(--color-primary); /* Where do we put the 50% for the opacity? */
}

By using the approach in the docs, we can do this:

.text-primary\/50 {
  color: rgb(var(--color-primary) / 50%);
}

If the color space was baked in to the variable, that would resolve to this, which is broken:

.text-primary\/50 {
  color: rgb(rgb(38, 76, 200) / 50%);
}

In Tailwind CSS v4 we're going to switch to using the new color-mix() function in CSS to handle opacity stuff, and by doing that you will be able to define your variable colors using the color space:

https://una.im/color-mix-opacity/

Hope that helps explain how it all works — unfortunately it's the only way to make it work if you need to be able to use the opacity modifier, just a CSS limitation (before color-mix() anyways). Worth nothing too that if you never need to use semitransparent colors, you can define your variables with the color space included.

[gabimoncha]

Totally, understandable. Wasn't aware of the impact over the alpha value.
Looking forward to v4 🔥

[crswll]

You can use color-mix in your config pretty straightforwardly today: https://play.tailwindcss.com/rEjGkV2FlQ?file=css

[gabimoncha]

Who are you, mr God-given developer?

[SerafinDinges]

This is so helpful, thank you! This was really bugging me. This way we can both use alpha values and color spaces in the correct order. We had a situation where user input via a CMS is injected as variables and we didn't want to strip those of their color spaces.

[gabimoncha]

You can use color-mix in your config pretty straightforwardly today: https://play.tailwindcss.com/svyCppq6HS?file=css

@edwinvelez this should be the accepted answer for the moment, until Tailwind V4 is live