refactor(@schematics/angular): add an internal Tailwind CSS schematic

Adds a new schematic to set up Tailwind CSS in a new project.
This is currently unused within the Angular CLI and will be further integrated
in later changes.

The schematic:
- Adds the necessary dependencies ('tailwindcss', '@tailwindcss/postcss', 'postcss').
- Creates a '.postcssrc.json' file with the correct plugin configuration.
- Injects the '@import "tailwindcss";' into the global stylesheet.

Author: clydin

packages/schematics/angular/collection.json

@@ -136,6 +136,13 @@
       "factory": "./ai-config",
       "schema": "./ai-config/schema.json",
       "description": "Generates an AI tool configuration file."
+    },
+    "tailwind": {
+      "factory": "./tailwind",
+      "schema": "./tailwind/schema.json",
+      "hidden": true,
+      "private": true,
+      "description": "[INTERNAL] Adds tailwind to a project. Intended for use for ng new/add."
     }
   }
 }

packages/schematics/angular/tailwind/files/.postcssrc.json.template

@@ -0,0 +1,5 @@
+{
+  "plugins": {
+    "@tailwindcss/postcss": {}
+  }
+}

packages/schematics/angular/tailwind/index.ts

@@ -0,0 +1,86 @@
+/**
+ * @license
+ * Copyright Google LLC All Rights Reserved.
+ *
+ * Use of this source code is governed by an MIT-style license that can be
+ * found in the LICENSE file at https://angular.dev/license
+ */
+
+import {
+  type Rule,
+  SchematicsException,
+  apply,
+  applyTemplates,
+  chain,
+  mergeWith,
+  move,
+  strings,
+  url,
+} from '@angular-devkit/schematics';
+import { DependencyType, ExistingBehavior, addDependency } from '../utility';
+import { latestVersions } from '../utility/latest-versions';
+import { getWorkspace } from '../utility/workspace';
+import { Schema } from './schema';
+
+const TAILWIND_DEPENDENCIES = ['tailwindcss', '@tailwindcss/postcss', 'postcss'];
+
+function addTailwindImport(stylesheetPath: string): Rule {
+  return (tree) => {
+    let stylesheetText = '';
+
+    if (tree.exists(stylesheetPath)) {
+      stylesheetText = tree.readText(stylesheetPath);
+      stylesheetText += '\n';
+    }
+
+    stylesheetText += '@import "tailwindcss";\n';
+
+    tree.overwrite(stylesheetPath, stylesheetText);
+  };
+}
+
+export default function (options: Schema): Rule {
+  return async (tree) => {
+    const workspace = await getWorkspace(tree);
+    const project = workspace.projects.get(options.project);
+
+    if (!project) {
+      throw new SchematicsException(`Project "${options.project}" does not exist.`);
+    }
+
+    const buildTarget = project.targets.get('build');
+
+    if (!buildTarget) {
+      throw new SchematicsException(`Project "${options.project}" does not have a build target.`);
+    }
+
+    const styles = buildTarget.options?.['styles'] as string[] | undefined;
+
+    if (!styles || styles.length === 0) {
+      throw new SchematicsException(
+        `Project "${options.project}" does not have any global styles.`,
+      );
+    }
+
+    const stylesheetPath = styles[0];
+
+    const templateSource = apply(url('./files'), [
+      applyTemplates({
+        ...strings,
+        ...options,
+      }),
+      move(project.root),
+    ]);
+
+    return chain([
+      addTailwindImport(stylesheetPath),
+      mergeWith(templateSource),
+      ...TAILWIND_DEPENDENCIES.map((name) =>
+        addDependency(name, latestVersions[name], {
+          type: DependencyType.Dev,
+          existing: ExistingBehavior.Skip,
+        }),
+      ),
+    ]);
+  };
+}

packages/schematics/angular/tailwind/index_spec.ts

@@ -0,0 +1,66 @@
+/**
+ * @license
+ * Copyright Google LLC All Rights Reserved.
+ *
+ * Use of this source code is governed by an MIT-style license that can be
+ * found in the LICENSE file at https://angular.dev/license
+ */
+
+import { SchematicTestRunner, UnitTestTree } from '@angular-devkit/schematics/testing';
+import { Schema as ApplicationOptions, Style } from '../application/schema';
+import { Schema as WorkspaceOptions } from '../workspace/schema';
+
+describe('Tailwind Schematic', () => {
+  const schematicRunner = new SchematicTestRunner(
+    '@schematics/angular',
+    require.resolve('../collection.json'),
+  );
+
+  const workspaceOptions: WorkspaceOptions = {
+    name: 'workspace',
+    newProjectRoot: 'projects',
+    version: '6.0.0',
+  };
+
+  const appOptions: ApplicationOptions = {
+    name: 'bar',
+    inlineStyle: false,
+    inlineTemplate: false,
+    routing: false,
+    style: Style.Css,
+    skipTests: false,
+    skipPackageJson: false,
+  };
+
+  let appTree: UnitTestTree;
+
+  beforeEach(async () => {
+    appTree = await schematicRunner.runSchematic('workspace', workspaceOptions);
+    appTree = await schematicRunner.runSchematic('application', appOptions, appTree);
+  });
+
+  it('should add tailwind dependencies', async () => {
+    const tree = await schematicRunner.runSchematic('tailwind', { project: 'bar' }, appTree);
+    const packageJson = JSON.parse(tree.readContent('/package.json'));
+    expect(packageJson.devDependencies['tailwindcss']).toBeDefined();
+    expect(packageJson.devDependencies['postcss']).toBeDefined();
+    expect(packageJson.devDependencies['@tailwindcss/postcss']).toBeDefined();
+  });
+
+  it('should create a .postcssrc.json file in the project root', async () => {
+    const tree = await schematicRunner.runSchematic('tailwind', { project: 'bar' }, appTree);
+    expect(tree.exists('/projects/bar/.postcssrc.json')).toBe(true);
+  });
+
+  it('should configure tailwindcss plugin in .postcssrc.json', async () => {
+    const tree = await schematicRunner.runSchematic('tailwind', { project: 'bar' }, appTree);
+    const postCssConfig = JSON.parse(tree.readContent('/projects/bar/.postcssrc.json'));
+    expect(postCssConfig.plugins['@tailwindcss/postcss']).toBeDefined();
+  });
+
+  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";');
+  });
+});

packages/schematics/angular/tailwind/schema.json

@@ -0,0 +1,15 @@
+{
+  "$schema": "http://json-schema.org/draft-07/schema",
+  "title": "Tailwind CSS Schematic",
+  "type": "object",
+  "properties": {
+    "project": {
+      "type": "string",
+      "description": "The name of the project.",
+      "$default": {
+        "$source": "projectName"
+      }
+    }
+  },
+  "required": ["project"]
+}

packages/schematics/angular/utility/latest-versions/package.json

@@ -19,6 +19,8 @@
     "postcss": "^8.5.3",
     "protractor": "~7.0.0",
     "rxjs": "~7.8.0",
+    "tailwindcss": "^4.1.12",
+    "@tailwindcss/postcss": "^4.1.12",
     "tslib": "^2.3.0",
     "ts-node": "~10.9.0",
     "typescript": "~5.9.2",