mirror of
https://github.com/zhigang1992/nativewind.git
synced 2026-06-16 19:51:20 +08:00
78 lines
1.6 KiB
Markdown
78 lines
1.6 KiB
Markdown
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 />
|