Bativewind init

Author: a-lider

apps/mobile/App.tsx

@@ -1,20 +1,15 @@
-import { StatusBar } from 'expo-status-bar';
-import { StyleSheet, Text, View } from 'react-native';
+import "./global.css";
+
+import { StatusBar } from "expo-status-bar";
+import { Text, View } from "react-native";
 
 export default function App() {
   return (
-    <View style={styles.container}>
-      <Text>Open up App.tsx to start working on your app!</Text>
+    <View className="flex-1 items-center justify-center bg-white">
+      <Text className="text-xl font-bold text-blue-500">
+        Welcome to Nativewind!
+      </Text>
       <StatusBar style="auto" />
     </View>
   );
 }
-
-const styles = StyleSheet.create({
-  container: {
-    flex: 1,
-    backgroundColor: '#fff',
-    alignItems: 'center',
-    justifyContent: 'center',
-  },
-});

apps/mobile/app.json

@@ -7,6 +7,7 @@
     "icon": "./assets/icon.png",
     "userInterfaceStyle": "light",
     "newArchEnabled": true,
+    "bundler": "metro",
     "splash": {
       "image": "./assets/splash-icon.png",
       "resizeMode": "contain",

apps/mobile/babel.config.js

@@ -0,0 +1,9 @@
+module.exports = function (api) {
+    api.cache(true);
+    return {
+      presets: [
+        ["babel-preset-expo", { jsxImportSource: "nativewind" }],
+        "nativewind/babel",
+      ],
+    };
+  };

apps/mobile/global.css

@@ -0,0 +1,3 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;

apps/mobile/metro.config.js

@@ -0,0 +1,6 @@
+const { getDefaultConfig } = require("expo/metro-config");
+const { withNativeWind } = require('nativewind/metro');
+ 
+const config = getDefaultConfig(__dirname)
+ 
+module.exports = withNativeWind(config, { input: './global.css' })

apps/mobile/nativewind-env.d.ts

@@ -0,0 +1 @@
+/// <reference types="nativewind/types" />

apps/mobile/package.json

@@ -19,10 +19,15 @@
     "expo-web-browser": "^15.0.10",
     "react": "19.1.0",
     "react-native": "0.81.5",
-    "zustand": "^4.5.7"
+    "zustand": "^4.5.7",
+    "nativewind": "^4.2.1",
+    "react-native-reanimated": "~3.17.5",
+    "react-native-safe-area-context": "5.4.0"
   },
   "devDependencies": {
     "@types/react": "^19.1.0",
+    "prettier-plugin-tailwindcss": "^0.5.14",
+    "tailwindcss": "^3.4.18",
     "typescript": "~5.9.2"
   },
   "private": true

apps/mobile/tailwind.config.js

@@ -0,0 +1,34 @@
+/** @type {import('tailwindcss').Config} */
+module.exports = {
+  content: ["./App.{js,ts,jsx,tsx}", "./**/*.{js,ts,jsx,tsx}"],
+  theme: {
+    extend: {
+      colors: {
+        posthog: {
+          50: "#fef2f2",
+          100: "#fee2e2",
+          200: "#fecaca",
+          300: "#fca5a5",
+          400: "#f87171",
+          500: "#ef4444",
+          600: "#dc2626",
+          700: "#b91c1c",
+          800: "#991b1b",
+          900: "#7f1d1d",
+        },
+        dark: {
+          bg: "#0a0a0a",
+          surface: "#1a1a1a",
+          border: "#2a2a2a",
+          text: "#e5e5e5",
+          "text-muted": "#a3a3a3",
+        },
+      },
+      fontFamily: {
+        mono: ["JetBrains Mono", "Consolas", "Monaco", "monospace"],
+      },
+    },
+  },
+  plugins: [],
+  darkMode: "class",
+};