Can't use theme() function together with postcss-each plugin

[vikingmute]

What version of Tailwind CSS are you using?

For example: v3.0.18

What build tool (or framework if it abstracts the build tool) are you using?

For example: PostCSS ^8.4.5 Webpack 5.28.0

What version of Node.js are you using?

For example: v16.13.0

What browser are you using?

For example: Chrome,

What operating system are you using?

For example: macOS

Describe your issue
I'm using postcss-each: https://github.com/madyankin/postcss-each/ plugin in my project:
When passing postcss-each variable to theme() function, errors showed up, details as below:

CSS code

@each $val, $i in slate,blue,purple,amber,emerald {
  #template-timeline-theme-$(i) {
    background: theme(colors.$(val).500);
  }
}

Error message:

Module build failed (from ./node_modules/@vue/cli-service/node_modules/postcss-loader/dist/cjs.js):
SyntaxError

(26:5) 'colors.$(val).500' does not exist in your theme config. 'colors' has the following keys: 'inherit', 'current', 'transparent', 'black', 'white', 'slate', 'gray', 'zinc', 'neutral', 'stone', 'red', 'orange', 'amber', 'yellow', 'lime', 'green', 'emerald', 'teal', 'cyan', 'sky', 'blue', 'indigo', 'violet', 'purple', 'fuchsia', 'pink', 'rose'

[adamwathan]

Hey! Make sure Tailwind is running after postcss-each, otherwise Tailwind is receiving $(var) instead of slate for example.

Controlling plugin order is harder in PostCSS 8 but postcss-each has an API specifically for this:

https://github.com/madyankin/postcss-each/#aftereach

require('postcss-each')({
  plugins: {
    afterEach: [
      require('tailwindcss')
    ],
  }
})

[vikingmute]

Hey, @adamwathan, thanks for the help, much appreciated .
I've updated my code per your answer, but it seems still not working.

postcss.config.js

module.exports = {
  plugins: [
    require('postcss-nested'),
    require('postcss-each')({
      plugins: {
        afterEach: [
          require('tailwindcss'),
          require('autoprefixer')
        ]
      }
    }),
  ]
}

Error message:

(54:5) postcss-each: /Users/liusha/Public/easycv-templates/src/assets/tailwind.css 'colors.$(val).500' does not exist in your theme config. 'colors' has the following keys: 'inherit', 'current', 'transparent', 'black', 'white', 'slate', 'gray', 'zinc', 'neutral', 'stone', 'red', 'orange', 'amber', 'yellow', 'lime', 'green', 'emerald', 'teal', 'cyan', 'sky', 'blue', 'indigo', 'violet', 'purple', 'fuchsia', 'pink', 'rose'

for loop in tailwind.css

@each $val, $i in slate,blue,purple,amber,emerald {
  #template-timeline-theme-$(i) {
    background: theme('colors.$(val).500');
  }
} 

Is there something I'm missing?

[vikingmute]

After some research, I found out postcss-each plugin hooks should change from 'afterEach' to 'beforeEach'. Per this issue: madyankin/postcss-each#41 (comment)

First of all I mixed up the plugin order. afterEach is obviously called BEFORE the at-each statements are resolved.

The correct config should be:

module.exports = {
  plugins: [
    require('tailwindcss/nesting'),
    require('postcss-each')({
      plugins: {
        beforeEach: [
          require('tailwindcss'),
          require('autoprefixer')
        ]
      }
    }),
  ]
}

now it works like a charm.

Thanks for your help again~