2

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

melhasso
  • 41
  • 3

2 Answers2

1

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 :)

monk13
  • 11
  • 2
  • 1
    You should also c/p the part of the code which helped you, don't just attach the link. Because the link could break in the future and your answer would not be helpful at all in that case. – Kapobajza Jul 27 '22 at 08:52
  • Good point, thanks. Will do when I am free. – monk13 Jul 27 '22 at 09:00
0

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
ERA
  • 93
  • 7