feat(@schematics/angular): add Tailwind CSS option to application schematic and ng new

clydin · clydin · commit 4912f39906b1 · 2025-08-26T11:05:05.000-04:00
Adds a `tailwind` option to the `style` choices for the `application` schematic and the `ng new` command. When selected, the new application will be configured to use Tailwind CSS.
diff --git a/packages/schematics/angular/application/index.ts b/packages/schematics/angular/application/index.ts
@@ -22,7 +22,7 @@ import {
   strings,
   url,
 } from '@angular-devkit/schematics';
-import { Schema as ComponentOptions } from '../component/schema';
+import { Schema as ComponentOptions, Style as ComponentStyle } from '../component/schema';
 import {
   DependencyType,
   ExistingBehavior,
@@ -59,6 +59,11 @@ function addTsProjectReference(...paths: string[]) {
 
 export default function (options: ApplicationOptions): Rule {
   return async (host: Tree) => {
+    const isTailwind = options.style === Style.Tailwind;
+    if (isTailwind) {
+      options.style = Style.Css;
+    }
+
     const { appDir, appRootSelector, componentOptions, folderName, sourceDir } =
       await getAppOptions(host, options);
 
@@ -135,6 +140,11 @@ export default function (options: ApplicationOptions): Rule {
           })
         : noop(),
       options.skipPackageJson ? noop() : addDependenciesToPackageJson(options),
+      isTailwind
+        ? schematic('tailwind', {
+            project: options.name,
+          })
+        : noop(),
     ]);
   };
 }
@@ -368,14 +378,14 @@ function getComponentOptions(options: ApplicationOptions): Partial<ComponentOpti
         inlineStyle: options.inlineStyle,
         inlineTemplate: options.inlineTemplate,
         skipTests: options.skipTests,
-        style: options.style,
+        style: options.style as unknown as ComponentStyle,
         viewEncapsulation: options.viewEncapsulation,
       }
     : {
         inlineStyle: options.inlineStyle ?? true,
         inlineTemplate: options.inlineTemplate ?? true,
         skipTests: true,
-        style: options.style,
+        style: options.style as unknown as ComponentStyle,
         viewEncapsulation: options.viewEncapsulation,
       };
 
diff --git a/packages/schematics/angular/application/index_spec.ts b/packages/schematics/angular/application/index_spec.ts
@@ -872,4 +872,20 @@ describe('Application Schematic', () => {
       expect(fileContent).not.toContain('provideZoneChangeDetection');
     });
   });
+
+  it('should call the tailwind schematic when style is tailwind', async () => {
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    const options = { ...defaultOptions, style: 'tailwind' as any };
+    const tree = await schematicRunner.runSchematic('application', options, workspaceTree);
+
+    expect(tree.exists('/projects/foo/.postcssrc.json')).toBe(true);
+
+    const packageJson = JSON.parse(tree.readContent('/package.json'));
+    expect(packageJson.devDependencies['tailwindcss']).toBeDefined();
+    expect(packageJson.devDependencies['postcss']).toBeDefined();
+    expect(packageJson.devDependencies['@tailwindcss/postcss']).toBeDefined();
+
+    const stylesContent = tree.readContent('/projects/foo/src/styles.css');
+    expect(stylesContent).toContain('@import "tailwindcss";');
+  });
 });
diff --git a/packages/schematics/angular/application/schema.json b/packages/schematics/angular/application/schema.json
@@ -54,15 +54,19 @@
       "description": "The type of stylesheet files to be created for components in the application.",
       "type": "string",
       "default": "css",
-      "enum": ["css", "scss", "sass", "less"],
+      "enum": ["css", "scss", "sass", "less", "tailwind"],
       "x-prompt": {
-        "message": "Which stylesheet format would you like to use?",
+        "message": "Which stylesheet system would you like to use?",
         "type": "list",
         "items": [
           {
             "value": "css",
             "label": "CSS             [ https://developer.mozilla.org/docs/Web/CSS                     ]"
           },
+          {
+            "value": "tailwind",
+            "label": "Tailwind CSS    [ https://tailwindcss.com                                        ]"
+          },
           {
             "value": "scss",
             "label": "Sass (SCSS)     [ https://sass-lang.com/documentation/syntax#scss                ]"
diff --git a/packages/schematics/angular/ng-new/index_spec.ts b/packages/schematics/angular/ng-new/index_spec.ts
@@ -112,4 +112,20 @@ describe('Ng New Schematic', () => {
     expect(files).toContain('/bar/.gemini/GEMINI.md');
     expect(files).toContain('/bar/.claude/CLAUDE.md');
   });
+
+  it('should create a tailwind project when style is tailwind', async () => {
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    const options = { ...defaultOptions, style: 'tailwind' as any };
+    const tree = await schematicRunner.runSchematic('ng-new', options);
+
+    expect(tree.exists('/bar/.postcssrc.json')).toBe(true);
+
+    const packageJson = JSON.parse(tree.readContent('/bar/package.json'));
+    expect(packageJson.devDependencies['tailwindcss']).toBeDefined();
+    expect(packageJson.devDependencies['postcss']).toBeDefined();
+    expect(packageJson.devDependencies['@tailwindcss/postcss']).toBeDefined();
+
+    const stylesContent = tree.readContent('/bar/src/styles.css');
+    expect(stylesContent).toContain('@import "tailwindcss";');
+  });
 });
diff --git a/packages/schematics/angular/ng-new/schema.json b/packages/schematics/angular/ng-new/schema.json
@@ -99,7 +99,7 @@
     "style": {
       "description": "The type of stylesheet files to be created for components in the initial project.",
       "type": "string",
-      "enum": ["css", "scss", "sass", "less"],
+      "enum": ["css", "scss", "sass", "less", "tailwind"],
       "x-user-analytics": "ep.ng_style"
     },
     "skipTests": {
