bunwind Tailwind Templates

Bunwind

monorepo demo using Tailwind v4 with npm workspaces, powered by Bun

šŸŒ€ bunwind


bunwind is a minimal monorepo powered by Bun, Tailwind CSS v4, and Next.js using native npm workspaces.

It demonstrates a clean setup for a shared UI package (@bunwind/ui) and a frontend app (@bunwind/web), with a strong focus on modular design, styling with Tailwind v4, and modern TypeScript tooling.


šŸ“š Structure

This README is Step One in setting up the monorepo root.

  • This file/Step One README.md – Root-level setup and configuration
  • Next/Step Two packages/ui/README.md – UI library setup (@bunwind/ui)
  • Final/Step Three packages/web/README.md – Next.js app setup (@bunwind/web)

🧱 Step One: Root Monorepo Setup

1. Create the Monorepo Root

mkdir bunwind && cd bunwind && bun init -y

This command initializes a basic Bun project and generates:

bunwind/
ā”œā”€ā”€ node_modules/
ā”œā”€ā”€ .gitignore
ā”œā”€ā”€ bun.lock
ā”œā”€ā”€ index.ts
ā”œā”€ā”€ package.json
ā”œā”€ā”€ README.md
ā”œā”€ā”€ tsconfig.json

2. Clean the Root

āœ… Delete unnecessary files:

rm index.ts
rm tsconfig.json
rm -rf node_modules
  • index.ts: You are not building or running code from the root. Remove it.
  • tsconfig.json: You are not technically building or running code from the root. Remove it.
  • node_modules/: Bun installs type packages by default here (e.g. @types/bun, typescript, etc.). These are not used at the root and will be reinstalled properly in each workspace as needed.

3. Update package.json

Open the file and edit it to look exactly like this:

{
  "name": "bunwind",
  "private": true,
  "workspaces": ["packages/*"]
}
  • private: true: Prevents accidental publishing of the monorepo root.
  • workspaces: Tells Bun to treat all subfolders inside packages/ as isolated workspace packages.
  • Remove all other fields. There should be no main, exports, module, dependencies, or devDependencies here.

This is the minimal and correct monorepo root package.json.


4. āœ… No Additional Dependencies Required

You do not need to install any packages at the root level.

Bun and TypeScript both support baseUrl and paths natively. No runtime or node modules are required at the root unless you later add tooling (like Biome, ESLint, Prettier, etc.). We will configure TypeScript properly inside each workspace where needed — and those packages will install their own typescript if required.


āœ… Final Structure

After following all steps, your root directory should look like this:

bunwind/
ā”œā”€ā”€ .gitignore
ā”œā”€ā”€ bun.lock
ā”œā”€ā”€ package.json         āœ… Clean and minimal
└── README.md            āœ… This file

šŸš€ Next Step - Create the Packages Directory

From the root (this) directory run:

mkdir packages && cd packages && mkdir ui && cd ui && bun init -y

We continue with the next step in the packages/ui/README.md file

Top categories

tailwind logo

Need a Tailwind website built?

Hire a professional TailwindCSS developer today.
Loading Svelte Themes