import StartCoding from "../\_start-coding.md"

# Create React Native App

## 1. Create a new React Native application

```bash
npx create-react-native-app my-nativewind-app
```

Choose "Default new app" and then move into the project's directory.

```bash
cd my-nativewind-app
```

You will need to install `nativewind` and it's peer dependency `tailwindcss`.

```bash
yarn add nativewind
yarn add --dev tailwindcss
```

## 2. Setup Tailwind CSS

:::caution

Do not set your content to `./**/*`! This will cause Tailwind CLI to scan every file in your `node_modules`.
For the fastest builds, be as specific as possible.

:::

Run `npx tailwindcss init` to create a `tailwind.config.js` file

Add the paths to all of your component files in your tailwind.config.js file.

```diff
// tailwind.config.js
+ const nativewind = require("nativewind/tailwind")

module.exports = {
- content: [],
+ content: ["./App.{js,jsx,ts,tsx}", "./screens/**/*.{js,jsx,ts,tsx}"],
  theme: {
    extend: {},
  },
  plugins: [],
+ presets: [nativewind]
}
```

## 3. Add the Babel preset

Modify your `babel.config.js`

```diff
// babel.config.js
module.exports = {
-   presets: ["babel-preset-expo"],
+   presets: ["babel-preset-expo", "nativewind/babel"],
};
```

## 4. Modify the Metro config

```diff
// metro.config.js
// Learn more https://docs.expo.io/guides/customizing-metro
const { getDefaultConfig } = require("expo/metro-config");
+ const withNativewind = require("nativewind/metro")

- module.exports = getDefaultConfig(__dirname)
+ module.exports = withNativewind(getDefaultConfig(__dirname))

```

<StartCoding />