diff --git a/packages/template-blank-ng/package.json b/packages/template-blank-ng/package.json index 0792690e..e02e8e3a 100644 --- a/packages/template-blank-ng/package.json +++ b/packages/template-blank-ng/package.json @@ -3,7 +3,7 @@ "main": "src/main.ts", "displayName": "Blank", "templateType": "App template", - "version": "8.8.3", + "version": "8.8.4", "description": "Blank template for NativeScript apps using Angular", "author": "NativeScript Team ", "license": "Apache-2.0", @@ -49,16 +49,17 @@ "@angular/router": "~19.0.0", "@nativescript/angular": "^19.0.0", "@nativescript/core": "~8.8.0", - "@nativescript/theme": "^3.1.0", "rxjs": "~7.8.0", "zone.js": "~0.15.0" }, "devDependencies": { "@angular-devkit/build-angular": "~19.0.0", "@angular/compiler-cli": "~19.0.0", + "@nativescript/tailwind": "^2.1.0", "@nativescript/types": "~8.8.0", "@nativescript/webpack": "~5.0.0", "@ngtools/webpack": "~19.0.0", + "tailwindcss": "~3.4.0", "typescript": "~5.6.0" } } diff --git a/packages/template-blank-ng/src/app.css b/packages/template-blank-ng/src/app.css index 13505374..b5c61c95 100644 --- a/packages/template-blank-ng/src/app.css +++ b/packages/template-blank-ng/src/app.css @@ -1,5 +1,3 @@ -@import '@nativescript/theme/css/core.css'; -@import '@nativescript/theme/css/default.css'; - -/* Place any CSS rules you want to apply on both iOS and Android here. -This is where the vast majority of your CSS code goes. */ +@tailwind base; +@tailwind components; +@tailwind utilities; diff --git a/packages/template-blank-ng/src/app/home/home.component.html b/packages/template-blank-ng/src/app/home/home.component.html index aede6a94..759d4fdb 100644 --- a/packages/template-blank-ng/src/app/home/home.component.html +++ b/packages/template-blank-ng/src/app/home/home.component.html @@ -4,5 +4,5 @@ - + diff --git a/packages/template-blank-ng/tailwind.config.js b/packages/template-blank-ng/tailwind.config.js new file mode 100644 index 00000000..a6183d24 --- /dev/null +++ b/packages/template-blank-ng/tailwind.config.js @@ -0,0 +1,13 @@ +/** @type {import('tailwindcss').Config} */ +module.exports = { + content: ['./src/**/*.{css,xml,html,vue,svelte,ts,tsx}'], + // use the .ns-dark class to control dark mode (applied by NativeScript) - since 'media' (default) is not supported. + darkMode: ['class', '.ns-dark'], + theme: { + extend: {}, + }, + plugins: [], + corePlugins: { + preflight: false, // disables browser-specific resets + }, +} diff --git a/packages/template-hello-world-ng/package.json b/packages/template-hello-world-ng/package.json index fa551540..cb48aec7 100644 --- a/packages/template-hello-world-ng/package.json +++ b/packages/template-hello-world-ng/package.json @@ -1,7 +1,7 @@ { "name": "@nativescript/template-hello-world-ng", "main": "./src/main.ts", - "version": "8.8.3", + "version": "8.8.4", "author": "NativeScript Team ", "description": "NativeScript Angular Hello World template", "license": "Apache-2.0", @@ -43,16 +43,17 @@ "@angular/router": "~19.0.0", "@nativescript/angular": "^19.0.0", "@nativescript/core": "~8.8.0", - "@nativescript/theme": "^3.1.0", "rxjs": "~7.8.0", "zone.js": "~0.15.0" }, "devDependencies": { "@angular-devkit/build-angular": "~19.0.0", "@angular/compiler-cli": "~19.0.0", + "@nativescript/tailwind": "^2.1.0", "@nativescript/types": "~8.8.0", "@nativescript/webpack": "~5.0.0", "@ngtools/webpack": "~19.0.0", - "typescript": "~5.4.0" + "tailwindcss": "~3.4.0", + "typescript": "~5.6.0" } } diff --git a/packages/template-hello-world-ng/src/app.css b/packages/template-hello-world-ng/src/app.css index e3d2c4a7..b5c61c95 100644 --- a/packages/template-hello-world-ng/src/app.css +++ b/packages/template-hello-world-ng/src/app.css @@ -1,6 +1,3 @@ -@import '@nativescript/theme/css/core.css'; -@import '@nativescript/theme/css/default.css'; - -Button.-primary { - font-size: 18; -} +@tailwind base; +@tailwind components; +@tailwind utilities; diff --git a/packages/template-hello-world-ng/src/app/item/item-detail.component.ts b/packages/template-hello-world-ng/src/app/item/item-detail.component.ts index c6b4427b..60f728a7 100644 --- a/packages/template-hello-world-ng/src/app/item/item-detail.component.ts +++ b/packages/template-hello-world-ng/src/app/item/item-detail.component.ts @@ -5,8 +5,8 @@ import { Item } from './item' import { ItemService } from './item.service' @Component({ - selector: 'ns-detail', - templateUrl: './detail.component.html', + selector: 'ns-item-detail', + templateUrl: './item-detail.component.html', imports: [NativeScriptCommonModule], schemas: [NO_ERRORS_SCHEMA], }) diff --git a/packages/template-hello-world-ng/tailwind.config.js b/packages/template-hello-world-ng/tailwind.config.js new file mode 100644 index 00000000..a6183d24 --- /dev/null +++ b/packages/template-hello-world-ng/tailwind.config.js @@ -0,0 +1,13 @@ +/** @type {import('tailwindcss').Config} */ +module.exports = { + content: ['./src/**/*.{css,xml,html,vue,svelte,ts,tsx}'], + // use the .ns-dark class to control dark mode (applied by NativeScript) - since 'media' (default) is not supported. + darkMode: ['class', '.ns-dark'], + theme: { + extend: {}, + }, + plugins: [], + corePlugins: { + preflight: false, // disables browser-specific resets + }, +}