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.

Author: alan-agius4

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'`, () => {

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 () => {

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);
       }
     }

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';`);
     });
   });