How to define custom color names with alpha/opacity support using default colors & having the same name in dark & light mode

[kpvhn]

I'd like to use something like bg-primary to apply a primary color to the background.

The color can be different in light and dark mode, e.g. resolve to Red 300 in light mode and to Red 800 in dark mode.

While I know of the possibility to define color variants as shown below and use them as bg-primary-light/80 dark:bg-primary-dark/80, I'd rather like to just use bg-primary/80 for brevity.

  theme: {
    extend: {
      colors: {
        primary: {
          light: colors.red["300"],
          dark: colors.red["800"],
        },
    },
  },

With CSS variables, I can define different values and refer to them in tailwind.config.ts like this:

colors: {
    primary: "var(--color-primary)",
}

To support alpha/opacity modifiers like bg-primary/80, I think I'd need this:

colors: {
    primary: "rgb(var(--color-focus-contrast) / <alpha-value>)",
}

To refer to tailwindcss colors, I'd use something like this:

@layer base {
    :root {
        --color-primary: theme(colors.red.300);
    }

    // alternatively, use some document-level CSS class / selectors etc.
    @media (prefers-color-scheme: dark) {
        :root {
            --color-primary: theme(colors.red.800);
        }
    }
}

However, theme(colors.red.300) apparently resolves to something like #rrggbb, rather than the color channels rrr ggg bbb, as required and documented by tailwindcss to support opacity modifiers as shown above.

So, what's the suggested approach here?
Is there anything effectively similar or equal to bg-primary/80, or do I have to use bg-primary-light/80 dark:bg-primary-dark/80?

[alex-krasikau]

Hey @kpvhn!

To achieve your goal, modify the tailwind.config color specification to utilize relative color syntax. Here's the updated code snippet:

colors: {
  primary: 'rgb(from var(--color-primary) r g b / <alpha-value>)',
}

Check out full example: https://play.tailwindcss.com/juMPtEAft4?file=config

Relative syntax is not universally supported in all modern browsers, but it is available in postcss-preset-env. This allows PostCSS to convert all colors to the compatible variant during the build process.

[alex-krasikau]

PostCSS Preset Env compiles relative colors at build time. While you cannot use it for dynamic runtime values, it will still work fine for Firefox and older browser versions.

https://preset-env.cssdb.org/features/#relative-color-syntax

[amishaaggarwal]

any working example to make it compatible with firefox as well?

[kpvhn]

It will be coming to Firefox 128, I think.

See

• https://groups.google.com/a/mozilla.org/g/dev-platform/c/xph2-4tjGLs/m/aao_-C6HBgAJ
• https://bugzilla.mozilla.org/show_bug.cgi?id=1900251

Until then, there's PostCSS Preset Env, however it seems that it does not fully support this use case:

• https://github.com/csstools/postcss-plugins/tree/main/plugins/postcss-relative-color-syntax

From https://github.com/csstools/postcss-plugins/tree/main/plugins/postcss-relative-color-syntax/docs :

We can not dynamically resolve var() arguments in relative color syntax, only static values will work.

[amishaaggarwal]

Thanks @kpvhn

[slashmili]

any idea how to achieve this in V4?