React.js - change config path in CRA v5

[ornakash]

What version of Tailwind CSS are you using?
3.0.11

What build tool (or framework if it abstracts the build tool) are you using?
"react": "^17.0.2",
"autoprefixer": "^10.4.7",
"postcss": "^8.4.14",

What browser are you using?
Chrome

What operating system are you using?
Windows

Describe your issue
The problem is that after I upgrade from v2 to v3, I can't change the config path like I did in v2.
Here's an example:

postcss.config.js

module.exports = {
  plugins: {
    tailwindcss: { config: "./src/tailwindcss.config.js" },
  },
};

Because tailwindCSS v3.0.11 needs creact-react-app v5, it won't let me use postCSS options to change the path. Is there a solution for this?

Thank you!

[adamwathan]

Unfortunately not, CRA is extremely locked down and they don't let you customize the PostCSS configuration 😔 I would recommend using Vite instead of CRA — it is faster and easy to customize, with no limitations on things like PostCSS configuration.

Here's the relevant PR on CRA for adding support for custom PostCSS configurations:

facebook/create-react-app#11926

I don't expect it will ever be merged unfortunately. Here's some other context:

facebook/create-react-app#11717 (comment)

Closing since nothing we can do about it unfortunately other than recommend other tools.

[ksbulgakov]

You can use craco with Felipe Zavan example

[ornakash]

@ksbulgakov thank you! it worked!

[anthonyrende]

You can use craco with Felipe Zavan example

+1 working, thank you! ❤️
this was final piece of the puzzle, after too many hours-- guys, webpack is pain...

heres my set up:

{

  "dependencies": {
    "@craco/craco": "^7.0.0-alpha.7",
    "autoprefixer": "^9.8.8",
    "gsap": "^3.9.1",
    "locomotive-scroll": "^4.1.4",
    "node-sass": "^5.0.0",
    "postcss": "^8.4.6",
    "react": "^18.1.0",
    "react-dom": "^18.1.0",
    "react-locomotive-scroll": "^0.2.0",
    "react-router-dom": "^6.2.1",
    "react-scripts": "^5.0.0",
    "react-tsparticles": "^2.0.6",
    "three": "^0.140.2",
    "tsparticles": "^2.2.1"
  },

....
  devDependencies": {
    "@tailwindcss/forms": "^0.4.1",
    "autoprefixer": "^9.8.6",
    "tailwindcss": "^3.1.8",
    "webpack-cli": "^4.10.0"
  }
}

node -v
v14.17.5