Question

我克隆了这个仓库。 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：在以下位置发现无效的PostCSS插件：插件[0]

Answer 2

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

在尝试与Tailwind和Nextjs一起安装Storybook时遇到了这个问题。将"tailwindcss": {},添加到postcss.config.js后，我能够解决该错误。

需要明确的是，在没有尝试将故事书添加到工作流中的情况下，我并没有像您一样遇到此问题。

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

以下是Postcss，顺风，故事书的工作配置，使用Nextjs的默认设置。我正在使用标准的create-next-app工作流程，并基于--example with-storybook。

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

⚠️参见Next.js documentation，在注释部分的底部附近，，突出显示了在添加非Next.js工具（如故事书）时在配置文件中使用对象语法的需求。 / p>

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版本10确实在与nextjs + tailwindcss（特别是我的下一个css-loader）一起使用时确实引起了重大更改。暂时回滚到autoprefixer@9.8.6，直到解决了这些错误。如果使用yarn，还请确保您未使用next@9.5.3。使用next@9.5.2或next@9.5.4-canary.20。我提到它的原因是，如果没有针对性的版本与纱线冲突，则next@9.5.3会自动安装。值得庆幸的是，next@9.5.4-canary.20应该尽快以@ 9.5.4发行，并且它们将在@ 9.5.5-canary.x上开始工作

Autoprefixer大约在5天前发布了版本10。他们将postcss移至peerDependencies，并移至PostCSS8。他们还删除了对Node版本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 更新到它们的最新版本。

a.count

在 ReactJS 中为我工作 - "^16.13.1"

postcss.config.js

npm i postcss-cli@latest

npm i tailwindcss@latest postcss@latest autoprefixer@latest

TypeError：无效的PostCSS插件位于：plugins [0]

4 个答案:

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

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

postcss.config.js