Use craco to change Create-React-App project configuration

1. Why use craco?

Using the project created by Create-React-App, we can use the eject command to pop up the configuration items, but the eject command is irreversible, and we need to manage the configuration items by ourselves after executing the command.

craco is a tool for overriding configuration using Create-React-App.
Official website https://craco.js.org/docs/getting-started/

2. Installation

npm i -D @craco/craco

3. Add configuration files

Create a new craco.config.js file in the project root directory, and configure it in this file.

$ touch craco.config.js

For example to configure tailwindcss:

Added tailwindcss and autoprefixer as PostCSS plugins.

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

Fourth, modify the package.json startup script command

Update the scripts in the package.json file, and replace react-scripts with craco for all scripts except eject.

"scripts": {
    
    
-  "start": "react-scripts start"
-  "build": "react-scripts build"
-  "test": "react-scripts test"

+  "start": "craco start"
+  "build": "craco build"
+  "test": "craco test"
}

5. Pay attention to version matching

The craco version needs to match the create-react-app version.