setup-nativewind 1.0.0 → 1.1.0

package/README.md

@@ -9,17 +9,19 @@ npx setup-nativewind
 
 ## What it does
 
-- ✅ Detects your project type (Expo managed, Expo bare, React Native CLI)
+- ✅ Auto detects your project type (Expo managed, Expo bare, React Native CLI)
+- ✅ Auto detects JavaScript or TypeScript
 - ✅ Installs `nativewind` and `tailwindcss` automatically
-- ✅ Creates `tailwind.config.js`, `babel.config.js`, `global.css` and other required files
+- ✅ Creates all required config files
+- ✅ Creates `nativewind-env.d.ts` for TypeScript projects
 
 ## Supported Project Types
 
-| Project Type | Supported |
-|---|---|
-| Expo Managed | ✅ |
-| Expo Bare | ✅ |
-| React Native CLI | ✅ |
+| Project Type | JavaScript | TypeScript |
+|---|---|---|
+| Expo Managed | ✅ | ✅ |
+| Expo Bare | ✅ | ✅ |
+| React Native CLI | ✅ | ✅ |
 
 ## Requirements
 
@@ -28,31 +30,4 @@ npx setup-nativewind
 
 ## 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.
+MIT

package/package.json

@@ -1,11 +1,11 @@
 {
   "name": "setup-nativewind",
-  "version": "1.0.0",
+  "version": "1.1.0",
   "description": "One command NativeWind setup for Expo and React Native",
   "main": "src/index.js",
   "type": "module",
   "bin": {
-    "setup-nativewind": "./bin/index.js"
+    "setup-nativewind": "bin/index.js"
   },
   "files": [
     "bin",
@@ -19,15 +19,15 @@
     "cli",
     "setup"
   ],
-  "author": "Your Name <you@email.com>",
+  "author": "Farhan <farhan104757@gmail.com>",
   "license": "MIT",
   "repository": {
     "type": "git",
-    "url": "https://github.com/YOUR_USERNAME/setup-nativewind.git"
+    "url": "git+https://github.com/FarhanCodeSpace/setup-nativewind.git"
   },
-  "homepage": "https://github.com/YOUR_USERNAME/setup-nativewind#readme",
+  "homepage": "https://github.com/FarhanCodeSpace/setup-nativewind#readme",
   "bugs": {
-    "url": "https://github.com/YOUR_USERNAME/setup-nativewind/issues"
+    "url": "https://github.com/FarhanCodeSpace/setup-nativewind/issues"
   },
   "dependencies": {
     "chalk": "^5.3.0",
@@ -36,4 +36,4 @@
     "ora": "^7.0.1",
     "prompts": "^2.4.2"
   }
-}
+}

package/src/detector.js

@@ -1,7 +1,8 @@
 import fs from 'fs-extra';
 import path from 'path';
+import prompts from 'prompts';
 
-export function detectProjectType() {
+export async function detectProjectType() {
   const pkgPath = path.join(process.cwd(), 'package.json');
 
   if (!fs.existsSync(pkgPath)) {
@@ -14,17 +15,30 @@ export function detectProjectType() {
     ...pkg.devDependencies,
   };
 
+  // Ask user for language
+  const { language } = await prompts({
+    type: 'select',
+    name: 'language',
+    message: 'Is your project JavaScript or TypeScript?',
+    choices: [
+      { title: 'JavaScript', value: 'js' },
+      { title: 'TypeScript', value: 'ts' },
+    ],
+  });
+
+  const isTypeScript = language === 'ts';
+
   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';
+    const isBare =
+      fs.existsSync(path.join(process.cwd(), 'android')) ||
+      fs.existsSync(path.join(process.cwd(), 'ios'));
+
+    if (isBare) return isTypeScript ? 'expo-bare-ts' : 'expo-bare';
+    return isTypeScript ? 'expo-managed-ts' : 'expo-managed';
   }
 
   if (deps['react-native']) {
-    return 'rn-cli';
+    return isTypeScript ? 'rn-cli-ts' : 'rn-cli';
   }
 
   throw new Error('Could not detect project type. Make sure you are in a React Native or Expo project.');

package/src/index.js

@@ -9,12 +9,14 @@ async function run() {
 
   // Step 1: Detect project
   let projectType;
-  const detectSpinner = ora('Detecting project type...').start();
   try {
-    projectType = detectProjectType();
-    detectSpinner.succeed(`Detected: ${chalk.green(projectType)}`);
+    projectType = await detectProjectType();
+    const isTS = projectType.includes('ts');
+    console.log(
+      `✔ Detected: ${chalk.green(projectType)} ${isTS ? chalk.blue('(TypeScript)') : chalk.yellow('(JavaScript)')}`
+    );
   } catch (err) {
-    detectSpinner.fail(err.message);
+    console.error(chalk.red('✖ ' + err.message));
     process.exit(1);
   }
 
@@ -42,7 +44,11 @@ async function run() {
   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');
+  console.log('  2. Start using Tailwind classes in your components');
+  if (projectType.includes('ts')) {
+    console.log('  3. nativewind-env.d.ts has been created for TypeScript support ✅');
+  }
+  console.log('');
 }
 
-run();
+run();

package/src/installer.js

@@ -1,9 +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',
+  'expo-managed':    'nativewind tailwindcss',
+  'expo-managed-ts': 'nativewind tailwindcss',
+  'expo-bare':       'nativewind tailwindcss',
+  'expo-bare-ts':    'nativewind tailwindcss',
+  'rn-cli':          'nativewind tailwindcss react-native-reanimated react-native-safe-area-context',
+  'rn-cli-ts':       'nativewind tailwindcss react-native-reanimated react-native-safe-area-context',
 };
 
 export function installDependencies(projectType) {

package/src/templates/expo-bare-ts/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-ts/global.css

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

package/src/templates/expo-bare-ts/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-ts/nativewind-env.d.ts

@@ -0,0 +1 @@
+/// <reference types="nativewind/types" />

package/src/templates/expo-bare-ts/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-ts/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-ts/global.css

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

package/src/templates/expo-managed-ts/nativewind-env.d.ts

@@ -0,0 +1 @@
+/// <reference types="nativewind/types" />

package/src/templates/expo-managed-ts/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-ts/babel.config.js

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

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

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

package/src/templates/rn-cli-ts/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-ts/nativewind-env.d.ts

@@ -0,0 +1 @@
+/// <reference types="nativewind/types" />

package/src/templates/rn-cli-ts/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: [],
+};