nativewind-setup

🎨 nativewind-setup

Quick setup tool for NativeWind in Expo projects - Get Tailwind CSS working in React Native with zero configuration!

✨ Features

• 🚀 One Command Setup - Get NativeWind running in seconds
• 📦 Package Manager Choice - Supports npm, pnpm, and bun
• 🎯 Expo Optimized - Specifically designed for Expo projects
• 🔧 Zero Configuration - All config files created automatically
• 💡 Smart Updates - Preserves existing code while adding NativeWind
• ⚡ TypeScript Ready - Full TypeScript support out of the box

🚀 Quick Start

Run this command in your existing Expo project directory:

# Using npx (npm)
npx nativewind-setup

# Using pnpx (pnpm)
pnpx nativewind-setup

# Using bunx (bun)
bunx nativewind-setup

That's it! 🎉 Your Expo project now has NativeWind configured and ready to use.

📋 What It Does

This tool automatically:

• 📥 Installs required packages:

  • nativewind
  • react-native-reanimated@~3.17.4
  • react-native-safe-area-context@5.4.0
  • tailwindcss@^3.4.17 (dev dependency)
  • prettier-plugin-tailwindcss@^0.5.11 (dev dependency)

• 📝 Creates configuration files:

  • tailwind.config.ts - Tailwind configuration
  • global.css - Global Tailwind styles
  • babel.config.js - Babel configuration for NativeWind
  • metro.config.js - Metro bundler configuration
  • nativewind-env.d.ts - TypeScript definitions

• 🔧 Updates your app:

  • Adds CSS import to app/_layout.tsx
  • Preserves all existing code

💻 Usage Example

After setup, you can use Tailwind classes in your components:

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

export default function HomeScreen() {
  return (
    <View className="flex-1 justify-center items-center bg-gray-100">
      <Text className="text-3xl font-bold text-blue-600 mb-4">
        Hello NativeWind! 🎨
      </Text>
      <View className="bg-white p-6 rounded-xl shadow-lg">
        <Text className="text-gray-800 text-center">
          Tailwind CSS is now working in your Expo app!
        </Text>
      </View>
    </View>
  );
}

🎯 Requirements

• Expo CLI project (created with create-expo-app or npx create-expo-app)
• Node.js 18+
• One of: npm, pnpm, or bun

🤝 Contributing

Contributions are welcome! Please feel free to submit a Pull Request.

📄 License

MIT License - see the LICENSE file for details.

🙏 Acknowledgments

• NativeWind - For making Tailwind CSS work with React Native
• Expo - For the amazing React Native development platform
• Tailwind CSS - For the utility-first CSS framework

Happy coding with NativeWind and Expo! 🚀

If you find this tool helpful, please consider giving it a ⭐ on GitHub!