Merge pull request #15 from expo-starter/fix/styling-tailwind

update file yml

Author: AchrafBn

.github/workflows/pwa-build.yml

@@ -21,7 +21,7 @@ jobs:
         uses: ./.github/actions/setup-bun-install
 
       - name: ⚙️ Run Prebuild
-        run: bunx tailwind -o node_modules/.cache/nativewind/styles.css && bun export
+        run: bunx tailwind -o node_modules/.cache/nativewind/global.css && bun export
         shell: bash
 
       - name: 📱 Publish web app

app/_layout.tsx

@@ -1,4 +1,4 @@
-import "./styles.css";
+import "./global.css";
 import {BottomSheetModalProvider} from "@gorhom/bottom-sheet";
 import AsyncStorage from "@react-native-async-storage/async-storage";
 import {type Theme, ThemeProvider} from "@react-navigation/native";

app/_layout.web.tsx

@@ -1,3 +1,4 @@
+import "./global.css";
 import {Button} from "@/components/ui";
 import {DatabaseProvider} from "@/db/provider";
 import {Link, Slot, Stack} from "expo-router";

app/styles.css app/global.css

@@ -45,8 +45,7 @@ export default function Screen() {
 function ScreenContent() {
   const {db} = useDatabase();
   const {data: habits, error} = useLiveQuery(db?.select().from(habitTable));
-  const {theme, setTheme} = useTheme()
-  // console.log("theme", theme)
+
   const ref = React.useRef(null);
   useScrollToTop(ref);
 
@@ -66,19 +65,10 @@ function ScreenContent() {
   return (
     <View className="flex flex-col basis-full bg-background  p-8">
 
-      {/* <Button onPress={() => setTheme("light")}>
-        <Text>Light mode</Text>
-      </Button>
 
-      <Button onPress={() => setTheme('dark')}>
-        <Text>Dark mode</Text>
-      </Button> */}
       <Stack.Screen
         options={{
           title: "Habits",
-          // headerTitleStyle: {
-          //   color: "hsl(var(--foreground))"
-          // },
           headerRight: () => <ThemeToggle />,
         }}
       />

app/index.tsx

@@ -3,6 +3,9 @@ const { withNativeWind } = require("nativewind/metro");
 
 const config = getDefaultConfig(__dirname);
 
-config.resolver.sourceExts.push('sql');
+config.resolver.sourceExts.push("sql");
 
-module.exports = withNativeWind(config, { input: "./app/styles.css", configPath: "./tailwind.config.ts", });
+module.exports = withNativeWind(config, {
+  input: "./app/global.css",
+  configPath: "./tailwind.config.ts",
+});

metro.config.js

@@ -5,7 +5,7 @@ import { hairlineWidth } from "nativewind/theme";
 export default {
   darkMode: "class",
   content: ["./app/**/*.{ts,tsx}", "./components/**/*.{ts,tsx}"],
-  presets: [nativewind],
+  presets: [require("nativewind/preset")],
   theme: {
     extend: {
       colors: {