Added multiple package managers to all instructions (#793)

src/routes/configuration/typescript.mdx

@@ -52,11 +52,59 @@ Transitioning from JavaScript to TypeScript in a Solid project offers the benefi
 
 1. Install TypeScript into your project.
 
+<TabsCodeBlocks>
+<div id="npm">
 ```bash frame="none"
-npm install --save-dev typescript
+npm i --save-dev typescript
 ```
+</div>
 
-2. Run `npx tsc --init` to generate a `tsconfig.json` file.
+<div id="yarn">
+```bash frame="none"
+yarn add --dev typescript
+```
+</div>
+
+<div id="pnpm">
+```bash frame="none"
+pnpm add --save-dev typescript
+```
+</div>
+
+<div id="bun">
+```bash frame="none"
+bun add --save-dev typescript
+```
+</div>
+</TabsCodeBlocks>
+
+2. Run the following command to generate a `tsconfig.json` file.
+
+<TabsCodeBlocks>
+<div id="npm">
+```bash frame="none"
+npx tsc --init
+```
+</div>
+
+<div id="yarn">
+```bash frame="none"
+yarn dlx tsc --init
+```
+</div>
+
+<div id="pnpm">
+```bash frame="none"
+pnpm dlx tsc --init
+```
+</div>
+
+<div id="bun">
+```bash frame="none"
+bunx tsc --init
+```
+</div>
+</TabsCodeBlocks>
 
 3. Update the contents of the `tsconfig.json` to match Solid's configuration:
 

src/routes/guides/deployment-options/cloudflare.mdx

@@ -65,11 +65,21 @@ npm i -g wrangler
 ```
 </div>
 
-<div id="yarn">```bash frame="none" yarn global add wrangler ```</div>
+<div id="yarn">
+```bash frame="none" 
+yarn global add wrangler 
+```
+</div>
 
 <div id="pnpm">
 ```bash frame="none"
-pnpm i -g wrangler
+pnpm add -g wrangler
+```
+</div>
+
+<div id="bun">
+```bash frame="none"
+bun add -g wrangler
 ```
 </div>
 </TabsCodeBlocks>
@@ -82,10 +92,35 @@ wrangler login
 
 3. Execute the following commands to build your project and deploy it using Wrangler:
 
+<TabsCodeBlocks>
+<div id="npm">
 ```bash frame="none"
 npm run build
-npx wrangler pages publish dist
+wrangler pages publish dist
+```
+</div>
+
+<div id="yarn">
+```bash frame="none"
+yarn build
+wrangler pages publish dist
 ```
+</div>
+
+<div id="pnpm">
+```bash frame="none"
+pnpm build
+wrangler pages publish dist
+```
+</div>
+
+<div id="bun">
+```bash frame="none"
+bun build
+wrangler pages publish dist
+```
+</div>
+</TabsCodeBlocks>
 
 After running these commands, your project should be live.
 While the terminal may provide a link, it's more reliable to check your Cloudflare Pages dashboard for the deployed URL, which usually follows the format `project-name.pages.dev`.

src/routes/guides/deployment-options/firebase.mdx

@@ -23,11 +23,21 @@ npm i -g firebase-tools
 ```
 </div>
 
-<div id="yarn">``` bash yarn global add firebase-tools ```</div>
+<div id="yarn">
+``` bash frame="none" 
+yarn global add firebase-tools 
+```
+</div>
 
 <div id="pnpm">
 ```bash frame="none"
-pnpm i -g firebase-tools
+pnpm add -g firebase-tools
+```
+</div>
+
+<div id="bun">
+```bash frame="none"
+bun add -g firebase-tools
 ```
 </div>
 </TabsCodeBlocks>

src/routes/guides/deployment-options/netlify.mdx

@@ -47,11 +47,21 @@ npm i -g netlify-cli
 ```
 </div>
 
-<div id="yarn">```bash frame="none" yarn global add netlify-cli ```</div>
+<div id="yarn">
+```bash frame="none" 
+yarn global add netlify-cli 
+```
+</div>
 
 <div id="pnpm">
 ```bash frame="none"
-pnpm i -g netlify-cli
+pnpm add -g netlify-cli
+```
+</div>
+
+<div id="bun">
+```bash frame="none"
+bun add -g netlify-cli
 ```
 </div>
 </TabsCodeBlocks>

src/routes/guides/deployment-options/railway.mdx

@@ -78,11 +78,21 @@ npm i -g @railway/cli
 ```
 </div>
 
-<div id="yarn">```bash frame="none" yarn global add @railway/cli ```</div>
+<div id="yarn">
+```bash frame="none" 
+yarn global add @railway/cli 
+```
+</div>
 
 <div id="pnpm">
 ```bash frame="none"
-pnpm i -g @railway/cli
+pnpm add -g @railway/cli
+```
+</div>
+
+<div id="bun">
+```bash frame="none"
+bun add -g @railway/cli
 ```
 </div>
 </TabsCodeBlocks>

src/routes/guides/deployment-options/vercel.mdx

@@ -58,11 +58,21 @@ npm i -g vercel
 ```
 </div>
 
-<div id="yarn">```bash frame="none" yarn global add vercel ```</div>
+<div id="yarn">
+```bash frame="none" 
+yarn global add vercel 
+```
+</div>
 
 <div id="pnpm">
 ```bash frame="none"
-pnpm i -g vercel
+pnpm add -g vercel
+```
+</div>
+
+<div id="bun">
+```bash frame="none"
+bun add -g vercel
 ```
 </div>
 </TabsCodeBlocks>

src/routes/guides/routing-and-navigation.mdx

@@ -22,12 +22,19 @@ npm install @solidjs/router
 
 <div id="yarn">
 ```bash frame="none"
- yarn add @solidjs/router
+yarn add @solidjs/router
 ```
 </div>
+
 <div id="pnpm">
 ```bash frame="none"
-pnpm i @solidjs/router
+pnpm add @solidjs/router
+```
+</div>
+
+<div id="bun">
+```bash frame="none"
+bun add @solidjs/router
 ```
 </div>
 </TabsCodeBlocks>

src/routes/guides/styling-components/less.mdx

@@ -26,7 +26,13 @@ yarn add --dev less
 
 <div id="pnpm">
 ```bash frame="none"
-pnpm i --dev less
+pnpm add --dev less
+```
+</div>
+
+<div id="bun">
+```bash frame="none"
+bun add --dev less
 ```
 </div>
 </TabsCodeBlocks>

src/routes/guides/styling-components/macaron.mdx

@@ -25,7 +25,13 @@ yarn add @macaron-css/core @macaron-css/solid
 
 <div id="pnpm">
 ```bash frame="none"
-pnpm i @macaron-css/core @macaron-css/solid
+pnpm add @macaron-css/core @macaron-css/solid
+```
+</div>
+
+<div id="bun">
+```bash frame="none"
+bun add @macaron-css/core @macaron-css/solid
 ```
 </div>
 </TabsCodeBlocks>

src/routes/guides/styling-components/sass.mdx

@@ -26,7 +26,13 @@ yarn add --dev sass
 
 <div id="pnpm">
 ```bash frame="none"
-pnpm i --dev sass
+pnpm add --dev sass
+```
+</div>
+
+<div id="bun">
+```bash frame="none"
+bun add --dev sass
 ```
 </div>
 </TabsCodeBlocks>

src/routes/guides/styling-components/tailwind.mdx

@@ -25,17 +25,44 @@ yarn add --dev tailwindcss postcss autoprefixer
 
 <div id="pnpm">
 ```bash frame="none"
-pnpm i --save-dev tailwindcss postcss autoprefixer
+pnpm add --save-dev tailwindcss postcss autoprefixer
+```
+</div>
+
+<div id="bun">
+```bash frame="none"
+bun add --save-dev tailwindcss postcss autoprefixer
 ```
 </div>
 </TabsCodeBlocks>
 
 2. Next, run the init command to generate both `tailwind.config.js` and `postcss.config.js`.
 
+<TabsCodeBlocks>
+<div id="npm">
 ```bash frame="none"
-
 npx tailwindcss init -p
 ```
+</div>
+
+<div id="yarn">
+```bash frame="none"
+yarn dlx tailwindcss init -p
+```
+</div>
+
+<div id="pnpm">
+```bash frame="none"
+pnpm dlx tailwindcss init -p
+```
+</div>
+
+<div id="bun">
+```bash frame="none"
+bunx tailwindcss init -p
+```
+</div>
+</TabsCodeBlocks>
 
 3. Since TailwindCSS is configuration-driven, after initializing, a `tailwind.config.js` file will be created at the root of your project directory:
 

src/routes/guides/styling-components/uno.mdx

@@ -24,7 +24,13 @@ yarn add --dev unocss
 
 <div id="pnpm">
 ```bash frame="none"
-pnpm i --save-dev unocss
+pnpm add --save-dev unocss
+```
+</div>
+
+<div id="bun">
+```bash frame="none"
+bun add --save-dev unocss
 ```
 </div>
 </TabsCodeBlocks>