fix: correct tailwind installation

NativeScript · Dec 17, 2024 · 09ff83f · 09ff83f
1 parent 8e0dcd3
commit 09ff83f
Show file tree

Hide file tree

Showing 3 changed files with 41 additions and 9 deletions.
diff --git a/apps/nativescript-demo-ng/.gitignore b/apps/nativescript-demo-ng/.gitignore
@@ -3,12 +3,6 @@ hooks/
 node_modules/
 platforms/
 
-# NativeScript Template
-*.js.map
-*.js
-!webpack.config.js
-!ngcc.config.js
-
 # Logs
 logs
 *.log

diff --git a/apps/nativescript-demo-ng/src/app/item2/item-detail2.component.html b/apps/nativescript-demo-ng/src/app/item2/item-detail2.component.html
@@ -8,10 +8,19 @@
   <Button text="GO BACK!" (tap)="goBack()"></Button>
 </FlexboxLayout> -->
 
-<GridLayout class="page" rows="auto,*" class="p-2">
+<GridLayout rows="auto,*" class="p-2">
   <!-- <Label marginTop="20" fontSize="18" textAlignment="center" [text]="item.name"></Label> -->
   <GridLayout row="1" rows="auto,auto" columns="">
-    <Label text="Congrats to the Angular Team!" textWrap="true" class="text-center mt-5 font-bold text-3xl text-blue-500"></Label>
-    <Label row="1" text="👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏" textWrap="true" class="text-blue-500 text-center mt-5 text-3xl"></Label>
+    <Label
+      text="Congrats to the Angular Team!"
+      textWrap="true"
+      class="text-center mt-5 font-bold text-3xl text-blue-500"
+    ></Label>
+    <Label
+      row="1"
+      text="👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏"
+      textWrap="true"
+      class="text-blue-500 text-center mt-5 text-3xl"
+    ></Label>
   </GridLayout>
 </GridLayout>
diff --git a/apps/nativescript-demo-ng/tailwind.config.js b/apps/nativescript-demo-ng/tailwind.config.js
@@ -0,0 +1,29 @@
+// tailwind.config.js
+const plugin = require('tailwindcss/plugin');
+
+/** @type {import('tailwindcss').Config} */
+module.exports = {
+  content: ['./app/**/*.{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: [
+    /**
+     * A simple inline plugin that adds the ios: and android: variants
+     *
+     * Example usage:
+     *
+     *   <Label class="android:text-red-500 ios:text-blue-500" />
+     *
+     */
+    plugin(function ({ addVariant }) {
+      addVariant('android', '.ns-android &');
+      addVariant('ios', '.ns-ios &');
+    }),
+  ],
+  corePlugins: {
+    preflight: false, // disables browser-specific resets
+  },
+};