30

I am trying to use tailwindCSS in a ReactJS app

These are the scripts commands in package.json file

  "scripts": {
    "start": "craco start",
    "build": "craco build",
    "test": "craco test",
    "eject": "react-scripts eject"
  }

This is my craco.config.js

module.exports = {
    style: {
        postcss: {
            plugins: [
                require('tailwindcss'),
                require('autoprefixer'),
            ],
        },
    },
}

When I am used npm run start command, I am facing this error

TypeError: match.loader.options.plugins is not a function
    at extendsPostcss (C:\Development\Open Source\Learning Hub\react\node_modules\@craco\craco\lib\features\webpack\style\postcss.js:54:51)
    at overrideLoader (C:\Development\Open Source\Learning Hub\react\node_modules\@craco\craco\lib\features\webpack\style\postcss.js:97:9)
    at C:\Development\Open Source\Learning Hub\react\node_modules\@craco\craco\lib\features\webpack\style\postcss.js:118:13
    at Array.forEach (<anonymous>)
    at overridePostcss (C:\Development\Open Source\Learning Hub\react\node_modules\@craco\craco\lib\features\webpack\style\postcss.js:117:17)
    at overrideStyle (C:\Development\Open Source\Learning Hub\react\node_modules\@craco\craco\lib\features\webpack\style\style.js:9:25)
    at mergeWebpackConfig (C:\Development\Open Source\Learning Hub\react\node_modules\@craco\craco\lib\features\webpack\merge-webpack-config.js:77:30)
    at overrideWebpackDev (C:\Development\Open Source\Learning Hub\react\node_modules\@craco\craco\lib\features\webpack\override.js:11:36)
    at C:\Development\Open Source\Learning Hub\react\node_modules\@craco\craco\scripts\start.js:27:5

Things that I have tried :

  1. Reinstall node_modules

Got this error, when I tried to do that

$ npm i @craco/craco
npm ERR! code ERESOLVE
npm ERR! ERESOLVE unable to resolve dependency tree
npm ERR!
npm ERR! While resolving: first-react-app@0.1.0
npm ERR! Found: react-scripts@5.0.0
npm ERR! node_modules/react-scripts
npm ERR!   react-scripts@"5.0.0" from the root project
npm ERR!
npm ERR! Could not resolve dependency:
npm ERR! peer react-scripts@"^4.0.0" from @craco/craco@6.4.3
npm ERR! node_modules/@craco/craco
npm ERR!   @craco/craco@"*" from the root project
npm ERR!
npm ERR! Fix the upstream dependency conflict, or retry
npm ERR! this command with --force, or --legacy-peer-deps
npm ERR! to accept an incorrect (and potentially broken) dependency resolution.
0xMukesh
  • 447
  • 1
  • 7
  • 10

6 Answers6

52

Have you solved your problem? There is a solution to the problem. https://github.com/facebook/create-react-app/issues/11777

try to replace "postcss" with "postcssOptions" in craco config I had the same problem , this method works for me.

weiwei
  • 552
  • 1
  • 3
  • 6
23

I replaced postcss with postOptions in carco.config.js and it's working !

sajid hussain
  • 375
  • 2
  • 6
  • This answer is wrong. Using `postOptions` has the same effect as removing it altogether. – Nick Oct 22 '22 at 12:06
13

It looks like the Tailwind configuration from CRACO is not needed anymore.

https://github.com/facebook/create-react-app/issues/11771#issuecomment-997217680

Look at Tailwind 3.0 install steps: https://tailwindcss.com/docs/guides/create-react-app

Свободен Роб
  • 2,579
  • 2
  • 20
  • 26
3

craco config is no longer needed in tailwind docs however in the solutions mentioned if you replace

postcss with postOptions on craco.config.js it will work too

s0han
  • 41
  • 2
2

[WARNING] The most upvoted answer that suggesting changing the postcss to postcssOptions may not what you expect.

try to replace "postcss" with "postcssOptions" in craco config

Currently, craco doesn't support postcssOptions, so changing the key just make craco ignore your configurations.

patching craco would be better if you need custom configs.

Cosnaye Chen
  • 21
  • 1
-1

I replaced postcss with postOptions and it works for me

Otis Weah
  • 1