Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly
Sign up
Appearance settings

Commit 7cec165

Browse files
committed
feat(@schematics/angular): add Tailwind CSS option to application schematic and ng new
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.
1 parent 0cfcb39 commit 7cec165

File tree

5 files changed

+52
-6
lines changed

5 files changed

+52
-6
lines changed

‎packages/schematics/angular/application/index.ts

Lines changed: 13 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -22,7 +22,7 @@ import {
2222
strings,
2323
url,
2424
} from '@angular-devkit/schematics';
25-
import { Schema as ComponentOptions } from '../component/schema';
25+
import { Schema as ComponentOptions,StyleasComponentStyle } from '../component/schema';
2626
import {
2727
DependencyType,
2828
ExistingBehavior,
@@ -59,6 +59,11 @@ function addTsProjectReference(...paths: string[]) {
5959

6060
export default function (options: ApplicationOptions): Rule {
6161
return async (host: Tree) => {
62+
const isTailwind = options.style === Style.Tailwind;
63+
if (isTailwind) {
64+
options.style = Style.Css;
65+
}
66+
6267
const { appDir, appRootSelector, componentOptions, folderName, sourceDir } =
6368
await getAppOptions(host, options);
6469

@@ -135,6 +140,11 @@ export default function (options: ApplicationOptions): Rule {
135140
})
136141
: noop(),
137142
options.skipPackageJson ? noop() : addDependenciesToPackageJson(options),
143+
isTailwind
144+
? schematic('tailwind', {
145+
project: options.name,
146+
})
147+
: noop(),
138148
]);
139149
};
140150
}
@@ -368,14 +378,14 @@ function getComponentOptions(options: ApplicationOptions): Partial<ComponentOpti
368378
inlineStyle: options.inlineStyle,
369379
inlineTemplate: options.inlineTemplate,
370380
skipTests: options.skipTests,
371-
style: options.style,
381+
style: options.styleasunknownasComponentStyle,
372382
viewEncapsulation: options.viewEncapsulation,
373383
}
374384
: {
375385
inlineStyle: options.inlineStyle ?? true,
376386
inlineTemplate: options.inlineTemplate ?? true,
377387
skipTests: true,
378-
style: options.style,
388+
style: options.styleasunknownasComponentStyle,
379389
viewEncapsulation: options.viewEncapsulation,
380390
};
381391

‎packages/schematics/angular/application/index_spec.ts

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -872,4 +872,20 @@ describe('Application Schematic', () => {
872872
expect(fileContent).not.toContain('provideZoneChangeDetection');
873873
});
874874
});
875+
876+
it('should call the tailwind schematic when style is tailwind', async () => {
877+
// eslint-disable-next-line @typescript-eslint/no-explicit-any
878+
const options = { ...defaultOptions, style: 'tailwind' as any };
879+
const tree = await schematicRunner.runSchematic('application', options, workspaceTree);
880+
881+
expect(tree.exists('/projects/foo/.postcssrc.json')).toBe(true);
882+
883+
const packageJson = JSON.parse(tree.readContent('/package.json'));
884+
expect(packageJson.devDependencies['tailwindcss']).toBeDefined();
885+
expect(packageJson.devDependencies['postcss']).toBeDefined();
886+
expect(packageJson.devDependencies['@tailwindcss/postcss']).toBeDefined();
887+
888+
const stylesContent = tree.readContent('/projects/foo/src/styles.css');
889+
expect(stylesContent).toContain('@import "tailwindcss";');
890+
});
875891
});

‎packages/schematics/angular/application/schema.json

Lines changed: 6 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -54,15 +54,19 @@
5454
"description": "The type of stylesheet files to be created for components in the application.",
5555
"type": "string",
5656
"default": "css",
57-
"enum": ["css", "scss", "sass", "less"],
57+
"enum": ["css", "scss", "sass", "less", "tailwind"],
5858
"x-prompt": {
59-
"message": "Which stylesheet format would you like to use?",
59+
"message": "Which stylesheet system would you like to use?",
6060
"type": "list",
6161
"items": [
6262
{
6363
"value": "css",
6464
"label": "CSS [ https://developer.mozilla.org/docs/Web/CSS ]"
6565
},
66+
{
67+
"value": "tailwind",
68+
"label": "Tailwind CSS [ https://tailwindcss.com ]"
69+
},
6670
{
6771
"value": "scss",
6872
"label": "Sass (SCSS) [ https://sass-lang.com/documentation/syntax#scss ]"

‎packages/schematics/angular/ng-new/index_spec.ts

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -112,4 +112,20 @@ describe('Ng New Schematic', () => {
112112
expect(files).toContain('/bar/.gemini/GEMINI.md');
113113
expect(files).toContain('/bar/.claude/CLAUDE.md');
114114
});
115+
116+
it('should create a tailwind project when style is tailwind', async () => {
117+
// eslint-disable-next-line @typescript-eslint/no-explicit-any
118+
const options = { ...defaultOptions, style: 'tailwind' as any };
119+
const tree = await schematicRunner.runSchematic('ng-new', options);
120+
121+
expect(tree.exists('/bar/.postcssrc.json')).toBe(true);
122+
123+
const packageJson = JSON.parse(tree.readContent('/bar/package.json'));
124+
expect(packageJson.devDependencies['tailwindcss']).toBeDefined();
125+
expect(packageJson.devDependencies['postcss']).toBeDefined();
126+
expect(packageJson.devDependencies['@tailwindcss/postcss']).toBeDefined();
127+
128+
const stylesContent = tree.readContent('/bar/src/styles.css');
129+
expect(stylesContent).toContain('@import "tailwindcss";');
130+
});
115131
});

‎packages/schematics/angular/ng-new/schema.json

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -99,7 +99,7 @@
9999
"style": {
100100
"description": "The type of stylesheet files to be created for components in the initial project.",
101101
"type": "string",
102-
"enum": ["css", "scss", "sass", "less"],
102+
"enum": ["css", "scss", "sass", "less", "tailwind"],
103103
"x-user-analytics": "ep.ng_style"
104104
},
105105
"skipTests": {

0 commit comments

Comments
(0)

AltStyle によって変換されたページ (->オリジナル) /