TypeError: Invalid PostCSS Plugin found at: plugins[0]

Question

我克隆了这个 repo https://github.com/tailwindcss/setup-examples/tree/master/examples/nextjs 然后我更新了 tailwind.config.js

  theme: {
    extend: {
      color: {
        primary: "#730000",
        secondry: "#efefef",
      },
    },
  },
  variants: {},
  plugins: [],
};

然后运行命令 postcss css/tailwind.css -o generated.css 终端抛出错误 TypeError: Invalid PostCSS Plugin found at: plugins[0] 任何人都可以帮我解决它。谢谢。

Answer 1

改变了这个

module.exports = {
  plugins: [
    "postcss-import",
    "tailwindcss",
    "autoprefixer",
  ]
};

至

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

解决了

TypeError: Invalid PostCSS Plugin found at: plugins[0]

Answer 2

同样的错误，可能与 OP

不同的问题

我在尝试与 Tailwind 和 Nextjs 一起安装 Storybook 时遇到了这个问题。将 "tailwindcss": {}, 添加到我的 postcss.config.js.

后，我能够修复错误

明确地说，我没有也没有像你一样遇到过这个问题，没有尝试将故事书添加到工作流程中。

我的解决方案的工作配置文件

以下是 postcss、tailwind、storybook 的工作配置，使用 Nextjs 的默认值。我正在使用标准 create-next-app 工作流程并基于 --example with-storybook.

特别是，以下所有文件都放在我的项目根目录中，我使用的故事书 >= 6.0.0。

⚠️ See Next.js documentation, near the bottom in a note section, which highlights the need for object syntax in configuration files when adding non-Next.js tools, such as storybook.

postcss.config.js

module.exports = {
  plugins: {
    "tailwindcss": {},
    'postcss-flexbugs-fixes': {},
    'postcss-preset-env': {
      autoprefixer: {
        flexbox: 'no-2009',
      },
      stage: 3,
      features: {
        'custom-properties': false,
      },
    },
  },
}

tailwind.config.js

module.exports = {
  future: {
    removeDeprecatedGapUtilities: true,
    purgeLayersByDefault: true
  },
  purge: ['./components/**/*.{js,ts,jsx,tsx}', './pages/**/*.{js,ts,jsx,tsx}'],
  theme: {
    extend: {
      colors: {
        'accent-1': '#333',
      },
    },
  },
}

.storybook/main.js

module.exports = {
  stories: ['../stories/*.stories.@(ts|tsx|js|jsx|mdx)'],
  addons: ['@storybook/addon-actions', '@storybook/addon-links'],
}

.storybook/preview.js

import '../styles/index.css';

其中 index.css 是通过 Tailwindcss docs 指示的。

Answer 3

检查您安装的autoprefixer 的版本。我花了一两个小时才意识到，当与 nextjs+tailwindcss 一起使用时，autoprefixer 版本 10 确实会导致重大更改（特别是我这边的 next css-loader）。暂时回滚到 autoprefixer@9.8.6，直到这些错误得到解决。如果使用 yarn，还要确保你没有使用 next@9.5.3。使用 next@9.5.2 或 next@9.5.4-canary.20。我提到它的原因是如果没有明确的目标版本与 yarn 冲突，next@9.5.3 会自动安装。值得庆幸的是，next@9.5.4-canary.20 应该很快作为 @9.5.4 发布，他们将开始在 @9.5.5-canary.x

上工作

Autoprefixer 大约 5 天前发布了版本 10。他们将 postcss 移至 peerDependencies 并移至 PostCSS 8。他们还删除了对节点版本 6.x、8.x 和 11.x 的支持。也就是说，autoprefixer@9.8.6 应该可以解决问题。

我在 postcss/autoprefixer 中对一个未解决的问题发表了评论，概述了我在将版本 10 与 nextjs 结合使用时遇到的错误 https://github.com/postcss/autoprefixer/issues/1359#issuecomment-695752807

Answer 4

尝试将 postcss-cli 以及 postcss、tailwindcss 和 autoprefixer 更新到它们的最新版本。

npm i postcss-cli@latest

npm i tailwindcss@latest postcss@latest autoprefixer@latest

在 ReactJS 中为我工作 - “^16.13.1”

postcss.config.js

module.exports = {
  plugins: [
    require("tailwindcss"),
    require("autoprefixer"),
  ],
};

TypeError: Invalid PostCSS Plugin found at: plugins[0]