如何正确配置postcss.config.js文件（主要是与tailwindcss相关的部分）的规则？

Question

展示如何配置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
  },
}

还有一些必要的内容，当需要合并不按默认命名的配置文件时。

今天我在运行yarn dev时遇到了这个错误，示例2显示了一个postcss.config.js：

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项目设置的工程中。

我需要使用哪种黑魔法来使这个设置工作？

- Robert Wildling

Answer 1

我发布的例子1和例子2之间有一个微妙但非常重要的区别。

实际上，例子2是错误的！

虽然例子1使用对象来配置插件的参数，但第二个例子使用函数调用。这些必须放在数组中(意思是:方括号而不是花括号)。

这是Example 2的正确版本:

// Example 2 fixed:

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

我还没有测试这是否也适用于示例3（但我认为是这样的）。希望这可以帮助某人！

- Robert Wildling

---

有人能至少指出官方的 postcss 文档，其中介绍如何配置 postcssconfig 并解释两种语法吗？ - Sudhir N

真的不难找到，@Sudhir N！https://tailwindcss.com/docs/using-with-preprocessors#using-post-css-as-your-preprocessor - Robert Wildling

Answer 2

在package.json中，我有以下内容：

  "postcss": {
    "plugins": [
      "postcss-import",
      "tailwindcss",
      "postcss-preset-env",
      "autoprefixer",
      "cssnano"
    ]
  }

这是我用于生产的完整设置。我使用的是 tailwind 3.0.23，但它可能与任何版本都兼容。

如果你使用 cssnano，则无需为 postcss-preset-env 设置 tailwindcss/nesting，尽管 tailwind 在他们的文档中推荐这样做：https://tailwindcss.com/docs/using-with-preprocessors#nesting

为什么？因为 cssnano 合并了它们两个生成的重复代码。这种使用 cssnano 的解决方法是由 tailwind 团队成员推荐的：https://github.com/tailwindlabs/tailwindcss/issues/4634#issuecomment-861392246

- Lucas Vazquez

---

谢谢你，卢卡斯！同时 - 由于我们有了新的tailwind版本 - 如果您能提及您的配置是否适用于tailwind v2和/或v3（仅限这两个版本），那将是非常有帮助的。 - Robert Wildling

我有Tailwind的版本3.0.23，但我认为它与任何版本兼容，因为这个配置更与PostCSS相关，而不是Tailwind。 - Lucas Vazquez

Answer 3

在你的终端中运行以下命令，通过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'

- Jorge Cordero

---

谢谢，我知道有关降级路径的信息（应该提到它）。罪魁祸首是postcss-preset-env。似乎没有一个标准适用于react或vue（也不适用于vue和vite）。目前postcss相当有问题。 - Robert Wildling

Answer 4

对我来说，这个配置可以正确运行：

// Example 3:

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


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

而且使用这个版本的库：

"postcss": "^8.4.6",
"postcss-cli": "^9.1.0",
"tailwindcss": "^3.0.18",

我目前尚未尝试 postcss 的所有功能，但基本的文件处理进程可以在 CLI 中正确运行...

- miltone