NativeWind (Tailwind)

Launch-Native uses NativeWind to bring the power of Tailwind CSS to React Native. It allows you to style your components using the exact same utility classes you already know from the web.

1. How it works

Instead of writing complex StyleSheet.create objects, you simply pass Tailwind classes to the className prop of your React Native components.

import { View, Text, TouchableOpacity } from "react-native";

export function MyButton() {
  return (
    <TouchableOpacity className="bg-blue-500 px-4 py-3 rounded-xl active:opacity-80">
      <Text className="text-white font-bold text-center">Click Me</Text>
    </TouchableOpacity>
  );
}

2. Dark Mode

NativeWind perfectly supports Tailwind's dark: modifier. Combined with our Zustand theme store, your app will automatically switch styles based on the user's preference without any extra logic.

<View className="bg-white dark:bg-zinc-900 p-4">
  <Text className="text-black dark:text-white">
    This text adapts to the theme automatically!
  </Text>
</View>

3. Customizing the Theme

If you want to add your own brand colors, spacing, or custom fonts, simply open the tailwind.config.js file at the root of your project.

module.exports = {
  // ...
  theme: {
    extend: {
      colors: {
        brand: {
          DEFAULT: "#FF3366",
          dark: "#CC0033",
        },
      },
    },
  },
};

You can then use these colors instantly anywhere in your app: className="bg-brand text-brand-dark".

4. Under the hood: The Configuration Files

React Native doesn't understand CSS by default. Launch-Native comes pre-configured with everything needed to make NativeWind work seamlessly. Here is what each file does:

• 📄 global.css: This is where Tailwind directives are injected into the app. It is imported at the very root of your project (usually in your main _layout.tsx).
• 📄 babel.config.js: We added the nativewind/babel plugin here. It acts as a compiler that reads your className strings and transforms them into React Native stylesheets during the build process.
• 📄 metro.config.js: Metro is the bundler for React Native (like Webpack for the web). We modified this file to use withNativeWind, allowing Expo to understand and process standard .css files.

You generally do not need to touch babel.config.js or metro.config.js unless you are adding complex new native libraries that require specific bundler configurations.