2

I'm trying to use TailwindCSS on my PostCSS, along with Sass as a preprocessor. Whenever I attempt to start my project, I am receiving this error:

[07:18:19] Error: ModuleBuildError: Module build failed (from ./node_modules/mini-css-extract-plugin/dist/loader.js):
ModuleBuildError: Module build failed (from ./node_modules/postcss-loader/src/index.js):
TypeError: Invalid PostCSS Plugin found at: plugins[0]

I have these configurations in place:

webpack.config.js

{
        test: /\.(sa|sc)ss$/,
        use: [
          {
            loader: MiniCssExtractPlugin.loader,
          },
          {
            loader: "css-loader",
            options: {
              importLoaders: 2,
            },
          },
          {
            loader: "postcss-loader",
          },
          {
            loader: "sass-loader",
          },
        ],
      },

postcss.config.js

module.exports = {
  plugins: [
    require("postcss-import"),
    require("tailwindcss"),
    require("autoprefixer"),
  ],
};
Lala
  • 378
  • 3
  • 15

1 Answers1

0

I have encountered similar problems that can't be solved all the time. Finally, I switched to the old version to temporarily solve them, depending on the following

"@tailwindcss/postcss7-compat": "^2.2.17",
"autoprefixer": "^9.8.8",
"postcss": "^7.0.39",
"tailwindcss": "npm:@tailwindcss/postcss7-compat@^2.2.17",
CorsunChen
  • 1