feat(schematics): add tailwindcss option to ng-add prompt

- Add x-prompt for tailwindcss in ng-add schema (default: N)
- Implement addTailwindcss() rule: deps, .postcssrc.json,
  tailwind.css, styles.less layering, angular.json, .vscode/extensions
- Add 8 test cases covering true/false scenarios
- Fix ESLint prefer-template issues

Co-Authored-By: Claude <noreply@anthropic.com>

Author: cipchk

schematics/application/index.spec.ts

@@ -127,6 +127,92 @@ describe('NgAlainSchematic: application', () => {
     });
   });
 
+  describe('#tailwindcss', () => {
+    describe('with false', () => {
+      beforeEach(async () => ({ tree } = await createAlainApp()));
+      it(`should not add tailwind related files`, () => {
+        expect(tree.exists('.postcssrc.json')).toBe(false);
+        expect(tree.exists(`/projects/${APPNAME}/src/tailwind.css`)).toBe(false);
+        const angularJson = JSON.parse(tree.readContent('angular.json'));
+        const styles = angularJson.projects[APPNAME].architect.build.options.styles;
+        expect(styles.some((s: string) => s.includes('tailwind.css'))).toBe(false);
+        const packageJson = JSON.parse(tree.readContent('package.json'));
+        expect(packageJson.devDependencies['tailwindcss']).toBeUndefined();
+      });
+    });
+    describe('with true', () => {
+      beforeEach(async () => {
+        const baseRunner = createNgRunner();
+        const workspaceTree = await baseRunner.runSchematic('workspace', {
+          name: 'workspace',
+          newProjectRoot: 'projects',
+          version: '6.0.0'
+        });
+        const appTree = await baseRunner.runSchematic(
+          'application',
+          {
+            name: APPNAME,
+            inlineStyle: false,
+            inlineTemplate: false,
+            routing: false,
+            style: 'css',
+            skipTests: false,
+            skipPackageJson: false
+          },
+          workspaceTree
+        );
+        const alainRunner = createAlainRunner();
+        tree = await alainRunner.runSchematic(
+          'ng-add',
+          {
+            skipPackageJson: false,
+            tailwindcss: true
+          },
+          appTree
+        );
+      });
+
+      it(`should add tailwindcss as devDependencies`, () => {
+        const packageJson = JSON.parse(tree.readContent('package.json'));
+        expect(packageJson.devDependencies['tailwindcss']).toBeDefined();
+        expect(packageJson.devDependencies['@tailwindcss/postcss']).toBeDefined();
+        expect(packageJson.devDependencies['postcss']).toBeDefined();
+      });
+
+      it(`should generate .postcssrc.json`, () => {
+        expect(tree.exists('.postcssrc.json')).toBe(true);
+        const postcssrc = JSON.parse(tree.readContent('.postcssrc.json'));
+        expect(postcssrc.plugins['@tailwindcss/postcss']).toEqual({});
+      });
+
+      it(`should generate src/tailwind.css`, () => {
+        expect(tree.exists(`/projects/${APPNAME}/src/tailwind.css`)).toBe(true);
+        const content = tree.readContent(`/projects/${APPNAME}/src/tailwind.css`);
+        expect(content).toContain(`@layer theme, base, ng-alain, utilities;`);
+        expect(content).toContain(`@import 'tailwindcss'`);
+      });
+
+      it(`should handle styles.less gracefully when file does not exist (no crash)`, () => {
+        // removeOrginalFiles deletes styles.less before addTailwindcss
+        // In test env (--style css), styles.less never existed
+        // The function should handle missing styles.less gracefully
+        expect(tree.exists(`/projects/${APPNAME}/src/styles.less`)).toBe(false);
+      });
+
+      it(`should add src/tailwind.css to angular.json styles`, () => {
+        const angularJson = JSON.parse(tree.readContent('angular.json'));
+        const styles = angularJson.projects[APPNAME].architect.build.options.styles;
+        expect(styles.some((s: string) => s.includes('tailwind.css'))).toBe(true);
+      });
+
+      it(`should update .vscode/extensions.json with tailwindcss recommendation`, () => {
+        expect(tree.exists('.vscode/extensions.json')).toBe(true);
+        const ext = JSON.parse(tree.readContent('.vscode/extensions.json'));
+        expect(ext.recommendations).toContain('bradlc.vscode-tailwindcss');
+      });
+    });
+  });
+
   describe('#multiple-projects', () => {
     let runner: SchematicTestRunner;
     let tree: UnitTestTree;

schematics/application/index.ts

@@ -385,6 +385,64 @@ function fixNgAlainJson(): Rule {
   };
 }
 
+function addTailwindcss(options: ApplicationOptions): Rule {
+  if (!options.tailwindcss) return noop();
+
+  const sourceRoot = project.sourceRoot!;
+  const prefix = mulitProject ? `projects/${projectName}/` : '';
+
+  return chain([
+    (tree: Tree) => {
+      // Add devDependencies
+      addPackage(
+        tree,
+        [
+          'tailwindcss@DEP-0.0.0-PLACEHOLDER',
+          '@tailwindcss/postcss@DEP-0.0.0-PLACEHOLDER',
+          'postcss@DEP-0.0.0-PLACEHOLDER'
+        ],
+        'devDependencies'
+      );
+
+      // Create .postcssrc.json
+      tree.create('.postcssrc.json', `${JSON.stringify({ plugins: { '@tailwindcss/postcss': {} } }, null, 2)}\n`);
+
+      // Create src/tailwind.css
+      tree.create(`${sourceRoot}/tailwind.css`, `@layer theme, base, ng-alain, utilities;\n\n@import 'tailwindcss';\n`);
+
+      // Wrap styles.less in @layer ng-alain
+      const stylesLessPath = `${sourceRoot}/styles.less`;
+      if (tree.exists(stylesLessPath)) {
+        const content = tree.read(stylesLessPath)!.toString('utf8');
+        const wrappedContent = `/* stylelint-disable no-invalid-position-at-import-rule */\n@layer ng-alain {\n${content}}\n`;
+        tree.overwrite(stylesLessPath, wrappedContent);
+      }
+
+      // Create/update .vscode/extensions.json with tailwindcss recommendation
+      const extPath = '.vscode/extensions.json';
+      const extId = 'bradlc.vscode-tailwindcss';
+      if (tree.exists(extPath)) {
+        const json = readJSON(tree, extPath);
+        if (!json.recommendations) json.recommendations = [];
+        if (!json.recommendations.includes(extId)) json.recommendations.push(extId);
+        writeJSON(tree, extPath, json);
+      } else {
+        tree.create(extPath, `${JSON.stringify({ recommendations: [extId] }, null, 2)}\n`);
+      }
+
+      return tree;
+    },
+    // Add src/tailwind.css to angular.json styles
+    addAssetsToTarget(
+      [{ type: 'style', value: `${prefix}src/tailwind.css` }],
+      'add',
+      [BUILD_TARGET_BUILD],
+      projectName,
+      false
+    )
+  ]);
+}
+
 export default function (options: ApplicationOptions): Rule {
   return async (tree: Tree, context: SchematicContext) => {
     const res = await getProject(tree, options.project);
@@ -411,6 +469,7 @@ export default function (options: ApplicationOptions): Rule {
       addFilesToRoot(options),
       forceLess(),
       addStyle(),
+      addTailwindcss(options),
       fixLang(options),
       fixAngularJson(),
       fixBrowserBuilderBudgets(),

schematics/application/schema.json

@@ -4,6 +4,11 @@
   "title": "NG-ALAIN Shell Options Schema",
   "type": "object",
   "properties": {
+    "tailwindcss": {
+      "type": "boolean",
+      "default": false,
+      "description": "Generate Tailwind CSS plugin"
+    },
     "codeStyle": {
       "type": "boolean",
       "default": true,

schematics/application/schema.ts

@@ -3,6 +3,7 @@ export interface Schema {
   mock?: boolean;
   reuseTab?: boolean;
   i18n?: boolean;
+  tailwindcss?: boolean;
   codeStyle?: boolean;
   project?: string;
   defaultLanguage?: string;

schematics/ng-add/schema.json

@@ -56,6 +56,12 @@
         ]
       }
     },
+    "tailwindcss": {
+      "type": "boolean",
+      "default": false,
+      "description": "Generate Tailwind CSS plugin",
+      "x-prompt": "Would you like to add Tailwind CSS? (default: N)"
+    },
     "codeStyle": {
       "type": "boolean",
       "default": true,

schematics/ng-add/schema.ts

@@ -5,5 +5,6 @@ export interface Schema {
   reuseTab?: boolean;
   defaultLanguage?: string;
   i18n?: boolean;
+  tailwindcss?: boolean;
   codeStyle?: boolean;
 }