fix: angular templates

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 <[email protected]>",
   "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"
   }
 }

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;

packages/template-blank-ng/src/app/home/home.component.html

@@ -4,5 +4,5 @@
 
 <GridLayout>
   <!-- Add your page content here -->
-  <Label text="Hello"></Label>
+  <Label text="Hello" class="text-lg text-center"></Label>
 </GridLayout>

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
+  },
+}

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 <[email protected]>",
   "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"
   }
 }

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;

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],
 })

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
+  },
+}