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.