Skip to main content
Version: v4

React Native

info

NativeWind works with both Expo and Vanilla React Native projects but Expo provides a more streamlined experience.

Web: If you wish to use Metro to bundle for website or App Clip and you are not using Expo, you will need either: Expo's Metro config @expo/metro-config or manually use Tailwind CLI to generate a CSS file.

Installation​

1. Install NativeWind​

You will need to install nativewind@^4.0.1 and it's peer dependencies tailwindcss and react-native-reanimated.

npm install nativewind@^4.0.1 react-native-reanimated
npm install -D tailwindcss

Run pod-install to install Reanimated pod:

npx pod-install

2. Setup Tailwind CSS​

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.

tailwind.config.js
/** @type {import('tailwindcss').Config} */
module.exports = {
- content: [],
+ content: ["./<custom-folder>/**/*.{js,jsx,ts,tsx}"],
+ presets: [require("nativewind/preset")],
  theme: {
    extend: {},
  },
  plugins: [],
}

Create a CSS file and add the Tailwind directives

global.css
@tailwind base;
@tailwind components;
@tailwind utilities;
info

From here onwards, replace ./your-css-file.css with the relative path to the CSS file you just created

3. Add the Babel preset​

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

4. Modify your metro.config.js​

metro.config.js
const { getDefaultConfig } = require("expo/metro-config");
+ const { withNativeWind } = require('nativewind/metro');

- const config = getDefaultConfig(__dirname)
+ const config = getDefaultConfig(__dirname, { isCSSEnabled: true })

- module.exports = config
+ module.exports = withNativeWind(config, { input: './your-css-file.css' })

5. Import your CSS file​

App.js
+ import "./<your-css-file>.css"

export default App() {
  /* Your App */
}

6. TypeScript (optional)​

Please follow the TypeScript guide.