https://pandao.github.io/editor.md/en.html#%F0%9F%91%89%20Step%205%20Install%20Tailwind%20CSS%20with%20Parcel

TOCHECK pnpm list --depth=0 pnpm list --depth -1

Completed

✅ Step 1: Root-Level Setup
✅ Step 2: Create Workspace Folders
✅ Step 3: Confiture Workspace
🔜 Step 4: Configure Project . Parcel Setup (or other bundler) in my-osm
🔄 Step 4b: React & ReactDOM Installation in my-osm
✅ Step 5: Tailwind CSS Installation in my-osm
🔜 Step 5.1: Setup additional project SGS Pending
🔜 Step 6: Setup in react-textbox
🔜 Step 7: Link Packages via PNPM
🧾 Post-Monorepo Checklist (Reminder List)

👉 Step 6: Link local package in consumer app

👉 Step 7: Create Second SGS project

🏠 Select root folder

👉 Step 6: Link local package in consumer app
👉 Step 7: Create Second SGS project
- 🏠 Select root folder
👉 Step 1: Create Root-Level Setup
👉 Step 2: Create Workspace Folder Structure
👉 Step 3 Configure the Workspace Manifest
- 3.1 Create pnpm-workspace.yaml (in root folder)
- 3.2 Configure pnpm-workspace.yaml
👉 Step 4 Configure my-osm project
- 4.1 Install Parcel as the Bundler
- 4.2 Configure project
  - 4.2.3 Create a minimal React file to test setup
  - 4.2.4 Run the Dev Server
👉 Step 5 Install Tailwind CSS for Project with Parcel
🧠 Why This Structure?
📁 Batch File (init-tailwind.bat)
✅ Tooling Notes
🧠 VSCode Tips & Extensions (Reminder)

Monorepo Setup Notes

👉 Step 1: Create Root-Level Setup

🏠 Select root folder

Establish a common root so all projects (apps, packages, shared code) that can work under one workspace using PNPM.

Home directory (root of the workspace) for this setup:

📂 D:\WorkArea\Projects\

🧩 Initialize Workspace Root

As per the planned folder structure, the root of the workspace is:

D:\WorkArea\Projects\

📦 Install pnpm package

Install pnpm globally 🌐, that replaces npm

> npm install -g pnpm

Infact it is not a replacement, but you can use npm simultaniously You’ll use pnpm install, pnpm run, pnpm add, etc. instead of npm equivalents.

📦Initialize pnpm

Open a terminal 💻 and navigate to the root folder

> cd D:\WorkArea\Projects\React

🚀 Run this command inside root folder.

> pnpm init

It will create a package.json that looks something like this:

{
  "name": "projects",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "packageManager": "pnpm@10.7.1"
}

Although it created the default package.json, some entries can be removed to keep it miminal.

🧹 Suggested Cleaned-Up Version:

{
  "name": "projects",
  "version": "1.0.0",
  "description": "Root of the React monorepo",
  "scripts": {},
  "license": "ISC",
  "packageManager": "pnpm@10.7.1"
}

Note: This package.config is only for managing the workspace — not an app

🧠 Why This Step:

Declares this folder as the workspace root
Tells PNPM which folders to treat as sub-projects (workspaces)
The private: true field is required for workspace roots to avoid accidental publishing

✅ Recommended Minimal Changes for Monorepo Root

Field	Keep/Delete?	Why / Notes
"name"	✅ Keep	Name is fine, can even be lowercase like "projects"
"version"	✅ Keep	Versioning is fine, not used at the root for your case
"description"	🟡 Optional	You can leave blank or write “Monorepo root” for clarity
"main"	❌ Delete	Not needed for monorepo root; root isn’t an importable package
"scripts"	✅ Keep/edit	You can delete the "test" script or leave it for now
"keywords"	🟡 Optional	Not needed unless you want to document metadata
"author"	🟡 Optional	Your name here, for documentation only
"license"	✅ Keep	ISC is fine, or you can change based on your needs
"packageManager"	✅ Keep	PNPM adds this automatically—helps ensure consistent package manager usage

Now the folder structure looks like this:

