在 React 应用程序中收到错误“检测到嵌套 CSS，但 CSS 嵌套尚未正确配置”？

Question

我已经将我的 CRA 项目升级到 TailwindCSS 3，但现在 CSS 嵌套不再起作用。启动服务器后，控制台会输出：

(8:3) Nested CSS was detected, but CSS nesting has not been configured correctly.
Please enable a CSS nesting plugin *before* Tailwind in your configuration.
See how here: https://tailwindcss.com/docs/using-with-preprocessors#nesting

但是，我不知道必须采取什么措施来纠正这个问题。我尝试使用 Tailwind 设置一个普通的 CRA 项目（遵循本指南）只是为了确保没有冲突，但仍然没有成功。

postcss.config.js：

(8:3) Nested CSS was detected, but CSS nesting has not been configured correctly.
Please enable a CSS nesting plugin *before* Tailwind in your configuration.
See how here: https://tailwindcss.com/docs/using-with-preprocessors#nesting

正如你所看到的，我在Tailwind之前添加了嵌套插件。在我看来，好像插件没有被检测到。我也尝试用postcss-nesting相同的结果替换它。

require('tailwind/nesting')注意：我还尝试按照指南建议使用数组语法。

有趣的是，从 postcss.config.js 中删除所有插件（或使用require无法解析的插件）仍然会输出相同的错误，这意味着不需要此文件来加载 Tailwind。也许我遗漏了一些导致整个 postcss.config.js 文件无法首先加载的东西？

---

索引.js：

import React from "react";
import ReactDOM from "react-dom";
import "./index.css";

ReactDOM.render(
  <React.StrictMode>
    <div className="a">
      aaa
      <div className="b">bbb</div>
    </div>
  </React.StrictMode>,
  document.getElementById("root")
);

索引.css：

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

package.json：（为了简洁省略了一些内容）

import React from "react";
import ReactDOM from "react-dom";
import "./index.css";

ReactDOM.render(
  <React.StrictMode>
    <div className="a">
      aaa
      <div className="b">bbb</div>
    </div>
  </React.StrictMode>,
  document.getElementById("root")
);

Answer 1

这大多只是坏消息。

Create React App 的 Tailwind 支持意味着他们将tailwind.config.js在项目中进行检测并添加tailwindcss到其现有postcss配置中。来源CRA

Tailwind 在其网站上提供的指南创建了一个虚拟文件-在postcss.config.js此文件中进行更改不会更改实际的 postcss 配置。（如果有误导的话）

这是目前的一个已知问题 - Adam Wathan（Tailwind 创始人）和 Ian Sutherland（CRA 维护者）之间关于 Tailwind 支持 PR 的 Github 讨论。但似乎并没有很快修复的打算。

如果你想使用嵌套（或者任何 PostCSS 插件），可以使用以下命令从 CRA 中弹出：

npm run eject

config/webpack.config.js弹出后你可以在-look for中找到CRA的postcss配置postcss-loader。在那里编辑配置可以启用任何 postcss 功能。

postcss-preset-envPS：启用嵌套时请注意默认配置。Tailwind要求您编辑配置（如果存在）。