Installing NativeWind

Installing and Configuring NativeWind

NativeWind (https://github.com/nativewind/nativewind 8,105 ) (MIT) 4.2.7 targets Tailwind CSS v3 5,202 ; npm 2,036 's tailwindcss "latest" is 4.3.3, so pin the v3 line. NativeWind 5, a release candidate that targets Tailwind v4, needs different setup. Its runtime lists Reanimated 11,010 as a peer dependency, which BookNest already has (Reanimated and Gesture Handler):

Installing NativeWind and Tailwind CSS 3Shell
npx expo install nativewind
npx expo install --dev tailwindcss@^3.4.17
Output
> npm install --save nativewind
added 56 packages, and audited 644 packages in 11s
...
$ npm ls tailwindcss
└── tailwindcss@3.4.19

Four files follow the NativeWind docs: tailwind.config.js lists the files that contain class names and loads nativewind/preset, global.css holds Tailwind's three @tailwind directives, and Babel 41,624 and Metro wire NativeWind into the build:

babel.config.js and metro.config.jsJSX
// 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: './global.css' });

Import global.css once, at the top of src/app/_layout.tsx, and restart Metro with --clear so the new Babel config applies. The first start failed:

Output of 176
NativeWind made the following changes to your project to support TypeScript:
  - Updated ./tsconfig.json to include the nativewind-env.d.ts file
Failed to construct transformer:  Error: Cannot find module 'babel-preset-expo'
...
 ERROR  TypeError: Cannot read properties of undefined (reading 'transformFile')

An Expo 6,418 project without a babel.config.js never names babel-preset-expo, so npm had left it nested inside node_modules/expo. Once your own config names it, install it at the top level: npx expo install babel-preset-expo -- --save-dev (57.0.13 here). After that, verifyInstallation() from nativewind logged "NativeWind verifyInstallation() found no errors". No native rebuild is needed.