Tailwind gives error message Error: PostCSS plugin postcss-flexbugs-fixes requires PostCSS 8

Question

I'm trying to install Tailwind for my React dictionary app, but I'm getting the below error message

Compiled with problems:

ERROR in ./src/App.js 4:0-19

Module not found: Error: Can't resolve './App.css' in 'C:\Users\mekstein\Desktop\free-dictionary\src'

ERROR in ./src/index.css (./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[1].oneOf[5].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[1].oneOf[5].use[2]!./node_modules/source-map-loader/dist/cjs.js!./src/index.css)

Module build failed (from ./node_modules/postcss-loader/dist/cjs.js): Error: PostCSS plugin postcss-flexbugs-fixes requires PostCSS 8. Migration guide for end-users: https://github.com/postcss/postcss/wiki/PostCSS-8-for-end-users at Processor.normalize (C:\Users\mekstein\Desktop\free-dictionary\node_modules\postcss\lib\processor.js:153:15) at new Processor (C:\Users\mekstein\Desktop\free-dictionary\node_modules\postcss\lib\processor.js:56:25) at postcss (C:\Users\mekstein\Desktop\free-dictionary\node_modules\postcss\lib\postcss.js:55:10) at Object.loader (C:\Users\mekstein\Desktop\free-dictionary\node_modules\postcss-loader\dist\index.js:96:17)

what am I missing?

see below my package.json

{
  "name": "free-dictionary",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@testing-library/jest-dom": "^5.16.5",
    "@testing-library/react": "^13.4.0",
    "@testing-library/user-event": "^13.5.0",
    "autoprefixer": "^9.8.8",
    "postcss": "^7.0.39",
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "react-scripts": "5.0.1",
    "tailwindcss": "npm:@tailwindcss/postcss7-compat@^2.2.17",
    "web-vitals": "^2.1.4"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
  "eslintConfig": {
    "extends": [
      "react-app",
      "react-app/jest"
    ]
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  },
  "devDependencies": {
    "postcss-flexbugs-fixes": "^5.0.2",
    "postcss-preset-env": "^7.8.2",
    "postcss-pxtorem": "^5.1.1"
  }
}

Russell W · Accepted Answer · 2022-10-30 18:47:55Z

I had the same problem and now have it working.

I was following the instructions from the course "React Front to Back - 2022 - Traversy Media " and got the same error

These instructions to install Tailwindcss are found at https://v2.tailwindcss.com/docs/guides/create-react-app

To resolve the issue i firstly - uninstalled the npm packages i had installed from the previous link ( those in the package.json ) - deleted the tailwind.config.js and postscc.config.js files created by that install

I then followed the install instructions for v3 tailwind at

https://tailwindcss.com/docs/configuration

npm install -D tailwindcss postcss autoprefixer npx tailwindcss init -p

Configured my tailwind.config.js

added the @tailwind directives for each of Tailwind’s layers to your ./src/index.css file.

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

When i attempted to start the application i still got the error you received which i fixed by running

npm i postcss-flexbugs-fixes npm i postcss-preset-env

now npm start loads the main App.jsx page

Collectives™ on Stack Overflow

Tailwind gives error message Error: PostCSS plugin postcss-flexbugs-fixes requires PostCSS 8

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related