NativeWind (Tailwind for RN)

npx create-expo-app@latest MyWindApp --template blank-typescript
cd MyWindApp
npx expo install nativewind tailwindcss@^3.4.0 react-native-reanimated react-native-safe-area-context
npm install --save-dev prettier-plugin-tailwindcss
npx tailwindcss init

// tailwind.config.js
/** @type {import('tailwindcss').Config} */
module.exports = {
  content: ["./app/**/*.{js,jsx,ts,tsx}", "./components/**/*.{js,jsx,ts,tsx}"],
  presets: [require("nativewind/preset")],
  theme: {
    extend: {
      colors: {
        brand: { DEFAULT: "#2563eb", muted: "#93c5fd" },
      },
    },
  },
  plugins: [],
};

/* global.css */
@tailwind base;
@tailwind components;
@tailwind utilities;

// metro.config.js
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
/// <reference types="nativewind/types" />

// app/_layout.tsx (Expo Router) or App.tsx
import "../global.css";
import { Stack } from "expo-router";
 
export default function RootLayout() {
  return <Stack screenOptions={{ headerShown: false }} />;
}

// components/Card.tsx
import { Text, View } from "react-native";
 
export function Card({ title, body }: { title: string; body: string }) {
  return (
    <View className="rounded-xl border border-slate-200 bg-white p-4 dark:border-slate-700 dark:bg-slate-900">
      <Text className="text-base font-semibold text-slate-900 dark:text-slate-50">{title}</Text>
      <Text className="mt-1 text-sm text-slate-600 dark:text-slate-400">{body}</Text>
    </View>
  );
}

// app/settings.tsx
import { Pressable, ScrollView, Text, useColorScheme, View } from "react-native";
import { SafeAreaView } from "react-native-safe-area-context";
import { StatusBar } from "expo-status-bar";
 
const ROWS = [
  { id: "profile", label: "Edit profile" },
  { id: "notifications", label: "Notifications" },
  { id: "privacy", label: "Privacy" },
] as const;
 
export default function SettingsScreen() {
  const scheme = useColorScheme() ?? "light";
 
  return (
    <SafeAreaView className="flex-1 bg-slate-50 dark:bg-slate-950">
      <StatusBar style={scheme === "dark" ? "light" : "dark"} />
      <ScrollView contentContainerClassName="gap-3 p-4">
        <Text className="text-2xl font-bold text-slate-900 dark:text-slate-50">Settings</Text>
 
        <View className="overflow-hidden rounded-xl border border-slate-200 bg-white dark:border-slate-800 dark:bg-slate-900">
          {ROWS.map((row) => (
            <Pressable
              key={row.id}
              accessibilityRole="button"
              className="border-b border-slate-100 px-4 py-3.5 active:bg-slate-100 dark:border-slate-800 dark:active:bg-slate-800"
            >
              <Text className="text-base text-slate-900 dark:text-slate-100">{row.label}</Text>
            </Pressable>
          ))}
        </View>
 
        <Pressable
          accessibilityRole="button"
          className="items-center rounded-xl bg-brand px-4 py-3.5 active:opacity-80"
        >
          <Text className="text-base font-semibold text-white">Save changes</Text>
        </Pressable>
      </ScrollView>
    </SafeAreaView>
  );
}

// tailwind.config.js - darkMode for class-based dark: utilities
module.exports = {
  content: ["./app/**/*.{js,jsx,ts,tsx}", "./components/**/*.{js,jsx,ts,tsx}"],
  presets: [require("nativewind/preset")],
  darkMode: "class",
  theme: {
    extend: {
      colors: {
        brand: { DEFAULT: "#2563eb", foreground: "#ffffff" },
      },
    },
  },
};

// providers/ThemeModeProvider.tsx - optional in-app override
import { createContext, useContext, useEffect, useState } from "react";
import { Appearance, useColorScheme } from "react-native";
import { colorScheme } from "nativewind";
 
type Mode = "light" | "dark" | "system";
 
const ThemeModeContext = createContext<{ mode: Mode; setMode: (m: Mode) => void }>({
  mode: "system",
  setMode: () => {},
});
 
export function ThemeModeProvider({ children }: { children: React.ReactNode }) {
  const system = useColorScheme();
  const [mode, setMode] = useState<Mode>("system");
 
  useEffect(() => {
    if (mode === "system") {
      Appearance.setColorScheme(null);
      colorScheme.set(system === "dark" ? "dark" : "light");
    } else {
      Appearance.setColorScheme(mode);
      colorScheme.set(mode);
    }
  }, [mode, system]);
 
  return (
    <ThemeModeContext.Provider value={{ mode, setMode }}>{children}</ThemeModeContext.Provider>
  );
}
 
export function useThemeMode() {
  return useContext(ThemeModeContext);
}

// nativewind-env.d.ts
/// <reference types="nativewind/types" />

// app/_layout.tsx
import "../global.css";
import { ThemeModeProvider } from "../providers/ThemeModeProvider";
import { Stack } from "expo-router";
 
export default function RootLayout() {
  return (
    <ThemeModeProvider>
      <Stack />
    </ThemeModeProvider>
  );
}