Tailwind framework init, and tailwind-example of editTask.tsx

app/(tabs)/_layout.tsx

@@ -3,6 +3,7 @@ import { Session } from "@supabase/supabase-js";
 import { Tabs } from "expo-router";
 import { useEffect, useState } from "react";
 
+
 export default function TabLayout() {
   const [session, SetSession] = useState<Session | null>(null)
   const [loading, SetLoading] = useState(true);

app/(tabs)/editTask.tsx

@@ -1,4 +1,3 @@
-import { defaultStyles } from '@/constants/defaultStyles';
 import { supabase } from '@/lib/supabase';
 import {
   router,
@@ -15,11 +14,10 @@ import {
   Platform,
   Pressable,
   ScrollView,
-  StyleSheet,
   Text,
   TextInput,
   TouchableWithoutFeedback,
-  View
+  View,
 } from 'react-native';
 
 export default function EditTask() {
@@ -68,31 +66,38 @@ export default function EditTask() {
 
   const handleSaveTask = async () => {
     if (!title.trim() || !description.trim() || !deadline.trim()) {
-      Alert.alert("All fields are required!");
+      Alert.alert('All fields are required!');
       return;
     }
+
     setIsSaving(true);
 
     try {
       const { data: userData, error: userError } = await supabase.auth.getUser();
+
       if (userError || !userData.user) {
-        router.replace("../createUser");
+        router.replace('../createUser');
         return;
       }
-      const { error: dbError } = await supabase.from("tasks").update({
+
-        title,
+      const { error: dbError } = await supabase
-        description,
+        .from('tasks')
-        isCompleted,
+        .update({
-        lastChanged: new Date().toISOString(),
+          title: title.trim(),
-        deadline,
+          description: description.trim(),
-        uId: userData.user.id,
+          isCompleted,
-      }).eq("tId", taskId);
+          lastChanged: new Date().toISOString(),
+          deadline: deadline.trim(),
+          uId: userData.user.id,
+        })
+        .eq('tId', taskId);
 
       if (dbError) {
-        Alert.alert("Task could not be edited, please try again");
+        Alert.alert('Task could not be edited, please try again');
         return;
       }
-      Alert.alert("Task successfully edited!");
+
+      Alert.alert('Task successfully edited!');
       router.back();
     } finally {
       setIsSaving(false);
@@ -103,47 +108,59 @@ export default function EditTask() {
     <>
       <Stack.Screen
         options={{
-          title: "Edit Task",
+          title: 'Edit Task',
-          headerTitleStyle: defaultStyles.title
+          headerTitleStyle: {
+            fontSize: 20,
+            fontWeight: '700',
+          },
         }}
       />
 
       <KeyboardAvoidingView
-        style={{ flex: 1 }}
+        className="flex-1 bg-gray-100"
-        behavior={Platform.OS === "ios" ? "padding" : "height"}
+        behavior={Platform.OS === 'ios' ? 'padding' : 'height'}
       >
-
         <TouchableWithoutFeedback onPress={Keyboard.dismiss}>
           <ScrollView
-            style={defaultStyles.container}
             keyboardShouldPersistTaps="handled"
+            contentContainerClassName="flex-grow justify-center px-5 py-8"
           >
-            <View style={styles.card}>
+            <View className="rounded-3xl bg-white p-6 shadow-lg">
-              <Text style={defaultStyles.title}>Edit Task</Text>
+              <Text className="mb-1 text-3xl font-bold text-gray-900">
-              <Text style={styles.subtitle}>Update your task details below.</Text>
+                Edit Task
+              </Text>
+
+              <Text className="mb-6 text-base text-gray-500">
+                Update the details for this task.
+              </Text>
 
               {isLoading ? (
-                <View style={styles.loadingContainer}>
+                <View className="items-center justify-center py-12">
                   <ActivityIndicator size="large" />
-                  <Text style={styles.loadingText}>Loading task...</Text>
+                  <Text className="mt-3 text-gray-500">Loading task...</Text>
                 </View>
               ) : (
                 <>
-                <View style={styles.field}>
+                  <View className="mb-4">
-                  <Text style={styles.label}>Title</Text>
+                    <Text className="mb-2 text-sm font-semibold text-gray-700">
-                  <TextInput
+                      Title
-                    style={styles.input}
+                    </Text>
-                    placeholder="Enter task title"
-                    value={title}
-                    onChangeText={setTitle}
-                  />
-                </View>
-
-                 <View style={styles.field}>
-                    <Text style={styles.label}>Description</Text>
                     <TextInput
-                      style={[styles.input, styles.textArea]}
+                      className="rounded-xl border border-gray-300 bg-gray-50 px-4 py-3 text-base text-gray-900"
-                      placeholder="Enter task description"
+                      placeholder="Enter title"
+                      placeholderTextColor="#9ca3af"
+                      value={title}
+                      onChangeText={setTitle}
+                    />
+                  </View>
+
+                  <View className="mb-4">
+                    <Text className="mb-2 text-sm font-semibold text-gray-700">
+                      Description
+                    </Text>
+                    <TextInput
+                      className="min-h-28 rounded-xl border border-gray-300 bg-gray-50 px-4 py-3 text-base text-gray-900"
+                      placeholder="Enter description"
                       placeholderTextColor="#9ca3af"
                       value={description}
                       onChangeText={setDescription}
@@ -152,10 +169,12 @@ export default function EditTask() {
                     />
                   </View>
 
-                  <View style={styles.field}>
+                  <View className="mb-4">
-                    <Text style={styles.label}>Deadline</Text>
+                    <Text className="mb-2 text-sm font-semibold text-gray-700">
+                      Deadline
+                    </Text>
                     <TextInput
-                      style={styles.input}
+                      className="rounded-xl border border-gray-300 bg-gray-50 px-4 py-3 text-base text-gray-900"
                       placeholder="YYYY-MM-DD"
                       placeholderTextColor="#9ca3af"
                       value={deadline}
@@ -164,52 +183,57 @@ export default function EditTask() {
                   </View>
 
                   <Pressable
-                    style={[
+                    className={`mb-6 flex-row items-center rounded-xl border p-4 ${
-                      styles.checkboxContainer,
+                      isCompleted
-                      isCompleted && styles.checkboxContainerActive,
+                        ? 'border-blue-600 bg-blue-50'
-                    ]}
+                        : 'border-gray-300 bg-gray-50'
+                    }`}
                     onPress={() => setIsCompleted((current) => !current)}
                   >
-                     <View
+                    <View
-                      style={[
+                      className={`mr-3 h-6 w-6 items-center justify-center rounded-md border-2 ${
-                        styles.checkbox,
+                        isCompleted
-                        isCompleted && styles.checkboxActive,
+                          ? 'border-blue-600 bg-blue-600'
-                      ]}
+                          : 'border-gray-400 bg-white'
+                      }`}
                     >
-                      {isCompleted && <Text style={styles.checkboxMark}>✓</Text>}
+                      {isCompleted && (
+                        <Text className="text-base font-bold text-white">✓</Text>
+                      )}
                     </View>
 
-                    <Text style={styles.checkboxLabel}>
+                    <Text className="text-base font-semibold text-gray-900">
                       {isCompleted ? 'Completed' : 'Not completed'}
                     </Text>
                   </Pressable>
 
-                   <View style={styles.buttonGroup}>
+                  <Pressable
-                    <Pressable
+                    className={`h-14 items-center justify-center rounded-2xl ${
-                      style={[
+                      isSaving ? 'bg-blue-400' : 'bg-blue-600'
-                        styles.primaryButton,
+                    }`}
-                        isSaving && styles.disabledButton,
+                    onPress={handleSaveTask}
-                      ]}
+                    disabled={isSaving}
-                      onPress={handleSaveTask}
+                  >
-                      disabled={isSaving}
+                    <Text className="text-base font-bold text-white">
-                    >
+                      {isSaving ? 'Saving...' : 'Save Changes'}
-                      <Text style={styles.primaryButtonText}>
+                    </Text>
-                        {isSaving ? 'Saving...' : 'Save Changes'}
+                  </Pressable>
-                      </Text>
-                    </Pressable>
 
                   {isSaving && (
-                    <ActivityIndicator size="small" />
+                    <View className="mt-4">
+                      <ActivityIndicator size="small" />
+                    </View>
                   )}
 
-                   <Pressable
+                  <Pressable
-                      style={styles.secondaryButton}
+                    className="mt-3 h-14 items-center justify-center rounded-2xl bg-gray-200"
-                      onPress={() => router.back()}
+                    onPress={() => router.back()}
-                      disabled={isSaving}
+                    disabled={isSaving}
-                    >
+                  >
-                      <Text style={styles.secondaryButtonText}>Cancel</Text>
+                    <Text className="text-base font-bold text-gray-900">
-                    </Pressable>
+                      Cancel
-                  </View>
+                    </Text>
+                  </Pressable>
                 </>
               )}
             </View>
@@ -219,134 +243,3 @@ export default function EditTask() {
     </>
   );
 }
-
-const styles = StyleSheet.create({
-
-  screen: {
-    flex: 1,
-    backgroundColor: 'f3f4f6'
-  },
-  container: {
-    flexGrow: 1,
-    justifyContent: 'center',
-    padding: 20,
-  },
-  card: {
-    backgroundColor: '#fff',
-    borderRadius: 8,
-    padding: 20,
-    shadowColor: '#000',
-    shadowOffset: { width: 0, height: 6 },
-    shadowOpacity: 0.1,
-    shadowRadius: 10,
-    elevation: 5, 
-  },
-  subtitle: {
-    fontSize: 15,
-    color: '#6b7280',
-    marginBottom: 24,
-  },
-  loadingContainer: {
-    alignItems: 'center',
-    justifyContent: 'center',
-    paddingVertical: 40,
-    gap: 12,
-  },
-  loadingText: {
-    color: '#6b7280',
-    fontSize: 15,
-  },
-  field: {
-    marginBottom: 16,
-  },
-  label: {
-    fontSize: 14,
-    fontWeight: '600',
-    color: '#374151',
-    marginBottom: 8,
-  },
-  input: {
-    minHeight: 50,
-    borderWidth: 1,
-    borderColor: '#d1d5db',
-    borderRadius: 12,
-    paddingHorizontal: 14,
-    paddingVertical: 12,
-    fontSize: 16,
-    color: '#111827',
-    backgroundColor: '#f9fafb',
-  },
-  textArea: {
-    minHeight: 110,
-  },
-  checkboxContainer: {
-    flexDirection: 'row',
-    alignItems: 'center',
-    gap: 12,
-    borderWidth: 1,
-    borderColor: '#d1d5db',
-    borderRadius: 12,
-    padding: 14,
-    marginTop: 4,
-    marginBottom: 22,
-    backgroundColor: '#f9fafb',
-  },
-  checkboxContainerActive: {
-    borderColor: '#2563eb',
-    backgroundColor: '#eff6ff',
-  },
-  checkbox: {
-    width: 24,
-    height: 24,
-    borderWidth: 2,
-    borderColor: '#9ca3af',
-    borderRadius: 6,
-    alignItems: 'center',
-    justifyContent: 'center',
-    backgroundColor: '#ffffff',
-  },
-  checkboxActive: {
-    borderColor: '#2563eb',
-    backgroundColor: '#2563eb',
-  },
-  checkboxMark: {
-    color: '#ffffff',
-    fontSize: 16,
-    fontWeight: '700',
-  },
-  checkboxLabel: {
-    fontSize: 16,
-    fontWeight: '600',
-    color: '#111827',
-  },
-  buttonGroup: {
-    gap: 12,
-  },
-  primaryButton: {
-    height: 52,
-    borderRadius: 14,
-    alignItems: 'center',
-    justifyContent: 'center',
-    backgroundColor: '#2563eb',
-  },
-  primaryButtonText: {
-    color: '#ffffff',
-    fontSize: 16,
-    fontWeight: '700',
-  },
-  disabledButton: {
-    opacity: 0.6,
-  },
-  secondaryButton: {
-    height: 52,
-    borderRadius: 14,
-    alignItems: 'center',
-    justifyContent: 'center',
-    backgroundColor: '#e5e7eb',
-  },
-  secondaryButtonText: {
-    color: '#111827',
-    fontSize: 16,
-    fontWeight: '700',
-  },
-});

app/_layout.tsx

@@ -1,4 +1,5 @@
 import { Stack } from "expo-router";
+import '../global.css';
 
 export default function RootLayout() {
   return <Stack screenOptions={{ headerShown: false }} />;

babel.config.js

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

global.css

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

metro.config.js

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

nativewind-env.d.ts

@@ -0,0 +1,3 @@
+/// <reference types="nativewind/types" />
+
+// NOTE: This file should not be edited and should be committed with your source code. It is generated by NativeWind.

package.json

@@ -29,6 +29,7 @@
     "expo-symbols": "~1.0.8",
     "expo-system-ui": "~6.0.9",
     "expo-web-browser": "~15.0.10",
+    "nativewind": "^4.2.3",
     "react": "19.1.0",
     "react-dom": "19.1.0",
     "react-native": "0.81.5",
@@ -38,7 +39,8 @@
     "react-native-screens": "~4.16.0",
     "react-native-url-polyfill": "^3.0.0",
     "react-native-web": "~0.21.0",
-    "react-native-worklets": "0.5.1"
+    "react-native-worklets": "0.5.1",
+    "tailwindcss": "^3.4.19"
   },
   "devDependencies": {
     "@types/react": "~19.1.0",

tailwind.config.js

@@ -0,0 +1,13 @@
+/** @type {import('tailwindcss').Config} */
+module.exports = {
+  content: [
+    './app/**/*.{js,jsx,ts,tsx}',
+    './components/**/*.{js,jsx,ts,tsx}',
+    './constants/**/*.{js,jsx,ts,tsx}',
+  ],
+  presets: [require('nativewind/preset')],
+  theme: {
+    extend: {},
+  },
+  plugins: [],
+};

tsconfig.json

@@ -12,6 +12,7 @@
     "**/*.ts",
     "**/*.tsx",
     ".expo/types/**/*.ts",
-    "expo-env.d.ts"
+    "expo-env.d.ts",
+    "nativewind-env.d.ts"
   ]
 }