[Solved]-Getting the error "Nested CSS was detected, but CSS nesting has not been configured correctly" in React app?-Reactjs

acording to @aricma answer, is easier if you create a script.js file on parent directory (same as package.json) and add this on package.json

  "scripts": { 
    "postinstall": "node script.js",
    ...
  }

and this on script.js

const fs = require('fs');

fs.readFile('node_modules/react-scripts/config/webpack.config.js', 'utf8', (err, data) => {
  if (err) {
    return console.log(err);
  }
  const result = data.replace("'postcss-flexbugs-fixes',", "'postcss-flexbugs-fixes','postcss-nesting',").replace("'tailwindcss',", "'tailwindcss/nesting', 'tailwindcss',");

  fs.writeFile('node_modules/react-scripts/config/webpack.config.js', result, 'utf8', (err) => {
    if (err) {
      return console.log(err);
    }
    return console.log(true);
  });
  return console.log(true);
});

I use CRA and to fix the issue I used postinstall to run a script after npm install or yarn. The script is changing the web pack config of CRA after all dependencies are installed(a temporary solution of cause). You can find the web pack config in node_modules/react-scripts/config/webpack.config.js. The script adds my postcss packages to the actual CRA web pack config.

WHY? CRA does not respect any postcss config in your repo

Have also a look at this comment to see how you should use postinstall https://github.com/facebook/create-react-app/issues/2133#issuecomment-347574268.

I also added tailwindcss/nesting before tailwindcss because tailwind is throwing a warning when it sees any nested css. The warning was blocking my CI since CI=true in CRA means all warnings are treated as errors.

Here is the script that is running in my repo.

FILE="node_modules/react-scripts/config/webpack.config.js"

function replace {
  TARGET_FILE=$1
  PATTERN_TO_FIND=$2
  VALUE_FOR_REPLACEMENT=$3

  OLD_FILE_CONTENT=$(cat "$TARGET_FILE")  # we need to collect the content of the file so we can overwrite it in the next command
  echo "$OLD_FILE_CONTENT" | sed -e "s/$PATTERN_TO_FIND/$VALUE_FOR_REPLACEMENT/g" > "$TARGET_FILE"
}

# add postcss-nesting
replace "$FILE" "'postcss-flexbugs-fixes'," "'postcss-flexbugs-fixes','postcss-nesting',"

# add tailwind/nesting
replace "$FILE" "'tailwindcss'," "'tailwindcss\/nesting', 'tailwindcss',"