Postcss-each with Tailwind and Next.js

[eliza3291]

Describe the Bug

I have a Next.js app, with Tailwindcss, Postcss and postcss-each plugin. While trying to upgrade the packages because of some vulnerabilities I found out that the configuration I had before in my postcss.config.js start failing because the plugins order changed in Postcss 8.

Old configuration:

module.exports = {
  content: ['./pages/**/*.{js,ts,jsx,tsx}'],
  plugins: {
    'postcss-each': {},
     tailwindcss: {},
    'postcss-preset-env': {},
    autoprefixer: {},
  },
}

and I found this solution so I need to use the beforeEach configuration available in `postcss-each´ plugin in order to call Tailwindcss plugin before each iteration.

Next.js documentation explicitly says:

Do not use require() to import the PostCSS Plugins. Plugins must be provided as strings.

But when I try to import Tailwindcss in the postcss.config.js as a string without require() like this:

module.exports = {
  content: ['./pages/**/*.{js,ts,jsx,tsx}'],
  plugins: {
    'postcss-each': {
      plugins: {
        beforeEach: ['tailwindcss']
      }
    },
    'postcss-preset-env': {},
    autoprefixer: {},
  },
}

and trying to run the app then I got Error: tailwindcss is not a PostCSS plugin

Expected Behavior

Tailwindcss plugin is found when called inside beforeEach without require() as defined in the Next.js documentation.

To Reproduce

Github Repository

In the Getting Started section of the readme file you can find the steps to reproduce the issue.

[nightire]

try with:

module.exports = {
  content: ['./pages/**/*.{js,ts,jsx,tsx}'],
  plugins: {
    'postcss-each': {
      plugins: {
        beforeEach: {
          tailwindcss: {},
        },
      },
    },
    'postcss-preset-env': {},
    autoprefixer: {},
  },
};

I can not guarantee if it works; it's just my hunch.

[eliza3291]

@nightire thank you for your hunch.

I tested it, it doesn't show any error, but pages are not having any style. It's as if tailwind is not imported at all.