feat(vue): simplify setup

Author: NathanWalker

packages/template-blank-vue-ts/package.json

@@ -2,7 +2,7 @@
   "name": "@nativescript/template-blank-vue-ts",
   "main": "app/app.ts",
   "displayName": "Blank Vue Typescript",
-  "version": "9.0.4",
+  "version": "9.0.5",
   "description": "Blank Typescript template for NativeScript apps using Vue.",
   "author": "NativeScript Team <[email protected]>",
   "license": "Apache-2.0",
@@ -47,6 +47,7 @@
     "nativescript-vue": "~2.9.3"
   },
   "devDependencies": {
+    "@nativescript/tailwind": "^2.1.0",
     "@nativescript/types": "~9.0.0",
     "@nativescript/webpack": "~5.0.31",
     "@types/node": "^20.0.0",

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

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

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

@@ -5,12 +5,7 @@
         </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" />
         </GridLayout>
     </Page>
 </template>
@@ -24,18 +19,3 @@
     }
   };
 </script>
-
-<style scoped lang="scss">
-    @import '@nativescript/theme/scss/variables/blue';
-
-    // Custom styles
-    .fas {
-        @include colorize($color: accent);
-    }
-
-    .info {
-        font-size: 20;
-        horizontal-align: center;
-        vertical-align: center;
-    }
-</style>

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

@@ -2,7 +2,7 @@
   "name": "@nativescript/template-blank-vue",
   "main": "app/app.js",
   "displayName": "Blank",
-  "version": "9.0.3",
+  "version": "9.0.4",
   "description": "Blank template for NativeScript apps using Vue.",
   "author": "NativeScript Team <[email protected]>",
   "license": "Apache-2.0",
@@ -25,6 +25,7 @@
     "!tools/assets",
     ".editorconfig",
     "jsconfig.json",
+    "tailwind.config.js",
     "webpack.config.js"
   ],
   "keywords": [
@@ -42,12 +43,13 @@
   ],
   "dependencies": {
     "@nativescript/core": "~9.0.0",
-    "@nativescript/theme": "^3.1.0",
     "nativescript-vue": "~2.9.3"
   },
   "devDependencies": {
+    "@nativescript/tailwind": "^2.1.0",
     "@nativescript/webpack": "~5.0.31",
     "nativescript-vue-template-compiler": "~2.9.3",
+    "tailwindcss": "~3.4.0",
     "vue": "~2.6.12",
     "vue-loader": "^15.11.1",
     "vue-template-compiler": "~2.6.12"

packages/template-blank-vue/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
+  },
+}