From 15f356b8df3397e1de391b41bc322601dbef34c6 Mon Sep 17 00:00:00 2001
From: Lukas Heddendorp <lu.heddendorp@gmail.com>
Date: Fri, 22 Nov 2024 16:25:48 +0100
Subject: [PATCH 1/3] Prototype support for tailwind v4

---
 .../src/tools/webpack/configs/styles.ts         | 17 +++++++++++++++++
 1 file changed, 17 insertions(+)

diff --git a/packages/angular_devkit/build_angular/src/tools/webpack/configs/styles.ts b/packages/angular_devkit/build_angular/src/tools/webpack/configs/styles.ts
index 5d92b574502f..be99c523cf20 100644
--- a/packages/angular_devkit/build_angular/src/tools/webpack/configs/styles.ts
+++ b/packages/angular_devkit/build_angular/src/tools/webpack/configs/styles.ts
@@ -96,6 +96,23 @@ export async function getStylesConfig(wco: WebpackConfigOptions): Promise<Config
       extraPostcssPlugins.push(require(tailwindPackagePath)({ config: tailwindConfigPath }));
     }
   }
+  // Check for tailwind V4
+  // Tailwind V4 uses the new `@tailwindcss/postcss` package
+  try {
+    const tailwindPostCSSPackagePath = require.resolve('@tailwindcss/postcss', { paths: [root] });
+    try {
+      require.resolve('tailwindcss', { paths: [root] });
+      // Tailwind V4 is installed, add the plugin
+      extraPostcssPlugins.push(require(tailwindPostCSSPackagePath)());
+    } catch {
+      logger.warn(
+        `The '@tailwindcss/postcss' package is installed but the 'tailwindcss' package is not installed.` +
+          ` To enable Tailwind CSS, please install the 'tailwindcss' package.`,
+      );
+    }
+  } catch {
+    // Tailwind V4 is not installed, no further action is needed
+  }
 
   const autoprefixer: typeof import('autoprefixer') = require('autoprefixer');
 

From 4f661d5cf35f7314f13657563087249a07f08cd7 Mon Sep 17 00:00:00 2001
From: Lukas Heddendorp <lu.heddendorp@gmail.com>
Date: Sun, 24 Nov 2024 17:25:04 +0100
Subject: [PATCH 2/3] Add TODO for tailwind V4 in the application builder

---
 packages/angular/build/src/builders/application/options.ts | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/packages/angular/build/src/builders/application/options.ts b/packages/angular/build/src/builders/application/options.ts
index 9c488e327a98..6fb3ffb22b98 100644
--- a/packages/angular/build/src/builders/application/options.ts
+++ b/packages/angular/build/src/builders/application/options.ts
@@ -485,6 +485,8 @@ async function getTailwindConfig(
 
   if (!tailwindConfigurationPath) {
     return undefined;
+  } else {
+    // TODO: Support tailwind V4 in the application builder
   }
 
   // Create a node resolver from the configuration file

From db65d398d10d3bff09172d2c42476340ea8a4d5d Mon Sep 17 00:00:00 2001
From: Lukas Heddendorp <lu.heddendorp@gmail.com>
Date: Fri, 17 Jan 2025 16:37:32 +0100
Subject: [PATCH 3/3] Allow tailwind V4 in peer dependencies

Also clears up the todo
---
 packages/angular/build/src/builders/application/options.ts | 2 +-
 packages/angular_devkit/build_angular/package.json         | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/angular/build/src/builders/application/options.ts b/packages/angular/build/src/builders/application/options.ts
index 6fb3ffb22b98..60dc2f517069 100644
--- a/packages/angular/build/src/builders/application/options.ts
+++ b/packages/angular/build/src/builders/application/options.ts
@@ -486,7 +486,7 @@ async function getTailwindConfig(
   if (!tailwindConfigurationPath) {
     return undefined;
   } else {
-    // TODO: Support tailwind V4 in the application builder
+    // TODO: Consider supporting tailwind v4 via vite
   }
 
   // Create a node resolver from the configuration file
diff --git a/packages/angular_devkit/build_angular/package.json b/packages/angular_devkit/build_angular/package.json
index 81ba934e738c..c35942764aea 100644
--- a/packages/angular_devkit/build_angular/package.json
+++ b/packages/angular_devkit/build_angular/package.json
@@ -81,7 +81,7 @@
     "karma": "^6.3.0",
     "ng-packagr": "^19.0.0",
     "protractor": "^7.0.0",
-    "tailwindcss": "^2.0.0 || ^3.0.0",
+    "tailwindcss": "^2.0.0 || ^3.0.0 || ^4.0.0",
     "typescript": ">=5.5 <5.7"
   },
   "peerDependenciesMeta": {