Skip to content

docs: highlight Angular's ng add setup path #2470

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
abhijeetnardele24-hash wants to merge 1 commit into
base: main
Choose a base branch
from
+22 −5
Open

docs: highlight Angular's ng add setup path #2470

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
27 changes: 22 additions & 5 deletions src/app/(docs)/docs/installation/framework-guides/angular.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -33,19 +33,36 @@ export let steps: Step[] = [
},
},
{
title: "Install Tailwind CSS",
title: "Install Tailwind CSS automatically",
body: (
<p>
Install <code>@tailwindcss/postcss</code> and its peer dependencies via npm.
If you're using a recent version of Angular, the easiest way to add Tailwind CSS is with{" "}
<code>ng add tailwindcss</code>. This installs Tailwind and updates your project configuration for you. If
you're using an older version of Angular or prefer to set things up yourself, skip this step and follow the
Comment on lines +39 to +41
Copy link

Copilot AI Apr 5, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Typography is inconsistent with the rest of the framework guides: this paragraph uses straight apostrophes ("you're") while the surrounding copy uses curly apostrophes (e.g., "don’t"). Update to use the same typographic apostrophe style for consistency.

Suggested change
If you're using a recent version of Angular, the easiest way to add Tailwind CSS is with{" "}
<code>ng add tailwindcss</code>. This installs Tailwind and updates your project configuration for you. If
you're using an older version of Angular or prefer to set things up yourself, skip this step and follow the
If you’re using a recent version of Angular, the easiest way to add Tailwind CSS is with{" "}
<code>ng add tailwindcss</code>. This installs Tailwind and updates your project configuration for you. If
you’re using an older version of Angular or prefer to set things up yourself, skip this step and follow the

Copilot uses AI. Check for mistakes.
manual steps below instead.
Comment on lines +39 to +42
Copy link

Copilot AI Apr 5, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This guide now shows both the ng add tailwindcss flow and the manual setup flow as sequential steps. As written, a reader who runs ng add tailwindcss may still continue into the manual install/configuration steps, which is confusing and may lead to redundant or conflicting setup. Consider explicitly telling users what to do next after ng add (for example, jump directly to the build step), and/or add skip notes on the subsequent manual steps indicating they only apply if you did not run ng add.

Copilot uses AI. Check for mistakes.
</p>
),
code: {
name: "Terminal",
lang: "shell",
code: shell`
ng add tailwindcss
`,
},
},
{
title: "Install Tailwind CSS manually",
body: (
<p>
To install Tailwind CSS manually, install <code>@tailwindcss/postcss</code> and its peer dependencies via
npm.
</p>
),

// NOTE: The `--force` flag is used to make sure the installation succeeds. Angular has a peer dependency on `tailwindcss` v3 which causes errors when installing `tailwindcss` v4.
code: {
name: "Terminal",
lang: "shell",
code: shell`
npm install tailwindcss @tailwindcss/postcss postcss --force
npm install tailwindcss @tailwindcss/postcss postcss
`,
},
},
Expand Down
Loading