How to setup Postcss, Tailwind, React, and Webpack from Scratch

I want to create a shared react component for a monorepo with tailwindcss. However, while reading the document, it was found that tailwind uses craco. Meanwhile I want to use webpack. And it definitely doesn't suit my needs. So I searched everywhere, to find setting everything up from scratch.

.
├── babel.config.js
├── package.json
├── postcss.config.js
├── src
│   ├── App.js
│   ├── index.css
│   ├── index.html
│   └── index.js
├── tailwind.config.js
└── webpack.config.js

The following are some of my notes. I hope this helps people with similar needs to mine.

• How to integrate postcss and webpack

  Step by step about how to use postcss & postcss-cli. And then integrate them with webpack from scratch. It will be used when using tailwind.

• How to integrate tailwind and webpack

  This is a basic foundation setup, for using tailwind in webpack. It will be used when using react.

• How to integrate tailwind, react and webpack

  Step by step how to use tailwind together with react and webpack. It will be used when create shared components.

• How to setup react shared components in monorepo with tailwind, webpack and npm workspace

  Set up the react-tailwind shared component in a monorepo. It will be used when you have some modules with same components.