Theme function should returns rgb values

[Yovach]

Hi,

The function theme currently returns a hex color so if we do someting like :

global.css :

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

:root {
  --clr-primary: theme('colors.blue.200')
}

tailwind.config.js :

module.exports = {
  theme: {
    extend: {
      // ...
      colors: {
        primary: 'var(--clr-primary)'
      }
    },
  },
  plugins: [],
}

We can't use bg-opacity modifier : bg-primary/50 because the css var --clr-primary is defined as hex color.

I don't know if this issue could be fixed easily or not but there is some possibles fixes :

• convert the hex color returned by theme('colors.x.y') into r g b values
• add a new function to convert hex color into r g b

Thank you

[Yovach]

For people who want to do what I did, there is a solution:

tailwind.config.js

const plugin = require("tailwindcss/plugin");
const colors = require("tailwindcss/colors");
const { parseColor } = require("tailwindcss/lib/util/color");

/* Converts HEX color to RGB */
const toRGB = (value) => parseColor(value).color.join(" ");

/** @type {import("tailwindcss").Config } */
module.exports = {
  // [...]
  theme: {
    extend: {
      colors: {
        primary: "rgb(var(--clr-primary) / <alpha-value>)",
      },
    },
  },
  plugins: [
    plugin(function ({ addBase }) {
      addBase({
        ":root": {
          "--clr-primary": toRGB(colors.indigo["600"]),
        },
      });
    }),
  ],
};```

[andrii-kryvoviaz]

I've encountered the same issue, and decided to write a simple tailwind plugin to solve this issue.

Install the plugin:

npm install tailwindcss-theme-customizer

And add basic configuration:

import { ThemeCustomizerPlugin } from 'tailwindcss-theme-customizer';

const defaultTheme: Theme = {
  variables: {
    // Define theme variables as TailwindCSS (supports type hints)
    bgButtonPrimary: {
      blue: 600,
    },
    colorIndigo: 'indigo.500', // Define color as TailwindCSS color (supports type hints)
    colorBlack: '#000', // Define color as hex
  },

  // Add custom variants here to override default variables
  // e.g. below will override bgButtonPrimary for dark mode
  variants: {
    dark: {
      bgButtonPrimary: 'teal.500'
    },
  },
};

export default {
  theme: {
    extend: {
      colors: {
        // Use rgb and <alpha-value> to support opacity
        primary: 'rgb(var(--bg-button-primary) / <alpha-value>)',
        black: 'rgb(var(--color-black))',
        indigo: 'rgb(var(--color-indigo))',
      },
    },
  },
  plugins: [ThemeCustomizerPlugin(defaultTheme)],
} satisfies Config;

Which will create the following css variables:

:root {
  --bg-button-primary: 37 99 235;
  --color-black: 0 0 0;
  --color-indigo: 99 102 241;
}

.dark {
  --bg-button-primary: 20 184 166;
}

Maybe, it could be useful. Hope tailwindcss will add rgb suppurt into theme() function.

[nefeleai]

facing the same impediment when i want to use tailwind base colors to generate new theme based variables

[pasevin]

in @Yovach response, he is using an internal undocumented function. Which is fine if you don't care about the possible future changes that could break your setup.

In my case I opted into creating a custom utility function:

export function hexToRgb(hex) {
  // Expand shorthand form (e.g. "03F") to full form (e.g. "0033FF")
  let shorthandRegex = /^#?([a-f\d])([a-f\d])([a-f\d])$/i;
  hex = hex.replace(shorthandRegex, function (m, r, g, b) {
    return r + r + g + g + b + b;
  });

  let result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);
  if (!result) return null;

  return `${parseInt(result[1], 16)} ${parseInt(result[2], 16)} ${parseInt(result[3], 16)}`;
}

which can be used like this:

import { hexToRgb } from './utils';

...
alpha: {
    DEFAULT: `rgb(${hexToRgb(grey[900])} / 0.5)`,
    subtle: `rgb(${hexToRgb(grey[900])} / 0.2)`,
  },
...

[wongjn]

With support of color-mix() in all major browsers, one can now do:

/** @type {import("tailwindcss").Config } */
module.exports = {
  theme: {
    extend: {
      colors: {
        primary: "color-mix(in srgb, var(--clr-primary) calc(100% * <alpha-value>), transparent)",
      },
    },
  },
};

See this working in this Tailwind Play.

[tommy-time]

Great stuff, thanks!

[jfcurran]

huge, this greatly simplifies things