Tailwindcss: theme() does not access config value when theme() containing theme()

[kevinwong150]

My situation: trying to use multiple box-shadow.

in tailwind.config.js:

module.exports = {
  theme: {
    colors: {
      shadow: somecolorcode,
    },
    boxShadow: {
      shadow1: '0 0 6px theme(colors.shadow)',
      shadow2: '0 0 16px theme(colors.shadow)'.
      shadow3: '0 0 26px theme(colors.shadow)',
    },

in stylesheet:

.some-class { 
  box-shadow: theme(boxShadow.shadow1), theme(boxShadow.shadow2), 
theme(boxShadow.shadow3);
}

turn out getting this in browser:

[CvX]

As described in https://tailwindcss.com/docs/theme/#referencing-other-values:

If you need to reference another value in your theme, you can do so by providing a closure instead of a static value. The closure will receive a theme() function that you can use to look up other values in your theme using dot notation.

So, in your case, the correct usage of theme() would be:

boxShadow: theme => ({
    shadow1: `0 0 6px ${theme('colors.shadow')}`,
    shadow2: `0 0 16px ${theme('colors.shadow')}`.
    shadow3: `0 0 26px ${theme('colors.shadow')}`,
})

Note the usage of a function (theme => ({})), string interpolation (${}), and correct theme() arguments (theme('string-here')).

[adamwathan]

Yeah @CvX is correct 👍 That said it never really occurred to me to use the CSS theme function inside your config file, and it's very easy to make it work, literally just moving one line of code:

  export default function(getConfig) {
    return function(css) {
      const config = getConfig()
      const processedPlugins = processPlugins([...corePlugins(config), ...config.plugins], config)

      return postcss([
        substituteTailwindAtRules(config, processedPlugins),
-       evaluateTailwindFunctions(config),
        substituteVariantsAtRules(config, processedPlugins),
        substituteResponsiveAtRules(config),
        substituteScreenAtRules(config),
        substituteClassApplyAtRules(config, processedPlugins.utilities),
+       evaluateTailwindFunctions(config),
      ]).process(css, { from: _.get(css, 'source.input.file') })
    }
  }

Wonder if this is worth changing?

[CvX]

I guess it makes sense, but I wonder what edge cases and bug may come out of that. 😅

[adamwathan]

Actually I'm not even right, this already partially works, was too early in the morning when I was testing this. The problem in this case is that you are using the theme function to refer to another value that also depends on the theme function, and the theme function just refers to the config where none of those function calls are actually evaluated.

So stick to doing things the way @CvX explained, that's the only way it will ever properly work for you 👍