D:\WorkArea\Projects\
└──📦 package.json              ← 📌 Root of workspace

Finalize PNPM Setup at root folder

Open a terminal 💻 and navigate to the root folder

> cd D:\WorkArea\Projects\React

🚀 Run this command inside root folder.

> pnpm install

Now, PNPM will automatically:

Create a single pnpm-lock.yaml at the root
Create node_modules shared folder to store all the node modules to be used for all the projects.

This detects all package.json files in the defined workspace (There is only one in root now)

Now the folder structure looks like this:

D:\WorkArea\Projects\
├──📁 node_mdules/         👈  New folder
├──📦 package.json
└──🛠️+🔒 pnpm-lock.yaml    👈  New  file

✨ TL;DR

Home directory (root of the workspace) for this setup:

Path: 📂 D:\WorkArea\Projects\

> npm install -g pnpm

> cd D:\WorkArea\Projects\React

> pnpm init

It will create a package.json and the folder structure looks like this:

D:\WorkArea\Projects\
└──📦 package.json              ← 📌 Root of workspace

> pnpm install

Now the folder structure looks like this:

D:\WorkArea\Projects\
├──📁 node_mdules/         👈  New folder
├──📦 package.json
└──🛠️+🔒 pnpm-lock.yaml    👈  New  file

👉 Step 2: Create Workspace Folder Structure

Before configuring the workspace, a minimal workspace structure is created.

2.1 Create Workspace Folder Structure

Ceate following folder structure under root folder D:\WorkArea\Projects\

D:\WorkArea\Projects\
├──📁 node_mdules/
├──📁 frontend/             👈 New folder
│   ├──📁 apps/             👈 New folder
│   ├──📁 packages/         👈 New folder
├──📦 package.json
└──🛠️+🔒 pnpm-lock.yaml

🧠 Why This Structure:

Folder	Purpose
apps/	For apps or demo projects. Keeps them separate from libraries.
packages/	All your reusable components go here. Encourages modular design.
Root files	Workspace management only — no code. Keeps things clean.
	`package.json` Declares this folder as a workspace root
	`pnpm-workspace.yaml` Defines the packages/projects to include from anywhere in the folder tree
	`pnpm-lock.yaml` Locks all dependencies across your entire monorepo, ensuring reproducible installs

2.2 Configure Project Folder Structure

Similarly a minimal project structure is created.

This mono repo will have the following two projects SGS and my-osm

Update the folder structure to represent this

D:\WorkArea\Projects\
...
├──📁 frontend/
│   ├──📁 apps/
│   │   ├──📁 SGS/         ← 📌 Root of project SGS
│   │   └──📁 my-osm/  ← 📌 Root of project my-osm
...

📦Initialize the projects

Open a terminal 💻 and navigate to the root folder of each projects and run pnpm init for each projects.

For example, for my-osm project:

💻 cd D:\WorkArea\Projects\React\frontend\apps\my-osm
💻 pnpm init

It will create a package.json that looks something like this:

{
  "name": "my-osm",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "packageManager": "pnpm@10.7.1"
}

As an alternate you can add a minimal package.json manually

{
  "name": "my-osm",
  "version": "1.0.0",
}

Repeat it for SGS project.

Similarly, do the same thing on creaing any new project.

Now the folder structure will represent this:

D:\WorkArea\Projects\
├──📁 frontend/
│   ├──📁 apps/
│   │   ├──📁 SGS/
│   │   |       └──📦 package.json     ← 📌 Root of project SGS
│   │   └──📁 my-osm/
│   │   |       └──📦 package.json     ← 📌 Root of project mh-osm

2.3 Verify project configurations

Run this in the root folder:

Path: D:\WorkArea\Projects\:

> pnpm install

This will result in one of the following:

No node_modules installed yet or No package.json found in D:\WorkArea\Projects\
You’ll see a .pnpm/ folder created
You should not see errors like “No workspace packages found”

Then run:

> pnpm list -r

If it shows your workspace packages (e.g., SGS, my-osm), the setup is correct. The output should be something like this:

react-monorepo
├── SGS
└── my-osm

Sometime, this may not give the expected result. Try the following instead.

