在 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（遵循 this guide）设置一个普通的 CRA 项目，以确保我没有冲突，但仍然没有成功。

postcss.config.js：

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

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

注意：我也尝试过使用 require('tailwind/nesting') 的数组语法，就像指南建议的那样。

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

---

index.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")
);

index.css：

@tailwind base;
@tailwind components;
@tailwind utilities;

.a {
  @apply text-blue-500;

  .b {
    @apply text-green-500;
  }
}

package.json：（为简洁起见省略）

{
  "name": "tailwindtest",
  "dependencies": {
    "react": "^17.0.2",
    "react-dom": "^17.0.2",
    "react-scripts": "5.0.0"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
  "devDependencies": {
    "autoprefixer": "^10.4.2",
    "postcss": "^8.4.5",
    "tailwindcss": "^3.0.12"
  }
}

Answer 1

这主要是个坏消息。

Create React App 的 Tailwind 支持意味着他们会在项目中检测到tailwind.config.js，并将tailwindcss 添加到他们现有的postcss 配置中。 Source in CRA

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

这是目前已知的问题 - Github discussion on Tailwind support PR Adam Wathan（Tailwind 创始人）和 Ian Sutherland（CRA 维护者）。但似乎没有打算很快修复。

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

npm run eject

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

PS：启用嵌套时请注意默认配置中的postcss-preset-env。 Tailwind requires you 编辑配置（如果存在）。