From 2ec3306530a6f66f93a5523fea31464d46caee63 Mon Sep 17 00:00:00 2001
From: Alan Agius <17563226+alan-agius4@users.noreply.github.com>
Date: Wed, 28 Jan 2026 11:11:11 +0000
Subject: [PATCH] refactor(@schematics/angular): standardize Tailwind import
 and detection

The Tailwind CSS import statement is updated to use single quotes, aligning with the project's coding style for consistency.

The regular expression for detecting an existing Tailwind CSS configuration has been improved to recognize both single and double-quoted import paths. This enhancement makes the schematic more resilient to variations in user code style.
---
 packages/schematics/angular/application/index_spec.ts |  2 +-
 packages/schematics/angular/ng-new/index_spec.ts      |  2 +-
 packages/schematics/angular/tailwind/index.ts         |  6 +++---
 packages/schematics/angular/tailwind/index_spec.ts    | 10 +++++-----
 4 files changed, 10 insertions(+), 10 deletions(-)

diff --git a/packages/schematics/angular/application/index_spec.ts b/packages/schematics/angular/application/index_spec.ts
index 173a4a0bde56..215664398b8e 100644
--- a/packages/schematics/angular/application/index_spec.ts
+++ b/packages/schematics/angular/application/index_spec.ts
@@ -868,7 +868,7 @@ describe('Application Schematic', () => {
     expect(packageJson.devDependencies['@tailwindcss/postcss']).toBeDefined();
 
     const stylesContent = tree.readContent('/projects/foo/src/styles.css');
-    expect(stylesContent).toContain('@import "tailwindcss";');
+    expect(stylesContent).toContain(`@import 'tailwindcss';`);
   });
 
   describe(`fileNameStyleGuide: '2016'`, () => {
diff --git a/packages/schematics/angular/ng-new/index_spec.ts b/packages/schematics/angular/ng-new/index_spec.ts
index 28e1c13f315b..ad97df398fba 100644
--- a/packages/schematics/angular/ng-new/index_spec.ts
+++ b/packages/schematics/angular/ng-new/index_spec.ts
@@ -126,7 +126,7 @@ describe('Ng New Schematic', () => {
     expect(packageJson.devDependencies['@tailwindcss/postcss']).toBeDefined();
 
     const stylesContent = tree.readContent('/bar/src/styles.css');
-    expect(stylesContent).toContain('@import "tailwindcss";');
+    expect(stylesContent).toContain(`@import 'tailwindcss';`);
   });
 
   it(`should create files with file name style guide '2016'`, async () => {
diff --git a/packages/schematics/angular/tailwind/index.ts b/packages/schematics/angular/tailwind/index.ts
index e246e5f55bfe..018f0f3b9f95 100644
--- a/packages/schematics/angular/tailwind/index.ts
+++ b/packages/schematics/angular/tailwind/index.ts
@@ -55,7 +55,7 @@ function addTailwindStyles(options: { project: string }, project: ProjectDefinit
 
     if (!stylesheetPath) {
       const newStylesheetPath = join(project.sourceRoot ?? 'src', 'tailwind.css');
-      tree.create(newStylesheetPath, '@import "tailwindcss";\n');
+      tree.create(newStylesheetPath, `@import 'tailwindcss';\n`);
 
       return updateWorkspace((workspace) => {
         const project = workspace.projects.get(options.project);
@@ -82,8 +82,8 @@ function addTailwindStyles(options: { project: string }, project: ProjectDefinit
       });
     } else {
       let stylesheetContent = tree.readText(stylesheetPath);
-      if (!stylesheetContent.includes('@import "tailwindcss";')) {
-        stylesheetContent += '\n@import "tailwindcss";\n';
+      if (!/@import ["']tailwindcss["'];/.test(stylesheetContent)) {
+        stylesheetContent += `\n@import 'tailwindcss';\n`;
         tree.overwrite(stylesheetPath, stylesheetContent);
       }
     }
diff --git a/packages/schematics/angular/tailwind/index_spec.ts b/packages/schematics/angular/tailwind/index_spec.ts
index b5f3e346bd83..a70c3b3eef8d 100644
--- a/packages/schematics/angular/tailwind/index_spec.ts
+++ b/packages/schematics/angular/tailwind/index_spec.ts
@@ -64,17 +64,17 @@ describe('Tailwind Schematic', () => {
   it('should add tailwind imports to styles.css', async () => {
     const tree = await schematicRunner.runSchematic('tailwind', { project: 'bar' }, appTree);
     const stylesContent = tree.readContent('/projects/bar/src/styles.css');
-    expect(stylesContent).toContain('@import "tailwindcss";');
+    expect(stylesContent).toContain(`@import 'tailwindcss';`);
   });
 
   it('should not add duplicate tailwind imports to styles.css', async () => {
     let tree = await schematicRunner.runSchematic('tailwind', { project: 'bar' }, appTree);
     const stylesContent = tree.readContent('/projects/bar/src/styles.css');
-    expect(stylesContent.match(/@import "tailwindcss";/g)?.length).toBe(1);
+    expect(stylesContent.match(/@import 'tailwindcss';/g)?.length).toBe(1);
 
     tree = await schematicRunner.runSchematic('tailwind', { project: 'bar' }, tree);
     const stylesContentAfter = tree.readContent('/projects/bar/src/styles.css');
-    expect(stylesContentAfter.match(/@import "tailwindcss";/g)?.length).toBe(1);
+    expect(stylesContentAfter.match(/@import 'tailwindcss';/g)?.length).toBe(1);
   });
 
   describe('with scss styles', () => {
@@ -86,7 +86,7 @@ describe('Tailwind Schematic', () => {
       const tree = await schematicRunner.runSchematic('tailwind', { project: 'bar' }, appTree);
       expect(tree.exists('/projects/bar/src/tailwind.css')).toBe(true);
       const stylesContent = tree.readContent('/projects/bar/src/tailwind.css');
-      expect(stylesContent).toContain('@import "tailwindcss";');
+      expect(stylesContent).toContain(`@import 'tailwindcss';`);
     });
 
     it('should add tailwind.css to angular.json', async () => {
@@ -99,7 +99,7 @@ describe('Tailwind Schematic', () => {
     it('should not add tailwind imports to styles.scss', async () => {
       const tree = await schematicRunner.runSchematic('tailwind', { project: 'bar' }, appTree);
       const stylesContent = tree.readContent('/projects/bar/src/styles.scss');
-      expect(stylesContent).not.toContain('@import "tailwindcss";');
+      expect(stylesContent).not.toContain(`@import 'tailwindcss';`);
     });
   });