setup-nativewind 1.0.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2025 Farhan
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,58 @@
+# setup-nativewind
+
+> One command to set up NativeWind in your Expo or React Native project.
+
+## Usage
+```bash
+npx setup-nativewind
+```
+
+## What it does
+
+- ✅ Detects your project type (Expo managed, Expo bare, React Native CLI)
+- ✅ Installs `nativewind` and `tailwindcss` automatically
+- ✅ Creates `tailwind.config.js`, `babel.config.js`, `global.css` and other required files
+
+## Supported Project Types
+
+| Project Type | Supported |
+|---|---|
+| Expo Managed | ✅ |
+| Expo Bare | ✅ |
+| React Native CLI | ✅ |
+
+## Requirements
+
+- Node.js 16+
+- An existing Expo or React Native project
+
+## License
+
+MIT
+```
+
+---
+
+## LICENSE
+```
+MIT License
+
+Copyright (c) 2025 Farhan
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/bin/index.js

@@ -0,0 +1,2 @@
+#!/usr/bin/env node
+import("../src/index.js");

package/package.json

@@ -0,0 +1,39 @@
+{
+  "name": "setup-nativewind",
+  "version": "1.0.0",
+  "description": "One command NativeWind setup for Expo and React Native",
+  "main": "src/index.js",
+  "type": "module",
+  "bin": {
+    "setup-nativewind": "./bin/index.js"
+  },
+  "files": [
+    "bin",
+    "src"
+  ],
+  "keywords": [
+    "nativewind",
+    "tailwindcss",
+    "react-native",
+    "expo",
+    "cli",
+    "setup"
+  ],
+  "author": "Your Name <you@email.com>",
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/YOUR_USERNAME/setup-nativewind.git"
+  },
+  "homepage": "https://github.com/YOUR_USERNAME/setup-nativewind#readme",
+  "bugs": {
+    "url": "https://github.com/YOUR_USERNAME/setup-nativewind/issues"
+  },
+  "dependencies": {
+    "chalk": "^5.3.0",
+    "commander": "^11.1.0",
+    "fs-extra": "^11.2.0",
+    "ora": "^7.0.1",
+    "prompts": "^2.4.2"
+  }
+}

package/src/detector.js

@@ -0,0 +1,31 @@
+import fs from 'fs-extra';
+import path from 'path';
+
+export function detectProjectType() {
+  const pkgPath = path.join(process.cwd(), 'package.json');
+
+  if (!fs.existsSync(pkgPath)) {
+    throw new Error('No package.json found. Are you in the root of a React Native project?');
+  }
+
+  const pkg = fs.readJsonSync(pkgPath);
+  const deps = {
+    ...pkg.dependencies,
+    ...pkg.devDependencies,
+  };
+
+  if (deps['expo']) {
+    // Check if it's bare or managed
+    if (fs.existsSync(path.join(process.cwd(), 'android')) ||
+        fs.existsSync(path.join(process.cwd(), 'ios'))) {
+      return 'expo-bare';
+    }
+    return 'expo-managed';
+  }
+
+  if (deps['react-native']) {
+    return 'rn-cli';
+  }
+
+  throw new Error('Could not detect project type. Make sure you are in a React Native or Expo project.');
+}

package/src/fileWriter.js

@@ -0,0 +1,25 @@
+import fs from 'fs-extra';
+import path from 'path';
+import { fileURLToPath } from 'url';
+
+const __dirname = path.dirname(fileURLToPath(import.meta.url));
+
+export async function writeConfigFiles(projectType) {
+  const templateDir = path.join(__dirname, 'templates', projectType);
+  const targetDir = process.cwd();
+
+  const files = fs.readdirSync(templateDir);
+
+  for (const file of files) {
+    const src = path.join(templateDir, file);
+    const dest = path.join(targetDir, file);
+
+    if (fs.existsSync(dest)) {
+      console.warn(`⚠️  Skipping ${file} — already exists`);
+      continue;
+    }
+
+    await fs.copy(src, dest);
+    console.log(`✅ Created ${file}`);
+  }
+}

package/src/index.js

