From 9eac011bd0680a3c36ba4ff4cb8bfbc01bc2c02e Mon Sep 17 00:00:00 2001
From: tjshiu <35056071+tjshiu@users.noreply.github.com>
Date: Sun, 17 Aug 2025 20:39:45 -0700
Subject: [PATCH] docs: add guide for using Tailwind CSS (#63205)

Adds a new guide that explains how to set up and use Tailwind CSS in an Angular project. This guide covers installation, configuration, and provides a basic usage example.

PR Close #63205
---
 adev/src/app/routes.ts              |  4 ++
 adev/src/app/sub-navigation-data.ts |  5 +++
 adev/src/content/guide/tailwind.md  | 70 +++++++++++++++++++++++++++++
 3 files changed, 79 insertions(+)
 create mode 100644 adev/src/content/guide/tailwind.md

diff --git a/adev/src/app/routes.ts b/adev/src/app/routes.ts
index 7ae134d4459..c38ab5cdda3 100644
--- a/adev/src/app/routes.ts
+++ b/adev/src/app/routes.ts
@@ -244,6 +244,10 @@ const REDIRECT_ROUTES: Route[] = [
     path: 'guide/animations/route-animations',
     redirectTo: '/guide/routing/route-transition-animations',
   },
+  {
+    path: 'guide/tailwind',
+    redirectTo: 'guide/tailwind',
+  },
 ];
 
 export const routes: Route[] = [
diff --git a/adev/src/app/sub-navigation-data.ts b/adev/src/app/sub-navigation-data.ts
index 9f9eee7ad15..23a53aa7e78 100644
--- a/adev/src/app/sub-navigation-data.ts
+++ b/adev/src/app/sub-navigation-data.ts
@@ -1009,6 +1009,11 @@ const DOCS_SUB_NAVIGATION_DATA: NavigationItem[] = [
         path: 'ecosystem/custom-build-pipeline',
         contentPath: 'ecosystem/custom-build-pipeline',
       },
+      {
+        label: 'Tailwind',
+        path: 'guide/tailwind',
+        contentPath: 'guide/tailwind',
+      },
       {
         label: 'Angular Fire',
         path: 'https://github.com/angular/angularfire#readme',
diff --git a/adev/src/content/guide/tailwind.md b/adev/src/content/guide/tailwind.md
new file mode 100644
index 00000000000..06adce8f3b5
--- /dev/null
+++ b/adev/src/content/guide/tailwind.md
@@ -0,0 +1,70 @@
+# Using Tailwind CSS with Angular
+
+[Tailwind CSS](https://tailwindcss.com/) is a utility-first CSS framework that can be used to build modern websites without ever leaving your HTML. This guide will walk you through setting up Tailwind CSS in your Angular project.
+
+## Setting up Tailwind CSS
+
+### 1. Create an Angular project
+
+First, create a new Angular project if you don't have one set up already.
+
+<docs-code language="shell">
+ng new my-project
+cd my-project
+</docs-code>
+
+### 2. Install Tailwind CSS
+
+Next, open a terminal in your Angular project's root directory and run the following command to install Tailwind CSS and its peer dependencies:
+
+<docs-code language="shell">
+npm install tailwindcss @tailwindcss/postcss postcss --force
+</docs-code>
+
+### 3. Configure PostCSS Plugins
+
+Next, add a `.postcssrc.json` file in the file root of the project. 
+Add the `@tailwindcss/postcss` plugin into your PostCSS configuration.
+
+<docs-code language="javascript" header=".postcssrc.json">
+{
+  "plugins": {
+    "@tailwindcss/postcss": {}
+  }
+}
+</docs-code>
+
+### 4. Import Tailwind CSS
+
+Add an `@import` to `./src/styles.css` that imports Tailwind CSS.
+
+<docs-code language="css" header="src/styles.css">
+@import "tailwindcss";
+</docs-code>
+
+If you're using SCSS, add `@use` to `./src/styles.scss`. 
+
+<docs-code language="scss" header="src/styles.css">
+@use "tailwindcss";
+</docs-code>
+
+### 5. Start using Tailwind in your project
+
+You can now start using Tailwind's utility classes in your component templates to style your application.
+
+For example, you can add the following to your `app.html` file:
+
+<docs-code language="html">
+<h1 class="text-3xl font-bold underline">
+  Hello world!
+</h1>
+</docs-code>
+
+### 6. Start using Tailwind in your project
+
+Run your build process with `ng serve` and you should see the styled heading.
+
+## Additional Resources
+
+- [Tailwind CSS Documentation](https://tailwindcss.com/docs)
+- [Angular Documentation](https://angular.dev/)
\ No newline at end of file