🎨 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:

1# Using npx (npm)
2npx nativewind-setup
3
4# Using pnpx (pnpm)
5pnpx nativewind-setup
6
7# Using bunx (bun)
8bunx nativewind-setup

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

📋 What It Does

This tool automatically:

1. 📥 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)

2. 📝 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

3. 🔧 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:

1import { View, Text } from "react-native";
2
3export default function HomeScreen() {
4  return (
5    <View className="flex-1 justify-center items-center bg-gray-100">
6      <Text className="text-3xl font-bold text-blue-600 mb-4">
7        Hello NativeWind! 🎨
8      </Text>
9      <View className="bg-white p-6 rounded-xl shadow-lg">
10        <Text className="text-gray-800 text-center">
11          Tailwind CSS is now working in your Expo app!
12        </Text>
13      </View>
14    </View>
15  );
16}

🎯 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!