fix: vue 2 template

Author: NathanWalker

packages/template-blank-vue-ts/app/app.css

@@ -0,0 +1,8 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+ActionBar {
+    background-color: #65adf1;
+    color: white;
+}

packages/template-blank-vue-ts/app/app.scss

@@ -1,16 +1,11 @@
 <template>
   <Page>
     <ActionBar>
-      <Label text="Home"/>
+      <Label text="Home" class="font-bold text-lg"/>
     </ActionBar>
 
     <GridLayout>
-      <Label class="info">
-        <FormattedString>
-          <Span class="fas" text.decode="&#xf135; "/>
-          <Span :text="message"/>
-        </FormattedString>
-      </Label>
+      <Label class="text-xl align-middle text-center text-gray-500" :text="message" @tap="logMessage" />
     </GridLayout>
   </Page>
 </template>
@@ -23,21 +18,18 @@
       message() {
         return "Blank {N}-Vue app";
       }
+    },
+
+    methods: {
+      logMessage() {
+        console.log('You have tapped the message!')
+      }
     }
   });
 </script>
 
-<style scoped lang="scss">
-  @import '@nativescript/theme/scss/variables/blue';
-
-  // Custom styles
-  .fas {
-    @include colorize($color: accent);
-  }
-
-  .info {
+<style>
+  /* .info {
     font-size: 20;
-    horizontal-align: center;
-    vertical-align: center;
-  }
+  } */
 </style>

packages/template-blank-vue-ts/app/components/Home.vue

@@ -2,7 +2,7 @@
   "name": "@nativescript/template-blank-vue-ts",
   "main": "app/app.ts",
   "displayName": "Blank Vue Typescript",
-  "version": "9.0.1",
+  "version": "9.0.2",
   "description": "Blank Typescript template for NativeScript apps using Vue.",
   "author": "NativeScript Team <oss@nativescript.org>",
   "license": "Apache-2.0",
@@ -25,6 +25,7 @@
     "!tools/assets",
     "types",
     ".editorconfig",
+    "tailwind.config.js",
     "tsconfig.json"
   ],
   "keywords": [
@@ -42,14 +43,14 @@
   ],
   "dependencies": {
     "@nativescript/core": "~9.0.0",
-    "@nativescript/theme": "^3.1.0",
     "nativescript-vue": "~2.9.3"
   },
   "devDependencies": {
     "@nativescript/types": "~9.0.0",
     "@nativescript/webpack": "5.0.24",
-    "@types/node": "~17.0.21",
+    "@types/node": "^20.0.0",
     "nativescript-vue-template-compiler": "~2.9.3",
+    "tailwindcss": "~3.4.0",
     "typescript": "~5.4.0",
     "vue": "~2.6.12"
   }

packages/template-blank-vue-ts/app/fonts/fa-brands-400.ttf

@@ -0,0 +1,13 @@
+/** @type {import('tailwindcss').Config} */
+module.exports = {
+  content: ['./app/**/*.{css,html,vue,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
+  },
+}