pnpm -r exec -- node -p "'📦 Detected: ' + require('./package.json').name"

This will show all the list of all the configured packages, something like:

📦 Detected: SGS
📦 Detected: my-osm

This might also include the package.json at root folder D:\WorkArea\Projects\ and the result could includ this:

📦 Detected: projects              👈 From root folder `package.json`
📦 Detected: SGS
📦 Detected: my-osm

This confirms PNPM recognizes your workspace correctly.

Just creating the folder will not work. package.config file must exist under each project folder.

✨ TL;DR

Ceate following folder structure under root folder D:\WorkArea\Projects\

D:\WorkArea\Projects\
├──📁 node_mdules/
├──📁 frontend/              👈 New folder
│   ├──📁 apps/               👈 New folder
│   │   ├──📁 SGS/           👈 New folder: Root of project SGS
│   │   ├──📁 my-osm/    👈 New folder: Root of project my-osm
│   ├──📁 packages/        👈 New folder
├──📦 package.json
└──🛠️+🔒 pnpm-lock.yaml

📦Initialize the my-osm project:

> cd D:\WorkArea\Projects\React\frontend\apps\my-osm

> pnpm init

It will create a package.json

Repeat it for SGS project.

Now the folder structure will represent this:

D:\WorkArea\Projects\
├──📁 frontend/
│   ├──📁 apps/
│   │   ├──📁 SGS/
│   │   |       └──📦 package.json     ← 📌 Root of project SGS
│   │   └──📁 my-osm/
│   │   |       └──📦 package.json     ← 📌 Root of project mh-osm

Verify project configurations Run this in the root folder: > cd D:\WorkArea\Projects\

> pnpm install

Then run:

` > pnpm list -r`

💻 pnpm -r exec -- node -p "'📦 Detected: ' + require('./package.json').name"

This will show all the list of all the configured packages, something like:

SGS
my-osm

👉 Step 3 Configure the Workspace Manifest

The pnpm-workspace.yaml file tells PNPM which subfolders or sub-projects (React apps, packages, shared utilities, etc.) in your project tree are part of the workspace

Without this file, PNPM won’t treat your subfolders as a monorepo. Dependencies will still be installed per project — defeating our goal of sharing and hoisting.

3.1 Create `pnpm-workspace.yaml` (in root folder)

Path: D:\WorkArea\Projects\pnpm-workspace.yaml

3.2 Configure `pnpm-workspace.yaml`

Add the following to pnpm-workspace.yaml

packages:
  - 'frontend/apps/*'
  - 'frontend/packages/*'
  - 'shared/*'             (This folder is not yet created)
  - 'backend/*'            (This folder is not yet created)

This tells PNPM which subfolders are part of the workspace.

📁 Folder Meaning

Folder	Meaning
`frontend/apps/*`	All your application projects like `SGS, my-osm`
`frontend/packages/*`	All reusable component packages like react-textbox, react-button.
`shared/*`	Common libraries, helpers, etc. (optional for now).

⚠️ Make sure there's no indentation error — YAML is sensitive to spaces!

👉 Step 4 Configure my-osm project

4.1 Install Parcel as the Bundler

To install Parcel run the following from inside my-osm folder.

pnpm add -D parcel

This will add the following entry in package.json file.

{
  ...
  "devDependencies": {
    "parcel": "^2.14.4"
  }
}

Since Parcel is required only during development and bundling, it should be installed as dev dependency using -D option.

✅ Verify Parcel installation Run the following to verify installation

pnpm list -r parcel

It should be listed as follows under devDependencies

my-osm@1.0.0 D:\deleete\step4\frontend\apps\my-osm

devDependencies:         👈 Note this
parcel 2.14.4

4.2 Configure project

#####4.2.1 Install React & ReactDOM in my-osm Its time to configure the project, by installing the latest versions of react and react-dom.

Open a terminal 💻 and navigate to the root folder of my-osm project

