@nativescript/template-blank-vue 9.0.3 → 9.0.4

package/app/app.css

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

package/app/components/Home.vue

@@ -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>

package/package.json

@@ -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 <oss@nativescript.org>",
   "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"

package/tailwind.config.js

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

package/app/app.scss

@@ -1,21 +0,0 @@
-@import '@nativescript/theme/core';
-@import '@nativescript/theme/default';
-
-// 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.
-
-// Font icon class
-.fab {
-  font-family: 'Font Awesome 5 Brands', 'fa-brands-400';
-  font-weight: 400;
-}
-
-.fas {
-  font-family: 'Font Awesome 5 Free', 'fa-solid-900';
-  font-weight: 900;
-}
-
-.far {
-  font-family: 'Font Awesome 5 Free', 'fa-regular-400';
-  font-weight: 400;
-}