create-expo-nativewind
Advanced tools
A CLI tool to create Expo project with optional NativeWind setup
A powerful CLI tool to quickly scaffold Expo applications with optional NativeWind (TailwindCSS for React Native) integration. Get a production-ready setup in seconds with intelligent prompts and automatic configuration.
--no-install overrideCreate a new Expo app with NativeWind in seconds:
npx create-expo-nativewind my-app
This will launch an interactive setup where you can choose:
No installation required! Use npx to run the latest version:
npx create-expo-nativewind [project-name]
Or with your preferred package manager:
# Using yarn
yarn create expo-nativewind my-app
# Using pnpm
pnpm create expo-nativewind my-app
# Using bun
bunx create-expo-nativewind my-app
npx create-expo-nativewind [project-name] [options]
npx create-expo-nativewind my-app
Use . as the project name to install in the current directory:
npx create-expo-nativewind .
Skip prompts by providing all options via flags:
npx create-expo-nativewind my-app --nativewind --npm
| Option | Description | Default |
|---|---|---|
--nativewind | Set up project with NativeWind (TailwindCSS) | Prompted |
--template <name> | Specify Expo template (blank, tabs, etc.) | blank |
--npm | Use npm as package manager | Auto-detected |
--yarn | Use yarn as package manager | Auto-detected |
--pnpm | Use pnpm as package manager | Auto-detected |
--bun | Use bun as package manager | Auto-detected |
--no-install | Skip dependency installation | Prompted |
--no-git | Skip Git repository initialization | Enabled |
-v, --version | Display CLI version | - |
-h, --help | Show help information | - |
When not using NativeWind, you can choose from these Expo templates:
blank - A minimal app with a single screenblank-typescript - Minimal app with TypeScript configuredtabs - Several example screens with tab navigationnavigation - Basic navigation setup includedWhen you run the CLI without all required options, it enters interactive mode with intelligent prompts:
Project Name (if not provided)
. for current directoryExpo Version
latestlatestNativeWind Setup
YesTemplate Selection (only if not using NativeWind)
blank-typescriptThe CLI automatically detects your package manager from:
npx, yarn create, pnpm create, bunxnpm_config_user_agent--npm, --yarn, --pnpm, --bun| Manager | Install Command | Run Scripts |
|---|---|---|
| npm | npm install | npm run start |
| yarn | yarn install | yarn start |
| pnpm | pnpm install | pnpm start |
| bun | bun install | bun run start |
All projects include:
--no-git)--nativewind)Additional setup includes:
nativewind@^4.0.1 - TailwindCSS for React Nativetailwindcss@^3.4.17 - Core TailwindCSS frameworkreact-native-reanimated@~3.17.4 - Animation libraryreact-native-safe-area-context@5.4.0 - Safe area handlingprettier-plugin-tailwindcss@^0.5.11 - Code formattingtailwind.config.js
module.exports = {
content: [
"./App.{js,jsx,ts,tsx}",
"./app/**/*.{js,jsx,ts,tsx}",
"./components/**/*.{js,jsx,ts,tsx}",
],
presets: [require("nativewind/preset")],
theme: { extend: {} },
plugins: [],
};
babel.config.js
module.exports = function (api) {
api.cache(true);
return {
presets: [
["babel-preset-expo", { jsxImportSource: "nativewind" }],
"nativewind/babel",
],
};
};
metro.config.js
const { getDefaultConfig } = require("expo/metro-config");
const { withNativeWind } = require('nativewind/metro');
const config = getDefaultConfig(__dirname);
module.exports = withNativeWind(config, { input: './app/global.css' });
app/global.css
@tailwind base;
@tailwind components;
@tailwind utilities;
nativewind-env.d.ts
/// <reference types="nativewind/types" />
app.json
"bundler": "metro" to web configurationmy-app/
├── app/
│ ├── (tabs)/ # Tab navigation (if using tabs template)
│ ├── _layout.tsx # Root layout
│ └── index.tsx # Home screen
├── assets/ # Images, fonts, etc.
├── node_modules/
├── .gitignore
├── app.json # Expo configuration
├── babel.config.js
├── metro.config.js
├── package.json
├── tsconfig.json
└── README.md
my-app/
├── app/
│ ├── global.css # Tailwind styles
│ ├── _layout.tsx
│ └── index.tsx # Updated with NativeWind examples
├── assets/
├── node_modules/
├── .gitignore
├── app.json
├── babel.config.js # NativeWind configured
├── metro.config.js # NativeWind configured
├── nativewind-env.d.ts # TypeScript declarations
├── package.json
├── tailwind.config.js # Tailwind configuration
├── tsconfig.json
└── README.md
After setup, use Tailwind classes directly in your React Native components:
import { View, Text } from 'react-native';
export default function App() {
return (
<View className="flex-1 items-center justify-center bg-white">
<Text className="text-3xl font-bold text-purple-600">
Welcome to Expo + NativeWind!
</Text>
<Text className="mt-4 text-lg text-gray-600">
Start building your app with TailwindCSS
</Text>
</View>
);
}
The global CSS file is automatically imported in your root component:
import "./global.css"; // Imports Tailwind styles
NativeWind supports responsive modifiers:
<View className="w-full md:w-1/2 lg:w-1/3">
<Text className="text-sm md:text-base lg:text-lg">
Responsive text
</Text>
</View>
Extend the theme in tailwind.config.js:
module.exports = {
theme: {
extend: {
colors: {
primary: '#3B82F6',
secondary: '#10B981',
},
fontFamily: {
sans: ['Inter', 'system-ui', 'sans-serif'],
},
},
},
};
npx create-expo-nativewind my-app --nativewind --yarn --no-git
npx create-expo-nativewind . --nativewind
npx create-expo-nativewind my-app --no-install
cd my-app
npm install # Install later manually
npx create-expo-nativewind my-app --template tabs --pnpm
bunx create-expo-nativewind my-app --nativewind --bun
After creating your app:
# Navigate to project directory
cd my-app
# Start the development server
npm start
Then press:
a - Open on Android emulator/devicei - Open on iOS simulatorw - Open in web browserr - Reload the appm - Toggle menu# Android
npm run android
# iOS
npm run ios
# Web
npm run web
If automatic installation fails, install manually:
npm install
# or
yarn install
# or
pnpm install
# or
bun install
global.css is imported in your root componentmetro.config.js includes NativeWind configurationnpx expo start -cnativewind-env.d.ts exists in project rootnpx tsc --noEmit to check for errorsIf the wrong package manager is detected, specify explicitly:
npx create-expo-nativewind my-app --npm
# or --yarn, --pnpm, --bun
The CLI will warn if installing in non-empty directory. Confirm to proceed or choose different location.
MIT License - see LICENSE file for details.
Prince Patel
If you encounter issues or have questions:
Made for the React Native community
FAQs
A CLI tool to create Expo project with optional NativeWind setup
The npm package create-expo-nativewind receives a total of 3 weekly downloads. As such, create-expo-nativewind popularity was classified as not popular.
We found that create-expo-nativewind demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
Multiple high-impact npm maintainers confirm they have been targeted in the same social engineering campaign that compromised Axios.
Security News
Axios compromise traced to social engineering, showing how attacks on maintainers can bypass controls and expose the broader software supply chain.
Security News
Node.js has paused its bug bounty program after funding ended, removing payouts for vulnerability reports but keeping its security process unchanged.