💻 cd D:\WorkArea\Projects\React\frontend\apps\my-osm`
💻 pnpm add react react-dom

Verity installation Once installed, the installation can be verified in two ways.

Method 1: Run this command int the same folder:

> pnpm list -r react react-dom

You should see output something like:

my-osm@1.0.0 D:\deleete\step4\frontend\apps\my-osm

dependencies:
react 19.1.0
react-dom 19.1.0

Method 2:

Check the dependencies section of my-osm/package.json: The file should show the following new entries.

{
   ...
  "dependencies": {
    "react": "^19.1.0",
    "react-dom": "^19.1.0"
  }
}

The version may vary depending on the time of installation

#####4.2.2 Add Entry Point to package.json

Open: D:\WorkArea\Projects\frontend\apps\my-osm\package.json and update it with following content.

{
  "name": "my-osm",
  "version": "1.0.0",
  "scripts": {
    "dev": "parcel index.html"
  }
}

💡 This tells Parcel to start building from index.html, which loads index.jsx.

4.2.3 Create a minimal React file to test setup

index.html

In my-osm, create a new fileindex.html with the following content.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>React Test</title>
  </head>
  <body>
    <div id="root"></div>
    <script type="module" src="./index.jsx"></script>
  </body>
</html>

main.jsx Create main.jsx with the following content.

import React from "react";
import ReactDOM from "react-dom/client";

const App = () => <h1>Hello React!</h1>;

const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(<App />);

4.2.4 Run the Dev Server

Now start the dev server by running the following command in my-osm folder.

pnpm run dev

This command will:

Build the project from index.html
Automatically detect React
Start a dev server at http://localhost:1234/

You can see the output something like this:

Server running at http://localhost:1234
✨ Built in 75ms

Verify in Browser

Open http://localhost:1234 in your browser. It should show:

Hello React!

Now we have a working React app powered by Parcel.

👉 Step 5 Install Tailwind CSS for Project with Parcel

5.1 Install Tailwind CSS

Open a terminal 💻 and navigate to the root folder of my-osm project

> cd D:\WorkArea\Projects\React\frontend\apps\my-osm

Run the following command

> pnpm add tailwindcss @tailwindcss/postcss

This will add install tailwindcss and @tailwindcss/postcss and update package.json as follows

{
  ...
  "dependencies": {
    "react": "^19.1.0",
    "react-dom": "^19.1.0",
    "tailwindcss": "^4.1.4"                             👈 New entry 
    "@tailwindcss/postcss": "^4.1.4",           👈 New entry
    ...
  },
  ...
}

5.2 Configure PostCSS

Create a .postcssrc file in my-osm folder, and enable the @tailwindcss/postcss plugin.

Update the .postcssrc file with the following content

{
  "plugins": {
    "@tailwindcss/postcss": {}
  }
}

5.3 Import Tailwind CSS

Create a index.css file in my-osm folder and add an @import for Tailwind CSS as follows:

@import "tailwindcss";

5.4 Update main.jsx

Update the main.jsx file to reflect implementation of tailwindcss

import React from "react";
import ReactDOM from "react-dom/client";

export const App = () =>
  <div className="p-6 bg-blue-500 text-white text-xl rounded-lg shadow-md">
    Tailwind is working! 🎉
  </div>;
  
const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(<App />);

5.5 Update index.html

Add the above index.css file to the <head> of index.html file.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <link href="./index.css" type="text/css" rel="stylesheet" />          👈 New entry
    <title>Tailwind CSS Test</title>
  </head>
  <body>
    <div id="root"></div>
    <script type="module" src="./main.jsx"></script>
  </body>
</html>

5.6 Start using Tailwind

Start using tailwind by running the dev server

pnpm run dev

Verify in Browser

Open http://localhost:1234 in your browser. It should show the following styled text (blue background, white text).

Tailwind is working! 🎉

Now we have a working React app powered by Parcel, intergrated with Tailwind CSS.

>>end of step 5

D:\WorkArea\Projects\
├── frontend/
│   ├── apps/
│   │   ├── SGS/
│   │   └── my-osm/
│   ├── packages/
│   │   ├── react-textbox/
│   │   └── react-button/
│   └── configs/
│       ├── tailwind.common.config.js
│       ├── postcss.common.config.js
│       └── parcel.common.config.js
│
├── backend/
│   ├── auth-api/
│   └── billing-service/
│
├── shared/
│   ├── logger/
│   ├── constants/
│   └── date-utils/
│
├── scripts/
│   └── sync-version.js
│
├── .vscode/
│   └── settings.json
├── .editorconfig
├── .gitignore
├── package.json              ← 📌 Root of your workspace
├── pnpm-lock.yaml
└── pnpm-workspace.yaml       ← 📌 Workspace map

🧠 Why This Structure?

Folder	Purpose
apps/	For apps or demo projects. Keeps them separate from libraries.
packages/	All your reusable components go here. Encourages modular design.
configs/	Central spot for Tailwind/PostCSS config reuse (optional).
Root files	Workspace management only — no code. Keeps things clean.

✅ Where Should package.json, pnpm-lock.yaml, and pnpm-workspace.yaml Live? These files should always live at the root of your workspace, not inside frontend/ or backend/.

✅ So: They belong in 📁 D:\WorkArea\Projects\

Why?

File Why it lives at the root package.json Declares this folder as a workspace root ("private": true, "workspaces": [...]) pnpm-workspace.yaml Defines the packages/projects to include from anywhere in the folder tree pnpm-lock.yaml Locks all dependencies across your entire monorepo, ensuring reproducible installs

xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx

📁 Batch File (init-tailwind.bat)

@echo off
echo Creating tailwind.config.js...
echo module.exports = { content: ["./index.html", "./src/**/*.{js,jsx}"], theme: { extend: {} }, plugins: [], } > tailwind.config.js

echo Creating postcss.config.js...
echo module.exports = { plugins: { tailwindcss: {}, autoprefixer: {}, }, } > postcss.config.js

echo Done!

✅ Tooling Notes

Tailwind CLI v4.1.3 no longer supports tailwindcss init -p
@tailwindcss/cli was added to restore expected behavior

🧠 VSCode Tips & Extensions (Reminder)

Tailwind CSS IntelliSense
ESLint (to be added globally later)
Prettier (optional)
VSCode Workspace Settings (.code-workspace file - revisit later)

2.1 (removed content)

🧠 Why This Structure:

Folder	Purpose
apps/	For apps or demo projects. Keeps them separate from libraries.
packages/	All your reusable components go here. Encourages modular design.

|configs/ |Central spot for Tailwind/PostCSS config reuse (optional).| |Root files| Workspace management only — no code. Keeps things clean.| | |package.json Declares this folder as a workspace root | | | pnpm-workspace.yaml Defines the packages/projects to include from anywhere in the folder tree | | |pnpm-lock.yaml Locks all dependencies across your entire monorepo, ensuring reproducible installs |

👉 Step 6: Link local package in consumer app

👉 Step 7: Create Second SGS project

🏠 Select root folder

Monorepo Setup Notes

👉 Step 1: Create Root-Level Setup

🏠 Select root folder

🧩 Initialize Workspace Root

📦 Install pnpm package

📦Initialize pnpm

Finalize PNPM Setup at root folder

✨ TL;DR

👉 Step 2: Create Workspace Folder Structure

2.1 Create Workspace Folder Structure

2.2 Configure Project Folder Structure

2.3 Verify project configurations

✨ TL;DR

👉 Step 3 Configure the Workspace Manifest

3.1 Create pnpm-workspace.yaml (in root folder)

3.2 Configure pnpm-workspace.yaml

👉 Step 4 Configure my-osm project

4.1 Install Parcel as the Bundler

4.2 Configure project

4.2.3 Create a minimal React file to test setup

4.2.4 Run the Dev Server

👉 Step 5 Install Tailwind CSS for Project with Parcel

5.1 Install Tailwind CSS

5.2 Configure PostCSS

5.3 Import Tailwind CSS

5.4 Update main.jsx

5.5 Update index.html

5.6 Start using Tailwind

>>end of step 5

🧠 Why This Structure?

📁 Batch File (init-tailwind.bat)

✅ Tooling Notes

🧠 VSCode Tips & Extensions (Reminder)

2.1 (removed content)

3.1 Create `pnpm-workspace.yaml` (in root folder)

3.2 Configure `pnpm-workspace.yaml`