@@ -0,0 +1,48 @@
+import chalk from 'chalk';
+import ora from 'ora';
+import { detectProjectType } from './detector.js';
+import { installDependencies } from './installer.js';
+import { writeConfigFiles } from './fileWriter.js';
+
+async function run() {
+  console.log(chalk.bold.cyan('\n🚀 NativeWind Setup\n'));
+
+  // Step 1: Detect project
+  let projectType;
+  const detectSpinner = ora('Detecting project type...').start();
+  try {
+    projectType = detectProjectType();
+    detectSpinner.succeed(`Detected: ${chalk.green(projectType)}`);
+  } catch (err) {
+    detectSpinner.fail(err.message);
+    process.exit(1);
+  }
+
+  // Step 2: Install dependencies
+  const installSpinner = ora('Installing NativeWind & TailwindCSS...').start();
+  try {
+    installDependencies(projectType);
+    installSpinner.succeed('Dependencies installed');
+  } catch (err) {
+    installSpinner.fail('Installation failed: ' + err.message);
+    process.exit(1);
+  }
+
+  // Step 3: Write config files
+  const fileSpinner = ora('Creating config files...').start();
+  try {
+    await writeConfigFiles(projectType);
+    fileSpinner.succeed('Config files created');
+  } catch (err) {
+    fileSpinner.fail('File creation failed: ' + err.message);
+    process.exit(1);
+  }
+
+  // Done!
+  console.log(chalk.bold.green('\n✅ NativeWind setup complete!\n'));
+  console.log(chalk.yellow('Next steps:'));
+  console.log('  1. Import global.css in your root layout');
+  console.log('  2. Start using Tailwind classes in your components\n');
+}
+
+run();

package/src/installer.js

@@ -0,0 +1,12 @@
+import { execSync } from 'child_process';
+
+const packages = {
+  'expo-managed': 'nativewind tailwindcss',
+  'expo-bare':    'nativewind tailwindcss',
+  'rn-cli':       'nativewind tailwindcss react-native-reanimated react-native-safe-area-context',
+};
+
+export function installDependencies(projectType) {
+  const pkgs = packages[projectType];
+  execSync(`npm install ${pkgs}`, { stdio: 'inherit' });
+}

package/src/templates/expo-bare/babel.config.js

@@ -0,0 +1,9 @@
+module.exports = function (api) {
+  api.cache(true);
+  return {
+    presets: [
+      ["babel-preset-expo", { jsxImportSource: "nativewind" }],
+      "nativewind/babel",
+    ],
+  };
+};

package/src/templates/expo-bare/global.css

@@ -0,0 +1,3 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;

package/src/templates/expo-bare/metro.config.js

@@ -0,0 +1,6 @@
+const { getDefaultConfig } = require("expo/metro-config");
+const { withNativeWind } = require("nativewind/metro");
+
+const config = getDefaultConfig(__dirname);
+
+module.exports = withNativeWind(config, { input: "./global.css" });

package/src/templates/expo-bare/tailwind.config.js

@@ -0,0 +1,11 @@
+/** @type {import('tailwindcss').Config} */
+module.exports = {
+  content: [
+    "./app/**/*.{js,jsx,ts,tsx}",
+    "./components/**/*.{js,jsx,ts,tsx}",
+    "./src/**/*.{js,jsx,ts,tsx}"
+  ],
+  presets: [require("nativewind/preset")],
+  theme: { extend: {} },
+  plugins: [],
+};

package/src/templates/expo-managed/babel.config.js

@@ -0,0 +1,9 @@
+module.exports = function (api) {
+  api.cache(true);
+  return {
+    presets: [
+      ["babel-preset-expo", { jsxImportSource: "nativewind" }],
+      "nativewind/babel",
+    ],
+  };
+};

package/src/templates/expo-managed/global.css

@@ -0,0 +1,3 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;

package/src/templates/expo-managed/tailwind.config.js

@@ -0,0 +1,7 @@
+/** @type {import('tailwindcss').Config} */
+module.exports = {
+  content: ["./app/**/*.{js,jsx,ts,tsx}", "./components/**/*.{js,jsx,ts,tsx}"],
+  presets: [require("nativewind/preset")],
+  theme: { extend: {} },
+  plugins: [],
+};

package/src/templates/rn-cli/babel.config.js

@@ -0,0 +1,4 @@
+module.exports = {
+  presets: ['module:@react-native/babel-preset'],
+  plugins: ["nativewind/babel"],
+};

package/src/templates/rn-cli/global.css

@@ -0,0 +1,3 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;

package/src/templates/rn-cli/metro.config.js

@@ -0,0 +1,8 @@
+const { getDefaultConfig, mergeConfig } = require("@react-native/metro-config");
+const { withNativeWind } = require("nativewind/metro");
+
+const config = mergeConfig(getDefaultConfig(__dirname), {
+  /* your custom config */
+});
+
+module.exports = withNativeWind(config, { input: "./global.css" });

package/src/templates/rn-cli/tailwind.config.js

@@ -0,0 +1,12 @@
+/** @type {import('tailwindcss').Config} */
+module.exports = {
+  content: [
+    "./App.{js,jsx,ts,tsx}",
+    "./src/**/*.{js,jsx,ts,tsx}",
+    "./screens/**/*.{js,jsx,ts,tsx}",
+    "./components/**/*.{js,jsx,ts,tsx}"
+  ],
+  presets: [require("nativewind/preset")],
+  theme: { extend: {} },
+  plugins: [],
+};