using theme color values for css variables

[jbbakst]

I'm using css variables to define a few colors for my app (primary, secondary, etc.). I'd like to be able to use default colors from the tailwind theme for these css variables, but doing so breaks opacity modifiers.

Minimal example:
styles.css

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

@layer base {
    : root {
        --primary: theme(colors.slate.950);
        --secondary: theme(colors.slate.100);
    }

    .dark {
        --primary: theme(colors.slate.50);
        --secondary: theme(colors.slate.900);
    }
}

tailwind.config.ts

import type { Config } from "tailwindcss";
import colors from "tailwindcss/colors";
import defaultTheme from "tailwindcss/defaultTheme";

const config: Config = {
  darkMode: ["class"],
  content: [...]
  theme: {
    extend: {
      colors: {
        primary: "var(--primary)",
        secondary: "var(--secondary)",
      },
    },
  },
  plugins: [],
};
export default config;

This mostly works, but doing something like bg-primary/10 breaks. The fix I have is to manually specify all of the rgb color channels in the css variables and then do rgb(var(--primary)) in my tailwind config, but this is significantly less convenient and readable than using the theme values in the css variables.

[wongjn]

You could consider using color-mix() in the Tailwind configuration like: https://play.tailwindcss.com/ezXGYkdyn1?file=config

[jbbakst]

Ah cool, thank you! This works (although I do find it a bit wonky)