Tailwind stopped working when downgrade react-scripts to @4.0.3

user_16631697 0
Viewed 223

i Had some issues with some packages not working with react-scripts@5.0.1 so i had to downgrade to @4.0.3 to fix it. But then Tailwind stoped working. does anyone have any fixes for this ?

this is my package.json

{
  "name": "fight-club-game",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@openzeppelin/contracts": "^4.6.0",
    "@reduxjs/toolkit": "^1.8.1",
    "@testing-library/jest-dom": "^5.16.4",
    "@testing-library/react": "^13.2.0",
    "@testing-library/user-event": "^13.5.0",
    "assert": "^2.0.0",
    "browserify": "^17.0.0",
    "buffer": "^6.0.3",
    "crypto-browserify": "^3.12.0",
    "crypto-es": "^1.2.7",
    "crypto-js": "^4.1.1",
    "ganache": "^7.2.0",
    "ganache-cli": "^6.12.2",
    "react": "^18.1.0",
    "react-dom": "^18.1.0",
    "react-icons": "^4.3.1",
    "react-redux": "^8.0.2",
    "react-router-dom": "^6.3.0",
    "react-scripts": "4.0.3",
    "react-scroll": "^1.8.7",
    "redux": "^4.2.0",
    "redux-thunk": "^2.4.1",
    "stream-browserify": "^3.0.0",
    "web-vitals": "^2.1.4",
    "web3": "^1.7.3",
    "webpack": "^4.44.2"
  },
  "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": {
    "autoprefixer": "^9.8.8",
    "postcss": "^8.4.14",
    "postcss-cli": "^9.1.0",
    "tailwindcss": "^3.0.24"
  }
}



this is my tailwind.config.js

module.exports = {
  content: [
    "./src/**/*.{js,jsx,ts,tsx,html}",
  ],
  theme: {
    extend: {},
  },
  plugins: [],
 }



this is my

postcss.config.js

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

please if you have anysuggestion on how to get tailwind working on previews version help me with it i tried looking in other issues open but i found nothing

tailwind-in-js react-redux tailwind-css react-native reactjs
2 Answers

I think this solution might help you. At least it did for me.

Or if you need to use previous react-scripts versions then this solution might help.

Hope you solve the issue, it was quite frustrating for me :)

user_181000330

This might help:

https://v2.tailwindcss.com/docs/installation#post-css-7-compatibility-build

As of v2.0, Tailwind CSS depends on PostCSS 8. Because PostCSS 8 is only a few months old, many other tools in the ecosystem haven’t updated yet.

To help bridge the gap until everyone has updated, we also publish a PostCSS 7 compatibility build as @tailwindcss/postcss7-compat on npm.

If you run into the error mentioned above, uninstall Tailwind and re-install using the compatibility build instead:

npm uninstall tailwindcss postcss autoprefixer
npm install -D tailwindcss@npm:@tailwindcss/postcss7-compat postcss@^7 autoprefixer@^9

The compatibility build is identical to the main build in every way, so you aren’t missing out on any features or anything like that.

Once the rest of your tools have added support for PostCSS 8, you can move off of the compatibility build by re-installing Tailwind and its peer-dependencies using the latest tag:

npm uninstall tailwindcss
npm install -D tailwindcss@latest postcss@latest autoprefixer@latest
user_176235180
Related