配置postcss.config.js（主要是tailwndcss）的具体规则是什么？答案

【问题标题】：What exactly are the rules for configuring postcss.config.js (mainly with tailwndcss)?配置postcss.config.js（主要是tailwndcss）的具体规则是什么？
【发布时间】：2021-12-11 22:56:22
【问题描述】：

用于展示如何配置 postcss.config.js 的变体数量非常令人困惑。有一些例子（比如tailwindcss 文档中的那个）使用了这个：

// Example 1:
module.exports = {
  plugins: {
    tailwindcss: {},
    autoprefixer: {},
  },
}

还有那些需要库的：

// Example 2:
module.exports = {
  plugins: {
    require('tailwindcss'),
    require('postcss-preset-env')({
      stage: 0,
      'nesting-rules': true
    })
  },
}

其他人在配置module.exports之前需要外部库：

// Example 3:

const tailwindcss = require('tailwindcss');
const postcssPresetEnv = require('postcss-preset-env');


module.exports = {
  plugins: {
    tailwindcss,
    postcssPresetEnv
  },
}

当必须合并一个未根据默认值命名的配置文件时，还有一些必要的。

今天，当使用 postcss.config.js 运行 yarn dev 时出现此错误，如示例 2 所示：

Syntax Error: /[path]/_pod-test/postcss.config.js:3
    require('tailwindcss'),
             ^^^^^^^^^^^

SyntaxError: Unexpected string

当我删除带有“tailwindcss”的行时，“postcss-preset-env”也会发生同样的事情：

Syntax Error: /Volumes/_III_/Z_WWW/_ZZZ PoD/_pod-test/postcss.config.js:3
    require('postcss-preset-env')({
            ^^^^^^^^^^^^^^^^^^^^

SyntaxError: Unexpected string

当我切换到示例 1 中所示的设置时，我收到此错误：

Syntax Error: Error: PostCSS plugin tailwindcss requires PostCSS 8.
Migration guide for end-users:
https://github.com/postcss/postcss/wiki/PostCSS-8-for-end-users

我确实使用 postcss 8.3.9！

这一切都发生在一个使用vue-cli 设置为 Vue2 项目的项目中。

我必须应用哪种工艺才能使此设置正常工作？

【问题讨论】：

标签： vue.js tailwind-css vue-cli postcss

【解决方案1】：

在您的终端中运行以下命令以通过 npm 安装 tailwind css 及其依赖项。

npm install tailwindcss postcss autoprefixer

在尝试运行项目时可能会收到您提到的错误消息

Error: PostCSS plugin tailwindcss requires PostCSS 8.

运行以下代码卸载以前的安装并修复错误

npm uninstall tailwindcss postcss autoprefixer 
npm install tailwindcss@npm:@tailwindcss/postcss7-compat@tailwindcss/postcss7-compat postcss@^7 autoprefixer@^9

接下来，您需要生成 Tailwind 和 PostCSS 配置文件

npx tailwindcss init -p

您的配置文件应如下所示

postcss.config 文件

module.exports = {
  plugins: {
    tailwindcss: {},
    autoprefixer: {},
  },
};

tailwindcss.config 文件

module.exports = {
  future: {
    // removeDeprecatedGapUtilities: true,
    // purgeLayersByDefault: true,
  },
  purge: [],
  theme: {
    extend: {},
  },
  variants: {},
  plugins: [],
};

最后，打开你的 main.js 文件并导入包含 tailwind 指令的 tailwind.css 文件，即

import './css/tailwind.css'

【讨论】：

谢谢，我知道降级路径（应该提到它）。罪魁祸首是 postcss-preset-env。似乎没有一个标准有效，无论是 react 还是 vue（也不适用于 vue 和 vite）。 postcss 是非常破的 ATM。

【解决方案2】：

我发布的示例 1 和示例 2 之间存在细微但非常重要的区别。

示例 2 实际上是错误的！

示例 1 使用 objects 来配置插件的参数，而示例 2 使用函数调用。并且这些必须放在 ARRAY 中（意思是：括号而不是花括号）。

这将是示例 2 的正确版本：

// Example 2 fixed:

module.exports = {
  plugins: [  // <= here we MUST use brackets!
    ... [function calls] ...
  ],
}

我尚未测试示例 3 是否也是如此（但我假设是这样）。

希望这对某人有所帮助！

【讨论】：