HeadlinesBriefing favicon HeadlinesBriefing.com

Fixing NativeWind Expo Setup Version Conflicts

DEV Community •
×

Developers often hit version conflicts when installing NativeWind in Expo. The official documentation lists multiple packages with strict version requirements, leading to frustrating errors and failed builds. This guide simplifies the process by installing only the essential packages: `nativewind` and `tailwindcss`, avoiding the dependency maze that causes setup failures.

The key is configuring Tailwind CSS correctly for React Native. You generate a `tailwind.config.js` file, include the `nativewind/preset`, and set up a `global.css` with the required directives. The Babel preset must be updated to use `nativewind` as the JSX import source, and the Metro bundler needs configuration to process the stylesheet for both mobile and web builds.

For a working Expo app, import the global CSS at the root and ensure `app.json` uses Metro for the web bundler. TypeScript users add a triple-slash directive for type definitions. This streamlined approach mirrors the official setup but sidesteps version conflicts, saving hours of debugging and letting developers focus on styling their apps.