Fix function colors bug

[DylanVann]

Describe the problem:

I am trying to use CSS variables for colors while keeping opacity functionality.

I believe the following config should work:

const color = (name) => ({ opacityVariable, opacityValue }) => {
  if (opacityValue !== undefined) {
    return `rgba(var(--twc-${name}), ${opacityValue})`
  }
  if (opacityVariable !== undefined) {
    return `rgba(var(--twc-${name}), var(${opacityVariable}, 1))`
  }
  return `rgb(var(--twc-${name}))`
}

const colorScale = (name) =>
  [50, 100, 200, 300, 400, 500, 600, 700, 800, 900].reduce(
    (acc, step) => ({
      ...acc,
      [step]: color(`${name}-${step}`),
    }),
    {},
  )

module.exports = {
  purge: ['./src/**/*.js'],
  theme: {
    extend: {
      colors: {
        foreground: color('foreground'),
        background: color('background'),
        accent: color('accent'),
        gray: colorScale('gray'),
      },
    },
  },
  variants: {
    extend: {},
  },
  plugins: [require('@tailwindcss/typography')],
}

This is based on https://github.com/adamwathan/tailwind-css-variable-text-opacity-demo.

This currently results in an error: 'colors.gray.400' was found but does not resolve to a string.

Reproduction: https://play.tailwindcss.com/NRyd8n8K9g?file=config

This error occurs when trying to replace color: theme('colors.gray.400', #a1a1aa); in preflight.css.

The error is thrown inside validatePath because value is a function.

Link to a minimal reproduction:

https://play.tailwindcss.com/NRyd8n8K9g?file=config

Working Example

I've used patch-package to show how this should work:

https://github.com/DylanVann/tailwind-css-variable-colors-demo
https://tailwind-css-variable-colors-demo.netlify.app/

[jaredhill4]

@adamwathan,

Any chance this will be merged soon? The theme() function isn't working. 😢

[adamwathan]

Thanks sorry for the delay!