docs(misc): standardize all the install commands with different pm (#21226)

docs/generated/packages/angular/documents/overview.md

@@ -25,14 +25,30 @@ can [fix Nx version mismatches with this recipe](/recipes/tips-n-tricks/keep-nx-
 
 Adding the Angular plugin to an existing Nx workspace can be done with the following:
 
+{% tabs %}
+{% tab label="npm" %}
+
+```shell
+npm add -D @nx/angular
+```
+
+{% /tab %}
+{% tab label="yarn" %}
+
 ```shell
 yarn add -D @nx/angular
 ```
 
+{% /tab %}
+{% tab label="pnpm" %}
+
 ```shell
-npm install -D @nx/angular
+pnpm add -D @nx/angular
 ```
 
+{% /tab %}
+{% /tabs %}
+
 {% callout type="note" title="Angular Tutorials" %}
 For a full tutorial experience, follow the [Angular Standalone Tutorial](/getting-started/tutorials/angular-standalone-tutorial) or the [Angular Monorepo Tutorial](/getting-started/tutorials/angular-monorepo-tutorial)
 {% /callout %}

docs/generated/packages/cypress/documents/overview.md

@@ -15,14 +15,30 @@ Cypress is a test runner built for the modern web. It has a lot of great feature
 
 If the `@nx/cypress` package is not installed, install the version that matches your `nx` package version.
 
-```shell
+{% tabs %}
-yarn add --dev @nx/cypress
+{% tab label="npm" %}
-```
 
 ```shell
-npm install --save-dev @nx/cypress
+npm add -D @nx/cypress
 ```
 
+{% /tab %}
+{% tab label="yarn" %}
+
+```shell
+yarn add -D @nx/cypress
+```
+
+{% /tab %}
+{% tab label="pnpm" %}
+
+```shell
+pnpm add -D @nx/cypress
+```
+
+{% /tab %}
+{% /tabs %}
+
 ## E2E Testing
 
 By default, when creating a new frontend application, Nx will use Cypress to create the e2e tests project.

docs/generated/packages/detox/documents/overview.md

@@ -38,19 +38,24 @@ You can create a new Detox E2E project for an existing mobile project.
 If the `@nx/detox` package is not installed, install the version that matches your `@nx/workspace` version.
 
 {% tabs %}
-{%tab label="npm"%}
+{% tab label="npm" %}
 
-```sh
+```shell
-# npm
+npm add -D @nx/detox
-npm install --save-dev @nx/detox
 ```
 
 {% /tab %}
-{%tab label="yarn"%}
+{% tab label="yarn" %}
 
-```sh
+```shell
-# yarn
+yarn add -D @nx/detox
-yarn add --dev @nx/detox
+```
+
+{% /tab %}
+{% tab label="pnpm" %}
+
+```shell
+pnpm add -D @nx/detox
 ```
 
 {% /tab %}

docs/generated/packages/esbuild/documents/overview.md

@@ -21,7 +21,7 @@ To add the esbuild plugin to an existing workspace, run the following:
 {% tab label="npm" %}
 
 ```shell
-npm install -D @nx/esbuild
+npm add -D @nx/esbuild
 ```
 
 {% /tab %}
@@ -31,6 +31,13 @@ npm install -D @nx/esbuild
 yarn add -D @nx/esbuild
 ```
 
+{% /tab %}
+{% tab label="pnpm" %}
+
+```shell
+pnpm add -D @nx/esbuild
+```
+
 {% /tab %}
 {% /tabs %}
 

docs/generated/packages/eslint-plugin/documents/overview.md

@@ -14,17 +14,24 @@ Make sure to install the `@nx/eslint-plugin` version that matches the version of
 In any Nx workspace, you can install `@nx/eslint-plugin` by running the following commands if the package is not already installed:
 
 {% tabs %}
-{%tab label="npm"%}
+{% tab label="npm" %}
 
 ```shell
-npm i --save-dev @nx/eslint-plugin
+npm add -D @nx/eslint-plugin
 ```
 
 {% /tab %}
-{%tab label="yarn"%}
+{% tab label="yarn" %}
 
 ```shell
-yarn add --dev @nx/eslint-plugin
+yarn add -D @nx/eslint-plugin
+```
+
+{% /tab %}
+{% tab label="pnpm" %}
+
+```shell
+pnpm add -D @nx/eslint-plugin
 ```
 
 {% /tab %}

docs/generated/packages/expo/documents/overview.md

@@ -19,17 +19,24 @@ Make sure to install the `@nx/expo` version that matches the version of `nx` in
 {% /callout %}
 
 {% tabs %}
-{%tab label="npm"%}
+{% tab label="npm" %}
 
 ```shell
-npm i --save-dev @nx/expo
+npm add -D @nx/expo
 ```
 
 {% /tab %}
-{%tab label="yarn"%}
+{% tab label="yarn" %}
 
 ```shell
-yarn add --dev @nx/expo
+yarn add -D @nx/expo
+```
+
+{% /tab %}
+{% tab label="pnpm" %}
+
+```shell
+pnpm add -D @nx/expo
 ```
 
 {% /tab %}

docs/generated/packages/jest/documents/overview.md

@@ -22,14 +22,30 @@ First, install `@nx/jest`, if not already installed using your preferred package
 Make sure to install the `@nx/jest` version that matches the version of `nx` in your repository. If the version numbers get out of sync, you can encounter some difficult to debug errors. You can [fix Nx version mismatches with this recipe](/recipes/tips-n-tricks/keep-nx-versions-in-sync).
 {% /callout %}
 
-```shell
+{% tabs %}
-npm install --save-dev @nx/jest
+{% tab label="npm" %}
-```
 
 ```shell
-yarn add --dev @nx/jest
+npm add -D @nx/jest
 ```
 
+{% /tab %}
+{% tab label="yarn" %}
+
+```shell
+yarn add -D @nx/jest
+```
+
+{% /tab %}
+{% tab label="pnpm" %}
+
+```shell
+pnpm add -D @nx/jest
+```
+
+{% /tab %}
+{% /tabs %}
+
 Once installed, run the `configuration` generator
 
 ```shell

docs/generated/packages/js/documents/overview.md

@@ -11,17 +11,24 @@ Make sure to install the `@nx/js` version that matches the version of `nx` in yo
 In any Nx workspace, you can install `@nx/js` by running the following commands if `@nx/js` package is not installed:
 
 {% tabs %}
-{%tab label="npm"%}
+{% tab label="npm" %}
 
 ```shell
-npm i --save-dev @nx/js
+npm add -D @nx/js
 ```
 
 {% /tab %}
-{%tab label="yarn"%}
+{% tab label="yarn" %}
 
 ```shell
-yarn add --dev @nx/js
+yarn add -D @nx/js
+```
+
+{% /tab %}
+{% tab label="pnpm" %}
+
+```shell
+pnpm add -D @nx/js
 ```
 
 {% /tab %}

docs/generated/packages/nest/documents/overview.md

@@ -27,14 +27,30 @@ Make sure to install the `@nx/nest` version that matches the version of `nx` in
 
 To add the Nest plugin to an existing workspace, run one the following commands:
 
+{% tabs %}
+{% tab label="npm" %}
+
 ```shell
-npm install -D @nx/nest
+npm add -D @nx/nest
 ```
 
+{% /tab %}
+{% tab label="yarn" %}
+
 ```shell
 yarn add -D @nx/nest
 ```
 
+{% /tab %}
+{% tab label="pnpm" %}
+
+```shell
+pnpm add -D @nx/nest
+```
+
+{% /tab %}
+{% /tabs %}
+
 ### Create Applications
 
 You can add a new Nest application with the following command:

docs/generated/packages/next/documents/overview.md

@@ -16,14 +16,21 @@ To add Next.js to an existing Nx workspace, install the `@nx/next` package. Make
 {% tab label="npm" %}
 
 ```shell
-npm install --save-dev @nx/next
+npm add -D @nx/next
 ```
 
 {% /tab %}
 {% tab label="yarn" %}
 
 ```shell
-yarn add --dev @nx/next
+yarn add -D @nx/next
+```
+
+{% /tab %}
+{% tab label="pnpm" %}
+
+```shell
+pnpm add -D @nx/next
 ```
 
 {% /tab %}

docs/generated/packages/node/documents/overview.md

@@ -8,14 +8,30 @@ Make sure to install the `@nx/node` version that matches the version of `nx` in
 
 To add the Node plugin to an existing workspace, run one of the following:
 
-```shell
+{% tabs %}
-# For npm users
+{% tab label="npm" %}
-npm install -D @nx/node
 
-# For yarn users
+```shell
+npm add -D @nx/node
+```
+
+{% /tab %}
+{% tab label="yarn" %}
+
+```shell
 yarn add -D @nx/node
 ```
 
+{% /tab %}
+{% tab label="pnpm" %}
+
+```shell
+pnpm add -D @nx/node
+```
+
+{% /tab %}
+{% /tabs %}
+
 ### Creating Applications
 
 You can add a new application with the following:

docs/generated/packages/nuxt/documents/overview.md

@@ -25,7 +25,7 @@ There are a number of ways to use Nuxt in your existing workspace.
 {% tab label="npm" %}
 
 ```shell
-npm install -D @nx/nuxt
+npm add -D @nx/nuxt
 ```
 
 {% /tab %}
@@ -39,7 +39,7 @@ yarn add -D @nx/nuxt
 {% tab label="pnpm" %}
 
 ```shell
-pnpm install -D @nx/nuxt
+pnpm add -D @nx/nuxt
 ```
 
 {% /tab %}

docs/generated/packages/playwright/documents/overview.md

@@ -14,21 +14,21 @@ If the `@nx/playwright` package is not installed, install the version that match
 {% tab label="npm" %}
 
 ```shell
-npm install --save-dev @nx/playwright
+npm add -D @nx/playwright
 ```
 
 {% /tab %}
 {% tab label="yarn" %}
 
 ```shell
-yarn add --dev @nx/playwright
+yarn add -D @nx/playwright
 ```
 
 {% /tab %}
 {% tab label="pnpm" %}
 
 ```shell
-pnpm i -D @nx/playwright
+pnpm add -D @nx/playwright
 ```
 
 {% /tab %}

docs/generated/packages/react-native/documents/overview.md

@@ -35,17 +35,24 @@ Make sure to install the `@nx/react-native` version that matches the version of
 {% /callout %}
 
 {% tabs %}
-{%tab label="npm"%}
+{% tab label="npm" %}
 
 ```shell
-npm i --save-dev @nx/react-native
+npm add -D @nx/react-native
 ```
 
 {% /tab %}
-{%tab label="yarn"%}
+{% tab label="yarn" %}
 
 ```shell
-yarn add --dev @nx/react-native
+yarn add -D @nx/react-native
+```
+
+{% /tab %}
+{% tab label="pnpm" %}
+
+```shell
+pnpm add -D @nx/react-native
 ```
 
 {% /tab %}

docs/generated/packages/react/documents/overview.md

@@ -16,14 +16,30 @@ Make sure to install the `@nx/react` version that matches the version of `nx` in
 
 To add the React plugin to an existing workspace, run one of the following:
 
-```shell
+{% tabs %}
-# For npm users
+{% tab label="npm" %}
-npm install -D @nx/react
 
-# For yarn users
+```shell
+npm add -D @nx/react
+```
+
+{% /tab %}
+{% tab label="yarn" %}
+
+```shell
 yarn add -D @nx/react
 ```
 
+{% /tab %}
+{% tab label="pnpm" %}
+
+```shell
+pnpm add -D @nx/react
+```
+
+{% /tab %}
+{% /tabs %}
+
 {% callout type="note" title="React Tutorials" %}
 For a full tutorial experience, follow the [React Standalone Tutorial](/getting-started/tutorials/react-standalone-tutorial) or the [React Monorepo Tutorial](/getting-started/tutorials/react-monorepo-tutorial)
 {% /callout %}

docs/generated/packages/remix/documents/overview.md

@@ -20,14 +20,30 @@ can [fix Nx version mismatches with this recipe](/recipes/tips-n-tricks/keep-nx-
 
 Adding the Remix plugin to an existing Nx workspace can be done with the following:
 
+{% tabs %}
+{% tab label="npm" %}
+
+```shell
+npm add -D @nx/remix
+```
+
+{% /tab %}
+{% tab label="yarn" %}
+
 ```shell
 yarn add -D @nx/remix
 ```
 
+{% /tab %}
+{% tab label="pnpm" %}
+
 ```shell
-npm install -D @nx/remix
+pnpm add -D @nx/remix
 ```
 
+{% /tab %}
+{% /tabs %}
+
 ## Using the Remix Plugin
 
 ## Generate a Remix Application

docs/generated/packages/storybook/documents/overview.md

@@ -16,24 +16,24 @@ Make sure to install the `@nx/storybook` version that matches the version of `nx
 {% /callout %}
 
 {% tabs %}
+{% tab label="npm" %}
+
+```shell
+npm add -D @nx/storybook
+```
+
+{% /tab %}
 {% tab label="yarn" %}
 
 ```shell
 yarn add -D @nx/storybook
 ```
 
-{% /tab %}
-{% tab label="npm" %}
-
-```shell
-npm install -D @nx/storybook
-```
-
 {% /tab %}
 {% tab label="pnpm" %}
 
 ```shell
-pnpm install -D @nx/storybook
+pnpm add -D @nx/storybook
 ```
 
 {% /tab %}

docs/generated/packages/vite/documents/overview.md

@@ -70,7 +70,7 @@ Make sure to install the `@nx/vite` version that matches the version of `nx` in
 {% tab label="npm" %}
 
 ```shell
-npm install -D @nx/vite
+npm add -D @nx/vite
 ```
 
 {% /tab %}
@@ -84,7 +84,7 @@ yarn add -D @nx/vite
 {% tab label="pnpm" %}
 
 ```shell
-pnpm install -D @nx/vite
+pnpm add -D @nx/vite
 ```
 
 {% /tab %}

docs/generated/packages/vue/documents/overview.md

@@ -29,7 +29,7 @@ There are a number of ways to use Vue in your existing workspace.
 {% tab label="npm" %}
 
 ```shell
-npm install -D @nx/vue
+npm add -D @nx/vue
 ```
 
 {% /tab %}
@@ -43,7 +43,7 @@ yarn add -D @nx/vue
 {% tab label="pnpm" %}
 
 ```shell
-pnpm install -D @nx/vue
+pnpm add -D @nx/vue
 ```
 
 {% /tab %}

docs/generated/packages/web/documents/overview.md

@@ -14,14 +14,30 @@ Make sure to install the `@nx/web` version that matches the version of `nx` in y
 
 To add the web plugin to an existing workspace, run one of the following:
 
-```shell
+{% tabs %}
-# For npm users
+{% tab label="npm" %}
-npm install -D @nx/web
 
-# For yarn users
+```shell
+npm add -D @nx/web
+```
+
+{% /tab %}
+{% tab label="yarn" %}
+
+```shell
 yarn add -D @nx/web
 ```
 
+{% /tab %}
+{% tab label="pnpm" %}
+
+```shell
+pnpm add -D @nx/web
+```
+
+{% /tab %}
+{% /tabs %}
+
 ### Creating Applications
 
 You can add a new application with the following:

docs/shared/core-features/enforce-module-boundaries.md

@@ -15,10 +15,30 @@ Nx provides an `enforce-module-boundaries` eslint rule that enforces the public
 
 To set up the lint rule, install these dependencies:
 
+{% tabs %}
+{% tab label="npm" %}
+
 ```shell
-npm i @nx/eslint-plugin @nx/devkit
+npm add @nx/eslint-plugin @nx/devkit
 ```
 
+{% /tab %}
+{% tab label="yarn" %}
+
+```shell
+yarn add @nx/eslint-plugin @nx/devkit
+```
+
+{% /tab %}
+{% tab label="pnpm" %}
+
+```shell
+pnpm add @nx/eslint-plugin @nx/devkit
+```
+
+{% /tab %}
+{% /tabs %}
+
 And configure the rule in your root `.eslintrc.json` file:
 
 ```jsonc {% fileName=".eslintrc.json" %}

docs/shared/core-tutorial/01-create-blog.md

@@ -61,17 +61,24 @@ Which tells yarn (or npm) and Nx to look in the `packages` folder for projects t
 To install Eleventy run:
 
 {% tabs %}
-{% tab label="yarn" %}
-
-```shell
-yarn add -D -W @11ty/eleventy@1.0.0
-```
-
-{% /tab %}
 {% tab label="npm" %}
 
 ```shell
-npm install -D @11ty/eleventy@1.0.0
+npm add -D @11ty/eleventy@1.0.0
+```
+
+{% /tab %}
+{% tab label="yarn" %}
+
+```shell
+yarn add -D @11ty/eleventy@1.0.0
+```
+
+{% /tab %}
+{% tab label="pnpm" %}
+
+```shell
+pnpm add -D @11ty/eleventy@1.0.0
 ```
 
 {% /tab %}

docs/shared/deprecated/storybook/migrate-webpack-final-angular.md

@@ -140,12 +140,26 @@ Once you've migrated all your libraries, you can think about removing the root-l
 
 If you choose to opt-in to Webpack 5, by specifying `builder: 'webpack5'` in your project's `.storybook/main.(js|ts)` (as shown above, in the example of a newly generated `main.js` file), don't forget to add the Storybook dependencies for Webpack 5 to work:
 
+{% tabs %}
+{% tab label="npm" %}
+
+```shell
+npm add -D @storybook/builder-webpack5 @storybook/manager-webpack5
+```
+
+{% /tab %}
+{% tab label="yarn" %}
+
 ```shell
 yarn add -D @storybook/builder-webpack5 @storybook/manager-webpack5
 ```
 
-or if you're using `npm`:
+{% /tab %}
+{% tab label="pnpm" %}
 
 ```shell
-npm install --save-dev @storybook/builder-webpack5 @storybook/manager-webpack5
+pnpm add -D @storybook/builder-webpack5 @storybook/manager-webpack5
 ```
+
+{% /tab %}
+{% /tabs %}

docs/shared/deprecated/storybook/migrate-webpack-final-react.md

@@ -205,12 +205,26 @@ Once you've migrated all your libraries, you can think about removing the root-l
 
 If you choose to opt-in to Webpack 5, by specifying `builder: 'webpack5'` in your project's `.storybook/main.(js|ts)` (as shown above, in the example of a newly generated `main.js` file), don't forget to add the Storybook dependencies for Webpack 5 to work:
 
+{% tabs %}
+{% tab label="npm" %}
+
+```shell
+npm add -D @storybook/builder-webpack5 @storybook/manager-webpack5
+```
+
+{% /tab %}
+{% tab label="yarn" %}
+
 ```shell
 yarn add -D @storybook/builder-webpack5 @storybook/manager-webpack5
 ```
 
-or if you're using `npm`:
+{% /tab %}
+{% tab label="pnpm" %}
 
 ```shell
-npm install --save-dev @storybook/builder-webpack5 @storybook/manager-webpack5
+pnpm add -D @storybook/builder-webpack5 @storybook/manager-webpack5
 ```
+
+{% /tab %}
+{% /tabs %}

docs/shared/getting-started/installation.md

@@ -68,7 +68,7 @@ You can install Nx globally. Depending on your package manager, use one of the f
 {% tab label="npm" %}
 
 ```shell
-npm install --global nx@latest
+npm add --global nx@latest
 ```
 
 {% /tab %}
@@ -82,7 +82,7 @@ yarn global add nx@latest
 {% tab label="pnpm" %}
 
 ```shell
-pnpm install --global nx@latest
+pnpm add --global nx@latest
 ```
 
 {% /tab %}

docs/shared/guides/module-federation/faster-builds.md

@@ -89,28 +89,61 @@ take advantage of remote caching and other features it provides.
 
 Then, for React users, install the `@nx/react` plugin; and for Angular users, install the `@nx/angular` plugin.
 
+{% tabs %}
+{% tab label="npm" %}
+
 ```shell
 # If you use React
-npm install --save-dev @nx/react
+npm add -D @nx/react
 
 # If you use Angular
-npm install --save-dev @nx/angular
+npm add -D @nx/angular
-
-# Or with yarn
-yarn add --dev @nx/react
-yarn add --dev @nx/angular
 ```
 
+{% /tab %}
+{% tab label="yarn" %}
+
+```shell
+# If you use React
+yarn add -D @nx/react
+
+# If you use Angular
+yarn add -D @nx/angular
+```
+
+{% /tab %}
+{% tab label="pnpm" %}
+
+```shell
+# If you use React
+pnpm add -D @nx/react
+
+# If you use Angular
+pnpm add -D @nx/angular
+```
+
+{% /tab %}
+{% /tabs %}
+
 Next, generate the host and remote applications.
 
-```shell
+{% tabs %}
-# React
+{% tab label="React" %}
-nx g @nx/react:host host --remotes=shop,cart,about
 
-# Angular
+```shell
+nx g @nx/react:host host --remotes=shop,cart,about
+```
+
+{% /tab %}
+{% tab label="Angular" %}
+
+```shell
 nx g @nx/angular:host host --remotes=shop,cart,about
 ```
 
+{% /tab %}
+{% /tabs %}
+
 {% callout type="note" title="More details" %}
 You can leave off the `--remotes` option and add them later with `nx g @nx/react:remote shop --host=host`
 or `nx g @nx/angular:remote shop --host=host`.

docs/shared/guides/module-federation/micro-frontend-architecture.md

@@ -51,16 +51,25 @@ Keeping the applications independent allows them to be deployed on different cad
 The generator for MFEs is the same as with basic Module Federation. You can use `nx g host` to create a new host
 application, and `nx g remote` for remote applications.
 
+{% tabs %}
+{% tab label="React" %}
+
 ```shell
-# React
 nx g @nx/react:host shell --remotes=shop,cart
 nx g @nx/react:remote about --host=shell
+```
 
-#a Angular
+{% /tab %}
+{% tab label="Angular" %}
+
+```shell
 nx g @nx/angular:host shell --remotes=shop,cart
 nx g @nx/angular:remote about --host=shell
 ```
 
+{% /tab %}
+{% /tabs %}
+
 That is! You can now run `nx serve shell` to develop on the `shell` application, while keeping all remotes static. To
 develop on one or more remote applications, pass the `--devRemotes` option.
 

docs/shared/guides/react-native.md

@@ -134,13 +134,30 @@ When using React Native in Nx, you get the out-of-the-box support for TypeScript
 
 For existing Nx workspaces, install the `@nx/react-native` package to add React Native capabilities to it.
 
-```shell
+{% tabs %}
-npm install @nx/react-native --save-dev
+{% tab label="npm" %}
 
-# Or with yarn
+```shell
-yarn add @nx/react-native --dev
+npm add -D @nx/react-native
 ```
 
+{% /tab %}
+{% tab label="yarn" %}
+
+```shell
+yarn add -D @nx/react-native
+```
+
+{% /tab %}
+{% tab label="pnpm" %}
+
+```shell
+pnpm add -D @nx/react-native
+```
+
+{% /tab %}
+{% /tabs %}
+
 ## Generating an Application
 
 To create additional React Native apps run:

docs/shared/guides/remix.md

@@ -31,10 +31,30 @@ In this recipe, we'll show you how to create a [Remix](https://remix.run) applic
 Make sure to install the `@nx/remix` version that is on the same minor version as the `nx` version in your repository. If the version numbers get out of sync, you can encounter some difficult to debug errors. You can [fix Nx version mismatches with this recipe](/recipes/tips-n-tricks/keep-nx-versions-in-sync).
 {% /callout %}
 
+{% tabs %}
+{% tab label="npm" %}
+
 ```shell
-npm install --save-dev @nx/remix
+npm add -D @nx/remix
 ```
 
+{% /tab %}
+{% tab label="yarn" %}
+
+```shell
+yarn add -D @nx/remix
+```
+
+{% /tab %}
+{% tab label="pnpm" %}
+
+```shell
+pnpm add -D @nx/remix
+```
+
+{% /tab %}
+{% /tabs %}
+
 ## Generate a Remix Application
 
 {% callout type="note" title="Directory Flag Behavior Changes" %}

docs/shared/guides/use-environment-variables-in-angular.md

@@ -29,13 +29,30 @@ The first two options is a matter of changing your build target configuration or
 
 First, install `@types/node` so we can use `process.env` in our code.
 
-```shell
+{% tabs %}
-npm install --save-dev @types/node
+{% tab label="npm" %}
 
-# Or with yarn
+```shell
-yarn add --dev @types/node
+npm add -D @types/node
 ```
 
+{% /tab %}
+{% tab label="yarn" %}
+
+```shell
+yarn add -D @types/node
+```
+
+{% /tab %}
+{% tab label="pnpm" %}
+
+```shell
+pnpm add -D @types/node
+```
+
+{% /tab %}
+{% /tabs %}
+
 Next, update the `build` and `serve` targets (in `project.json` or `angular.json` file), to the following.
 
 ```json lines

docs/shared/guides/using-tailwind-css-in-react.md

@@ -30,13 +30,30 @@ These manual steps are not required if you use the generator from the previous s
 
 ### Step 1: Install Tailwind Dependencies
 
-```shell
+{% tabs %}
-npm install -D tailwindcss@latest postcss@latest autoprefixer@latest
+{% tab label="npm" %}
 
-# or with yarn
+```shell
+npm add -D tailwindcss@latest postcss@latest autoprefixer@latest
+```
+
+{% /tab %}
+{% tab label="yarn" %}
+
+```shell
 yarn add -D tailwindcss@latest postcss@latest autoprefixer@latest
 ```
 
+{% /tab %}
+{% tab label="pnpm" %}
+
+```shell
+pnpm add -D tailwindcss@latest postcss@latest autoprefixer@latest
+```
+
+{% /tab %}
+{% /tabs %}
+
 This installs the requisite tailwind dependencies.
 
 ### Step 2: Initialize Tailwind

docs/shared/migration/lerna-and-nx.md

@@ -42,11 +42,29 @@ To enable Nx support (and thus speed up task running) go through the following s
 
 **1. Install Nx**
 
+{% tabs %}
+{% tab label="npm" %}
+
 ```shell
-npm i nx --save-dev
+npm add -D nx
 ```
 
-(or the yarn/pnpm alternatives).
+{% /tab %}
+{% tab label="yarn" %}
+
+```shell
+yarn add -D nx
+```
+
+{% /tab %}
+{% tab label="pnpm" %}
+
+```shell
+pnpm add -D nx
+```
+
+{% /tab %}
+{% /tabs %}
 
 **2. Adjust your lerna.json**
 

docs/shared/migration/manual.md

@@ -35,7 +35,7 @@ The `apps` directory is the place where your top-level applications will be stor
 {% tab label="Angular" %}
 
 ```shell
-npm install --save-dev @nx/angular
+npm add -D @nx/angular
 # then
 nx generate @nx/angular:application my-application
 ```
@@ -44,7 +44,7 @@ nx generate @nx/angular:application my-application
 {% tab label="React" %}
 
 ```shell
-npm install --save-dev @nx/react
+npm add -D @nx/react
 # then
 nx generate @nx/react:application my-application
 ```

docs/shared/migration/migration-angularjs.md

@@ -41,10 +41,30 @@ At the next prompt, you can choose whether to use [Nx Cloud](https://nx.app) or
 
 Your new workspace won’t have much in it because of the `apps` preset. You’ll need to generate an application to have some structure created. Add the Angular plugin to your workspace:
 
+{% tabs %}
+{% tab label="npm" %}
+
 ```shell
-npm install -D @nx/angular
+npm add -D @nx/angular
 ```
 
+{% /tab %}
+{% tab label="yarn" %}
+
+```shell
+yarn add -D @nx/angular
+```
+
+{% /tab %}
+{% tab label="pnpm" %}
+
+```shell
+pnpm add -D @nx/angular
+```
+
+{% /tab %}
+{% /tabs %}
+
 For this example, we will use Karma and Protractor, the most common unit test runner and e2e test runner for AngularJS.
 
 {% callout type="note" title="Unit & E2E tests" %}
@@ -365,10 +385,30 @@ So far, you’ve mostly gotten already existing code and processes to work. This
 
 But migrating AngularJS code means we need to switch some of our tools to a more modern tool stack. Specifically, using webpack and babel is going to allow us to take advantage of Nx more easily. Becoming an expert in these build tools is outside the scope of this article, but I’ll address some AngularJS specific concerns. To get started, install these new dependencies:
 
+{% tabs %}
+{% tab label="npm" %}
+
 ```shell
-npm install -D @nx/web babel-plugin-angularjs-annotate
+npm add -D @nx/web babel-plugin-angularjs-annotate
 ```
 
+{% /tab %}
+{% tab label="yarn" %}
+
+```shell
+yarn add -D @nx/web babel-plugin-angularjs-annotate
+```
+
+{% /tab %}
+{% tab label="pnpm" %}
+
+```shell
+pnpm add -D @nx/web babel-plugin-angularjs-annotate
+```
+
+{% /tab %}
+{% /tabs %}
+
 Nx already has most of what you need for webpack added as a dependency. `@nx/web` contains the [executors](/core-features/plugin-features/use-task-executors) we need to use to build and serve the application with webpack and
 `babel-plugin-angularjs-annotate` is going to accomplish the same thing that `browserify-ngannotate` previously did in gulp: add dependency injection annotations.
 
@@ -572,10 +612,30 @@ Unit testing can be an important part of any code migration. If you migrate your
 
 You need a few dependencies for AngularJS unit testing that Nx doesn’t provide by default:
 
+{% tabs %}
+{% tab label="npm" %}
+
 ```shell
-npm install -D angular-mocks@1.5.11 karma-webpack
+npm add -D angular-mocks@1.5.11 karma-webpack
 ```
 
+{% /tab %}
+{% tab label="yarn" %}
+
+```shell
+yarn add -D angular-mocks@1.5.11 karma-webpack
+```
+
+{% /tab %}
+{% tab label="pnpm" %}
+
+```shell
+pnpm add -D angular-mocks@1.5.11 karma-webpack
+```
+
+{% /tab %}
+{% /tabs %}
+
 Earlier, you configured this app to use Karma as its unit test runner. Nx has provided a Karma config file for you, but you’ll need to modify it to work with AngularJS:
 
 ```javascript

docs/shared/npm-tutorial/package-based.md

@@ -67,10 +67,30 @@ export const isEven = (x: number) => x % 2 === 0;
 
 Next install TypeScript (notice we're using `tsc` for the `build` script in `package.json` above). While we could install TypeScript at the package-level, it is more convenient to have it globally for the entire monorepo. Run the following command at the root of your workspace.
 
+{% tabs %}
+{% tab label="npm" %}
+
 ```shell
-npm i typescript -D -W
+npm add -D typescript
 ```
 
+{% /tab %}
+{% tab label="yarn" %}
+
+```shell
+yarn add -D typescript
+```
+
+{% /tab %}
+{% tab label="pnpm" %}
+
+```shell
+pnpm add -D typescript
+```
+
+{% /tab %}
+{% /tabs %}
+
 Next run your `build` script with:
 
 ```shell
@@ -136,10 +156,30 @@ The `workspaces` property in the root-level `package.json` tells NPM to create l
 
 At the root of your workspace run:
 
+{% tabs %}
+{% tab label="npm" %}
+
 ```shell
 npm install
 ```
 
+{% /tab %}
+{% tab label="yarn" %}
+
+```shell
+yarn
+```
+
+{% /tab %}
+{% tab label="pnpm" %}
+
+```shell
+pnpm install
+```
+
+{% /tab %}
+{% /tabs %}
+
 NPM will create a Symbolic Link in your file system at: `node_modules/is-even` and `node_modules/is-odd`, so they reflect changes to your `packages/is-even` and `packages/is-odd` directories as they happen.
 
 ## Task Dependencies

docs/shared/packages/angular/angular-plugin.md

@@ -25,14 +25,30 @@ can [fix Nx version mismatches with this recipe](/recipes/tips-n-tricks/keep-nx-
 
 Adding the Angular plugin to an existing Nx workspace can be done with the following:
 
+{% tabs %}
+{% tab label="npm" %}
+
+```shell
+npm add -D @nx/angular
+```
+
+{% /tab %}
+{% tab label="yarn" %}
+
 ```shell
 yarn add -D @nx/angular
 ```
 
+{% /tab %}
+{% tab label="pnpm" %}
+
 ```shell
-npm install -D @nx/angular
+pnpm add -D @nx/angular
 ```
 
+{% /tab %}
+{% /tabs %}
+
 {% callout type="note" title="Angular Tutorials" %}
 For a full tutorial experience, follow the [Angular Standalone Tutorial](/getting-started/tutorials/angular-standalone-tutorial) or the [Angular Monorepo Tutorial](/getting-started/tutorials/angular-monorepo-tutorial)
 {% /callout %}

docs/shared/packages/cypress/cypress-plugin.md

@@ -15,14 +15,30 @@ Cypress is a test runner built for the modern web. It has a lot of great feature
 
 If the `@nx/cypress` package is not installed, install the version that matches your `nx` package version.
 
-```shell
+{% tabs %}
-yarn add --dev @nx/cypress
+{% tab label="npm" %}
-```
 
 ```shell
-npm install --save-dev @nx/cypress
+npm add -D @nx/cypress
 ```
 
+{% /tab %}
+{% tab label="yarn" %}
+
+```shell
+yarn add -D @nx/cypress
+```
+
+{% /tab %}
+{% tab label="pnpm" %}
+
+```shell
+pnpm add -D @nx/cypress
+```
+
+{% /tab %}
+{% /tabs %}
+
 ## E2E Testing
 
 By default, when creating a new frontend application, Nx will use Cypress to create the e2e tests project.

docs/shared/packages/detox/detox-plugin.md

@@ -38,19 +38,24 @@ You can create a new Detox E2E project for an existing mobile project.
 If the `@nx/detox` package is not installed, install the version that matches your `@nx/workspace` version.
 
 {% tabs %}
-{%tab label="npm"%}
+{% tab label="npm" %}
 
-```sh
+```shell
-# npm
+npm add -D @nx/detox
-npm install --save-dev @nx/detox
 ```
 
 {% /tab %}
-{%tab label="yarn"%}
+{% tab label="yarn" %}
 
-```sh
+```shell
-# yarn
+yarn add -D @nx/detox
-yarn add --dev @nx/detox
+```
+
+{% /tab %}
+{% tab label="pnpm" %}
+
+```shell
+pnpm add -D @nx/detox
 ```
 
 {% /tab %}

docs/shared/packages/esbuild/esbuild-plugin.md

@@ -21,7 +21,7 @@ To add the esbuild plugin to an existing workspace, run the following:
 {% tab label="npm" %}
 
 ```shell
-npm install -D @nx/esbuild
+npm add -D @nx/esbuild
 ```
 
 {% /tab %}
@@ -31,6 +31,13 @@ npm install -D @nx/esbuild
 yarn add -D @nx/esbuild
 ```
 
+{% /tab %}
+{% tab label="pnpm" %}
+
+```shell
+pnpm add -D @nx/esbuild
+```
+
 {% /tab %}
 {% /tabs %}
 

docs/shared/packages/eslint/eslint-plugin.md

@@ -14,17 +14,24 @@ Make sure to install the `@nx/eslint-plugin` version that matches the version of
 In any Nx workspace, you can install `@nx/eslint-plugin` by running the following commands if the package is not already installed:
 
 {% tabs %}
-{%tab label="npm"%}
+{% tab label="npm" %}
 
 ```shell
-npm i --save-dev @nx/eslint-plugin
+npm add -D @nx/eslint-plugin
 ```
 
 {% /tab %}
-{%tab label="yarn"%}
+{% tab label="yarn" %}
 
 ```shell
-yarn add --dev @nx/eslint-plugin
+yarn add -D @nx/eslint-plugin
+```
+
+{% /tab %}
+{% tab label="pnpm" %}
+
+```shell
+pnpm add -D @nx/eslint-plugin
 ```
 
 {% /tab %}

docs/shared/packages/expo/expo-plugin.md

@@ -19,17 +19,24 @@ Make sure to install the `@nx/expo` version that matches the version of `nx` in
 {% /callout %}
 
 {% tabs %}
-{%tab label="npm"%}
+{% tab label="npm" %}
 
 ```shell
-npm i --save-dev @nx/expo
+npm add -D @nx/expo
 ```
 
 {% /tab %}
-{%tab label="yarn"%}
+{% tab label="yarn" %}
 
 ```shell
-yarn add --dev @nx/expo
+yarn add -D @nx/expo
+```
+
+{% /tab %}
+{% tab label="pnpm" %}
+
+```shell
+pnpm add -D @nx/expo
 ```
 
 {% /tab %}

docs/shared/packages/jest/jest-plugin.md

@@ -22,14 +22,30 @@ First, install `@nx/jest`, if not already installed using your preferred package
 Make sure to install the `@nx/jest` version that matches the version of `nx` in your repository. If the version numbers get out of sync, you can encounter some difficult to debug errors. You can [fix Nx version mismatches with this recipe](/recipes/tips-n-tricks/keep-nx-versions-in-sync).
 {% /callout %}
 
-```shell
+{% tabs %}
-npm install --save-dev @nx/jest
+{% tab label="npm" %}
-```
 
 ```shell
-yarn add --dev @nx/jest
+npm add -D @nx/jest
 ```
 
+{% /tab %}
+{% tab label="yarn" %}
+
+```shell
+yarn add -D @nx/jest
+```
+
+{% /tab %}
+{% tab label="pnpm" %}
+
+```shell
+pnpm add -D @nx/jest
+```
+
+{% /tab %}
+{% /tabs %}
+
 Once installed, run the `configuration` generator
 
 ```shell

docs/shared/packages/js/js-plugin.md

@@ -11,17 +11,24 @@ Make sure to install the `@nx/js` version that matches the version of `nx` in yo
 In any Nx workspace, you can install `@nx/js` by running the following commands if `@nx/js` package is not installed:
 
 {% tabs %}
-{%tab label="npm"%}
+{% tab label="npm" %}
 
 ```shell
-npm i --save-dev @nx/js
+npm add -D @nx/js
 ```
 
 {% /tab %}
-{%tab label="yarn"%}
+{% tab label="yarn" %}
 
 ```shell
-yarn add --dev @nx/js
+yarn add -D @nx/js
+```
+
+{% /tab %}
+{% tab label="pnpm" %}
+
+```shell
+pnpm add -D @nx/js
 ```
 
 {% /tab %}

docs/shared/packages/nest/nest-plugin.md

@@ -27,14 +27,30 @@ Make sure to install the `@nx/nest` version that matches the version of `nx` in
 
 To add the Nest plugin to an existing workspace, run one the following commands:
 
+{% tabs %}
+{% tab label="npm" %}
+
 ```shell
-npm install -D @nx/nest
+npm add -D @nx/nest
 ```
 
+{% /tab %}
+{% tab label="yarn" %}
+
 ```shell
 yarn add -D @nx/nest
 ```
 
+{% /tab %}
+{% tab label="pnpm" %}
+
+```shell
+pnpm add -D @nx/nest
+```
+
+{% /tab %}
+{% /tabs %}
+
 ### Create Applications
 
 You can add a new Nest application with the following command:

docs/shared/packages/next/plugin-overview.md

@@ -16,14 +16,21 @@ To add Next.js to an existing Nx workspace, install the `@nx/next` package. Make
 {% tab label="npm" %}
 
 ```shell
-npm install --save-dev @nx/next
+npm add -D @nx/next
 ```
 
 {% /tab %}
 {% tab label="yarn" %}
 
 ```shell
-yarn add --dev @nx/next
+yarn add -D @nx/next
+```
+
+{% /tab %}
+{% tab label="pnpm" %}
+
+```shell
+pnpm add -D @nx/next
 ```
 
 {% /tab %}

docs/shared/packages/node/node-plugin.md

@@ -8,14 +8,30 @@ Make sure to install the `@nx/node` version that matches the version of `nx` in
 
 To add the Node plugin to an existing workspace, run one of the following:
 
-```shell
+{% tabs %}
-# For npm users
+{% tab label="npm" %}
-npm install -D @nx/node
 
-# For yarn users
+```shell
+npm add -D @nx/node
+```
+
+{% /tab %}
+{% tab label="yarn" %}
+
+```shell
 yarn add -D @nx/node
 ```
 
+{% /tab %}
+{% tab label="pnpm" %}
+
+```shell
+pnpm add -D @nx/node
+```
+
+{% /tab %}
+{% /tabs %}
+
 ### Creating Applications
 
 You can add a new application with the following:

docs/shared/packages/nuxt/nuxt-plugin.md

@@ -25,7 +25,7 @@ There are a number of ways to use Nuxt in your existing workspace.
 {% tab label="npm" %}
 
 ```shell
-npm install -D @nx/nuxt
+npm add -D @nx/nuxt
 ```
 
 {% /tab %}
@@ -39,7 +39,7 @@ yarn add -D @nx/nuxt
 {% tab label="pnpm" %}
 
 ```shell
-pnpm install -D @nx/nuxt
+pnpm add -D @nx/nuxt
 ```
 
 {% /tab %}

docs/shared/packages/playwright/playwright-plugin.md

@@ -14,21 +14,21 @@ If the `@nx/playwright` package is not installed, install the version that match
 {% tab label="npm" %}
 
 ```shell
-npm install --save-dev @nx/playwright
+npm add -D @nx/playwright
 ```
 
 {% /tab %}
 {% tab label="yarn" %}
 
 ```shell
-yarn add --dev @nx/playwright
+yarn add -D @nx/playwright
 ```
 
 {% /tab %}
 {% tab label="pnpm" %}
 
 ```shell
-pnpm i -D @nx/playwright
+pnpm add -D @nx/playwright
 ```
 
 {% /tab %}

docs/shared/packages/react-native/react-native-plugin.md

@@ -35,17 +35,24 @@ Make sure to install the `@nx/react-native` version that matches the version of
 {% /callout %}
 
 {% tabs %}
-{%tab label="npm"%}
+{% tab label="npm" %}
 
 ```shell
-npm i --save-dev @nx/react-native
+npm add -D @nx/react-native
 ```
 
 {% /tab %}
-{%tab label="yarn"%}
+{% tab label="yarn" %}
 
 ```shell
-yarn add --dev @nx/react-native
+yarn add -D @nx/react-native
+```
+
+{% /tab %}
+{% tab label="pnpm" %}
+
+```shell
+pnpm add -D @nx/react-native
 ```
 
 {% /tab %}

docs/shared/packages/react/react-plugin.md

@@ -16,14 +16,30 @@ Make sure to install the `@nx/react` version that matches the version of `nx` in
 
 To add the React plugin to an existing workspace, run one of the following:
 
-```shell
+{% tabs %}
-# For npm users
+{% tab label="npm" %}
-npm install -D @nx/react
 
-# For yarn users
+```shell
+npm add -D @nx/react
+```
+
+{% /tab %}
+{% tab label="yarn" %}
+
+```shell
 yarn add -D @nx/react
 ```
 
+{% /tab %}
+{% tab label="pnpm" %}
+
+```shell
+pnpm add -D @nx/react
+```
+
+{% /tab %}
+{% /tabs %}
+
 {% callout type="note" title="React Tutorials" %}
 For a full tutorial experience, follow the [React Standalone Tutorial](/getting-started/tutorials/react-standalone-tutorial) or the [React Monorepo Tutorial](/getting-started/tutorials/react-monorepo-tutorial)
 {% /callout %}

docs/shared/packages/remix/remix-plugin.md

@@ -20,14 +20,30 @@ can [fix Nx version mismatches with this recipe](/recipes/tips-n-tricks/keep-nx-
 
 Adding the Remix plugin to an existing Nx workspace can be done with the following:
 
+{% tabs %}
+{% tab label="npm" %}
+
+```shell
+npm add -D @nx/remix
+```
+
+{% /tab %}
+{% tab label="yarn" %}
+
 ```shell
 yarn add -D @nx/remix
 ```
 
+{% /tab %}
+{% tab label="pnpm" %}
+
 ```shell
-npm install -D @nx/remix
+pnpm add -D @nx/remix
 ```
 
+{% /tab %}
+{% /tabs %}
+
 ## Using the Remix Plugin
 
 ## Generate a Remix Application

docs/shared/packages/storybook/plugin-overview.md

@@ -16,24 +16,24 @@ Make sure to install the `@nx/storybook` version that matches the version of `nx
 {% /callout %}
 
 {% tabs %}
+{% tab label="npm" %}
+
+```shell
+npm add -D @nx/storybook
+```
+
+{% /tab %}
 {% tab label="yarn" %}
 
 ```shell
 yarn add -D @nx/storybook
 ```
 
-{% /tab %}
-{% tab label="npm" %}
-
-```shell
-npm install -D @nx/storybook
-```
-
 {% /tab %}
 {% tab label="pnpm" %}
 
 ```shell
-pnpm install -D @nx/storybook
+pnpm add -D @nx/storybook
 ```
 
 {% /tab %}

docs/shared/packages/vite/vite-plugin.md

@@ -70,7 +70,7 @@ Make sure to install the `@nx/vite` version that matches the version of `nx` in
 {% tab label="npm" %}
 
 ```shell
-npm install -D @nx/vite
+npm add -D @nx/vite
 ```
 
 {% /tab %}
@@ -84,7 +84,7 @@ yarn add -D @nx/vite
 {% tab label="pnpm" %}
 
 ```shell
-pnpm install -D @nx/vite
+pnpm add -D @nx/vite
 ```
 
 {% /tab %}

docs/shared/packages/vue/vue-plugin.md

@@ -29,7 +29,7 @@ There are a number of ways to use Vue in your existing workspace.
 {% tab label="npm" %}
 
 ```shell
-npm install -D @nx/vue
+npm add -D @nx/vue
 ```
 
 {% /tab %}
@@ -43,7 +43,7 @@ yarn add -D @nx/vue
 {% tab label="pnpm" %}
 
 ```shell
-pnpm install -D @nx/vue
+pnpm add -D @nx/vue
 ```
 
 {% /tab %}

docs/shared/packages/web/web-plugin.md

@@ -14,14 +14,30 @@ Make sure to install the `@nx/web` version that matches the version of `nx` in y
 
 To add the web plugin to an existing workspace, run one of the following:
 
-```shell
+{% tabs %}
-# For npm users
+{% tab label="npm" %}
-npm install -D @nx/web
 
-# For yarn users
+```shell
+npm add -D @nx/web
+```
+
+{% /tab %}
+{% tab label="yarn" %}
+
+```shell
 yarn add -D @nx/web
 ```
 
+{% /tab %}
+{% tab label="pnpm" %}
+
+```shell
+pnpm add -D @nx/web
+```
+
+{% /tab %}
+{% /tabs %}
+
 ### Creating Applications
 
 You can add a new application with the following:

docs/shared/packages/webpack/webpack-config-setup.md

@@ -121,6 +121,13 @@ module.exports = composePlugins(
 To add the `css-loader` to your config, install it and add the rule.
 
 {% tabs %}
+{% tab label="npm" %}
+
+```shell
+npm add -D css-loader
+```
+
+{% /tab %}
 {% tab label="yarn" %}
 
 ```shell
@@ -128,10 +135,10 @@ yarn add -D css-loader
 ```
 
 {% /tab %}
-{% tab label="npm" %}
+{% tab label="pnpm" %}
 
 ```shell
-npm install -D css-loader
+pnpm add -D css-loader
 ```
 
 {% /tab %}

docs/shared/plugins/maintain-published-plugin.md

@@ -14,8 +14,31 @@ In order to use your plugin in other workspaces or share it with the community,
 Currently you will have to modify the `package.json` version by yourself or with a tool.
 {% /callout %}
 
-After that, you can then install your plugin like any other npm package,
+After that, you can then install your plugin like any other npm package -
-`npm i -D @my-org/my-plugin` or `yarn add -D @my-org/my-plugin`.
+
+{% tabs %}
+{% tab label="npm" %}
+
+```shell
+npm add -D @my-org/my-plugin
+```
+
+{% /tab %}
+{% tab label="yarn" %}
+
+```shell
+yarn add -D @my-org/my-plugin
+```
+
+{% /tab %}
+{% tab label="pnpm" %}
+
+```shell
+pnpm add -D @my-org/my-plugin
+```
+
+{% /tab %}
+{% /tabs %}
 
 ## List your Nx Plugin
 

docs/shared/react-standalone-tutorial/react-standalone.md

@@ -496,10 +496,30 @@ export * from './lib/product-list/product-list';
 
 We're ready to import it into our main application now. First (if you haven't already), let's set up React Router.
 
+{% tabs %}
+{% tab label="npm" %}
+
 ```shell
-npm install react-router-dom
+npm add react-router-dom
 ```
 
+{% /tab %}
+{% tab label="yarn" %}
+
+```shell
+yarn add react-router-dom
+```
+
+{% /tab %}
+{% tab label="pnpm" %}
+
+```shell
+pnpm add react-router-dom
+```
+
+{% /tab %}
+{% /tabs %}
+
 Configure it in the `main.tsx`.
 
 ```tsx {% fileName="src/main.tsx" %}

docs/shared/react-tutorial/react-monorepo.md

@@ -407,10 +407,30 @@ export * from './lib/product-list/product-list';
 
 We're ready to import it into our main application now. First (if you haven't already), let's set up React Router.
 
+{% tabs %}
+{% tab label="npm" %}
+
 ```shell
-npm install react-router-dom
+npm add react-router-dom
 ```
 
+{% /tab %}
+{% tab label="yarn" %}
+
+```shell
+yarn add react-router-dom
+```
+
+{% /tab %}
+{% tab label="pnpm" %}
+
+```shell
+pnpm add react-router-dom
+```
+
+{% /tab %}
+{% /tabs %}
+
 Configure it in the `main.tsx`.
 
 ```tsx {% fileName="apps/react-store/src/main.tsx" %}

docs/shared/recipes/add-stack/add-astro.md

@@ -83,10 +83,30 @@ Install `@nx/js` plugin.
 
 > Note: you should make sure any first party, `@nx/` scoped, plugins match the `nx` package version
 
+{% tabs %}
+{% tab label="npm" %}
+
 ```shell
-npm i -DE @nx/js@<nx-version>
+npm add -DE @nx/js@<nx-version>
 ```
 
+{% /tab %}
+{% tab label="yarn" %}
+
+```shell
+yarn add -DE @nx/js@<nx-version>
+```
+
+{% /tab %}
+{% tab label="pnpm" %}
+
+```shell
+pnpm add -DE @nx/js@<nx-version>
+```
+
+{% /tab %}
+{% /tabs %}
+
 Then generate a project
 
 {% callout type="note" title="Directory Flag Behavior Changes" %}

docs/shared/recipes/add-stack/add-deno.md

@@ -26,14 +26,21 @@ Make sure you have Deno installed on your machine. Consult the [Deno docs for mo
 {%tab label="npm"%}
 
 ```shell
-npm i --save-dev @nx/deno
+npm add -D @nx/deno
 ```
 
 {% /tab %}
 {%tab label="yarn"%}
 
 ```shell
-yarn add --dev @nx/deno
+yarn add -D @nx/deno
+```
+
+{% /tab %}
+{%tab label="pnpm"%}
+
+```shell
+pnpm add -D @nx/deno
 ```
 
 {% /tab %}

docs/shared/recipes/add-stack/add-dotnet.md

@@ -26,14 +26,21 @@ Make sure you have .NET installed on your machine. Consult the [.NET docs for mo
 {%tab label="npm"%}
 
 ```shell
-npm i --save-dev @nx-dotnet/core
+npm add -D @nx-dotnet/core
 ```
 
 {% /tab %}
 {%tab label="yarn"%}
 
 ```shell
-yarn add --dev @nx-dotnet/core
+yarn add -D @nx-dotnet/core
+```
+
+{% /tab %}
+{%tab label="pnpm"%}
+
+```shell
+pnpm add -D @nx-dotnet/core
 ```
 
 {% /tab %}

docs/shared/recipes/add-stack/add-express.md

@@ -26,14 +26,21 @@ Make sure to install the `@nx/express` version that matches the version of `nx`
 {%tab label="npm"%}
 
 ```shell
-npm i --save-dev @nx/express
+npm add -D @nx/express
 ```
 
 {% /tab %}
 {%tab label="yarn"%}
 
 ```shell
-yarn add --dev @nx/express
+yarn add -D @nx/express
+```
+
+{% /tab %}
+{%tab label="pnpm"%}
+
+```shell
+pnpm add -D @nx/express
 ```
 
 {% /tab %}

docs/shared/recipes/add-stack/add-fastify.md

@@ -39,14 +39,21 @@ If you are adding Fastify to an existing repo, continue to the next section.
 {%tab label="npm"%}
 
 ```shell
-npm i --save-dev @nx/node
+npm add -D @nx/node
 ```
 
 {% /tab %}
 {%tab label="yarn"%}
 
 ```shell
-yarn add --dev @nx/node
+yarn add -D @nx/node
+```
+
+{% /tab %}
+{%tab label="pnpm"%}
+
+```shell
+pnpm add -D @nx/node
 ```
 
 {% /tab %}

docs/shared/recipes/add-stack/add-lit.md

@@ -28,14 +28,21 @@ Install all the dependencies we need:
 {%tab label="npm"%}
 
 ```shell
-npm i --save-dev @nx/node lit http-server
+npm add -D @nx/node lit http-server
 ```
 
 {% /tab %}
 {%tab label="yarn"%}
 
 ```shell
-yarn add --dev @nx/node lit http-server
+yarn add -D @nx/node lit http-server
+```
+
+{% /tab %}
+{%tab label="pnpm"%}
+
+```shell
+pnpm add -D @nx/node lit http-server
 ```
 
 {% /tab %}

docs/shared/recipes/add-stack/add-qwik.md

@@ -28,21 +28,21 @@ Install the `qwik-nx` plugin:
 {%tab label="npm"%}
 
 ```shell
-npm i --save-dev qwik-nx
+npm add -D qwik-nx
 ```
 
 {% /tab %}
 {%tab label="yarn"%}
 
 ```shell
-yarn add --dev qwik-nx
+yarn add -D qwik-nx
 ```
 
 {% /tab %}
 {%tab label="pnpm"%}
 
 ```shell
-pnpm i --dev qwik-nx
+pnpm add -D qwik-nx
 ```
 
 {% /tab %}

docs/shared/recipes/add-stack/add-solid.md

@@ -28,8 +28,8 @@ updating any framework dependencies as needed.
 {% tab label="npm" %}
 
 ```shell
-npm i solid-js
+npm add solid-js
-npm i --save-dev @nx/web solid-devtools vite-plugin-solid
+npm add -D @nx/web solid-devtools vite-plugin-solid
 ```
 
 {% /tab %}
@@ -37,15 +37,15 @@ npm i --save-dev @nx/web solid-devtools vite-plugin-solid
 
 ```shell
 yarn add solid-js
-yarn add --dev @nx/web solid-devtools vite-plugin-solid
+yarn add -D @nx/web solid-devtools vite-plugin-solid
 ```
 
 {% /tab %}
 {% tab label="pnpm" %}
 
 ```shell
-pnpm i solid-js
+pnpm add solid-js
-pnpm i --save-dev @nx/web solid-devtools vite-plugin-solid
+pnpm add -D @nx/web solid-devtools vite-plugin-solid
 ```
 
 {% /tab %}

docs/shared/recipes/add-stack/add-svelte.md

@@ -58,21 +58,21 @@ Make sure to install the `@nx/vite` and `@nx/js` versions that matches the versi
 {%tab label="npm"%}
 
 ```shell
-npm install --save-dev @nx/vite @nx/js vitest vite svelte svelte-check @sveltejs/vite-plugin-svelte
+npm add -D @nx/vite @nx/js vitest vite svelte svelte-check @sveltejs/vite-plugin-svelte
 ```
 
 {% /tab %}
 {%tab label="yarn"%}
 
 ```shell
-yarn add --dev @nx/vite @nx/js vitest vite svelte svelte-check @sveltejs/vite-plugin-svelte
+yarn add -D @nx/vite @nx/js vitest vite svelte svelte-check @sveltejs/vite-plugin-svelte
 ```
 
 {% /tab %}
 {%tab label="pnpm"%}
 
 ```shell
-pnpm add --save-dev @nx/vite @nx/js vitest vite svelte svelte-check @sveltejs/vite-plugin-svelte
+pnpm add -D @nx/vite @nx/js vitest vite svelte svelte-check @sveltejs/vite-plugin-svelte
 ```
 
 {% /tab %}

docs/shared/recipes/deployment/deno-deploy.md

@@ -22,7 +22,7 @@ You can also add a new Deno application to an existing Nx monorepo workspace. Ma
 {% tab label="npm" %}
 
 ```shell
-npm i -D @nx/deno
+npm add -D @nx/deno
 ```
 
 {% /tab %}

docs/shared/recipes/deployment/deno-netlify-edge-functions.md

@@ -20,7 +20,7 @@ You can also add a new Deno application to an existing Nx monorepo workspace. Ma
 {% tab label="npm" %}
 
 ```shell
-npm i -D @nx/deno
+npm add -D @nx/deno
 ```
 
 {% /tab %}

docs/shared/recipes/deployment/node-aws-lambda.md

@@ -25,7 +25,7 @@ First, make sure you have `@nx/aws-lambda` installed.
 {% tab label="npm" %}
 
 ```shell
-npm i -D @nx/aws-lambda
+npm add -D @nx/aws-lambda
 ```
 
 {% /tab %}

docs/shared/recipes/deployment/node-serverless-functions-netlify.md

@@ -27,7 +27,7 @@ You will need to install `@nx/netlify` if you haven't already.
 {% tab label="npm" %}
 
 ```shell
-npm i -D @nx/netlify
+npm add -D @nx/netlify
 ```
 
 {% /tab %}

docs/shared/recipes/generators/local-generators.md

@@ -14,11 +14,33 @@ caption="Demoes how to use Nx generators in a PNPM workspace to automate the cre
 
 If you don't already have a local plugin, use Nx to generate one:
 
+{% tabs %}
+{% tab label="npm" %}
+
 ```shell
-npm install @nx/plugin@latest
+npm add @nx/plugin@latest
 nx g @nx/plugin:plugin my-plugin
 ```
 
+{% /tab %}
+{% tab label="yarn" %}
+
+```shell
+yarn add @nx/plugin@latest
+nx g @nx/plugin:plugin my-plugin
+```
+
+{% /tab %}
+{% tab label="pnpm" %}
+
+```shell
+pnpm add @nx/plugin@latest
+nx g @nx/plugin:plugin my-plugin
+```
+
+{% /tab %}
+{% /tabs %}
+
 Note that `latest` should match the version of the `nx` plugins installed in your workspace.
 
 Use the Nx CLI to generate the initial files needed for your generator.

docs/shared/recipes/module-federation-with-ssr.md

@@ -30,7 +30,7 @@ Make sure to install the `@nx/angular` or `@nx/react` versions that matches the
 
 {% tab label="Angular" %}
 
-```{% command="npm install --save-dev @nx/angular" path="~/myorg" %}
+```{% command="npm add -D @nx/angular" path="~/myorg" %}
 
 ```
 
@@ -38,7 +38,7 @@ Make sure to install the `@nx/angular` or `@nx/react` versions that matches the
 
 {% tab label="React" %}
 
-```{% command="npm install --save-dev @nx/react" path="~/myorg" %}
+```{% command="npm add -D @nx/react" path="~/myorg" %}
 
 ```
 

docs/shared/recipes/storybook/angular-storybook-compodoc.md

@@ -60,24 +60,24 @@ This guide assumes that you have an Angular project with Storybook configured in
 First we need to install the necessary packages:
 
 {% tabs %}
-{% tab label="yarn" %}
+{%tab label="npm"%}
+
+```shell
+npm add -D @compodoc/compodoc
+```
+
+{% /tab %}
+{%tab label="yarn"%}
 
 ```shell
 yarn add -D @compodoc/compodoc
 ```
 
 {% /tab %}
-{% tab label="npm" %}
+{%tab label="pnpm"%}
 
 ```shell
-npm install --save-dev @compodoc/compodoc
+pnpm add -D @compodoc/compodoc
-```
-
-{% /tab %}
-{% tab label="pnpm" %}
-
-```shell
-pnpm install --save-dev @compodoc/compodoc
 ```
 
 {% /tab %}

docs/shared/recipes/tips-n-tricks/compile-multiple-formats.md

@@ -11,10 +11,30 @@ It can be difficult to set up a typescript library to compile to ESM and CommonJ
 
 If you do not use Rollup already, install the corresponding Nx plugin as follows:
 
+{% tabs %}
+{%tab label="npm"%}
+
 ```shell
-npm i @nx/rollup
+npm add -D @nx/rollup
 ```
 
+{% /tab %}
+{%tab label="yarn"%}
+
+```shell
+yarn add -D @nx/rollup
+```
+
+{% /tab %}
+{%tab label="pnpm"%}
+
+```shell
+pnpm add -D @nx/rollup
+```
+
+{% /tab %}
+{% /tabs %}
+
 Make sure the version of `@nx/rollup` matches your other `@nx/*` package versions.
 
 You can then configure Rollup to compile your library by adding a `build` target to your `project.json` or `package.json` file. Here's an example: