类型错误：在以下位置找到无效的 PostCSS 插件：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"),
  ]
};

解决了

类型错误：在以下位置找到无效的 PostCSS 插件：plugins[0]

Answer 2

相同的错误，可能与 OP 不同的问题

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

需要明确的是，我没有也没有像您一样遇到这个问题，也没有尝试将故事书添加到工作流程中。

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

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

特别是，下面的所有文件都放在我的项目根目录中，并且我使用了 storybook >= 6.0.0。

?? 请参阅靠近底部注释部分的Next.js 文档，其中强调了在添加非 Next.js 工具（例如 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指示的。