How to Set Up NativeWind with Expo in 2026 (Installation & Troubleshooting Guide)
NativeWind has become one of the most popular ways to style React Native applications. Inspired by Tailwind CSS, it allows developers to use utility classes directly in their components, making styling faster, more consistent, and easier to maintain. For developers already familiar with Tailwind CSS on the web, NativeWind provides a familiar workflow for building native mobile applications.
When combined with Expo, NativeWind offers a modern development experience that helps teams build cross-platform applications efficiently. However, setting up NativeWind is not always straightforward. Installation steps, configuration requirements, and project structures can vary depending on the Expo SDK version and whether your project uses Expo Router.
One of the biggest challenges developers face is keeping NativeWind configuration aligned with their Expo project structure. Changes to Expo templates and Expo Router conventions can affect files such as tailwind.config.js, global.css, and other configuration files. As a result, a setup guide that works for one Expo SDK version may not work correctly for another. This often leads to situations where NativeWind appears to be installed correctly, but styles are not applied as expected.
This is why many developers encounter issues where NativeWind appears to be installed correctly, but styles are not applied. In most cases, the problem is caused by outdated configuration files, incorrect content paths, Metro cache issues, or version incompatibilities between NativeWind, Expo, and React Native.
In this article, we'll walk through the complete installation and setup process for NativeWind with Expo in 2026. We'll cover the required configuration files, project structure differences, common setup mistakes, troubleshooting techniques, and practical solutions to the issues developers encounter most often.
By the end of this guide, you'll have a working NativeWind setup and a better understanding of how Expo SDK versions, Expo Router, and project organization can impact your configuration. In the next article, we'll explore real-world usage patterns, including layouts, reusable components, theming, and best practices for building scalable React Native applications with NativeWind.
This tutorial focuses on the JavaScript setup for NativeWind. If you're using TypeScript, additional configuration steps may be required. Tailwind CSS ^3.4.19 is used in this setup.
React Native Reanimated is not required for NativeWind, but many developers combine NativeWind with Reanimated to build animated user interfaces. If you plan to use Reanimated, refer to the React Native Reanimated setup guide before continuing.
Table of Contents
Why use NativeWind in React Native (Expo)
NativeWind is a popular styling solution for React Native applications that brings the utility-first approach of Tailwind CSS to mobile development. It allows developers to style components using class names instead of writing traditional StyleSheet objects.
✓Faster React Native styling
NativeWind speeds up development by removing the need to define and manage repetitive StyleSheet objects. Developers can style components directly using utility classes, which reduces boilerplate and improves productivity.
✓Consistent design system
Using Tailwind-style utility classes helps maintain a consistent design system across your React Native application. This is especially useful in larger projects where multiple developers are working on the same codebase.
✓Easier maintenance and scalability
NativeWind makes it easier to update and reuse styles across components. Instead of duplicating styles, developers can rely on reusable utility classes, which improves maintainability in long-term projects.
✓Familiar workflow for Tailwind developers
For developers coming from web development, NativeWind provides a familiar Tailwind CSS-like workflow. This reduces the learning curve when transitioning from React or Next.js to React Native.
✓Cleaner component structure
By moving styling into utility classes, components become more readable and focused on logic rather than styling definitions. This improves overall code quality.
NativeWind Installation
If you haven't set up Expo yet, refer to the official Expo installation and setup guide before continuing.
Depending on your project requirements and Expo SDK version, you may use either Expo Go or a development build (Expo Dev Client). Some newer configurations and native dependencies may require a custom development client instead of Expo Go.
In this article, we'll explain the NativeWind setup process in a way that works across modern Expo SDK versions, including projects using both Expo Go and development builds.
You can refer to the official NativeWind documentation for the latest installation commands.
NativeWind Setup
After installing NativeWind, the next step is configuring your Expo project correctly. While the installation process is relatively simple, most issues developers encounter occur during setup.
NativeWind relies on several configuration files, including tailwind.config.js, global.css, and Metro configuration, all of which must be configured according to your project's structure.
It's also important to consider your Expo SDK version and whether you're using Expo Router, as these factors can affect file locations, content paths, and import statements.
In the following sections, we'll configure each required file step by step and verify that NativeWind is working correctly before moving on to troubleshooting common issues.
Setup Tailwind CSS
Run the following command to create a tailwind.config.js file: npx tailwindcss init
Then, add the paths to all your component files inside the content array in tailwind.config.js. For Expo SDK 54 projects, you can use the following paths:
module.exports = {
// NOTE: Update this to include the paths to all files that contain Nativewind classes.
content: ["./App.tsx", "./components/**/*.{js,jsx,ts,tsx}"],
presets: [require("nativewind/preset")],
theme: {
extend: {},
},
plugins: [],
}
⚠️ Ensure that your content paths include all files that use NativeWind classes. Expo SDK versions may have different project structures, which can affect how these paths should be configured. If you are using Expo SDK 56, add the following line to the content array: "./src/**/*.{js,jsx,ts,tsx}".
Create a CSS file (we'll name it global.css, but you can choose any name you prefer) and add the Tailwind directives:
@tailwind base;
@tailwind components;
@tailwind utilities;
Add the Babel Preset
module.exports = function (api) {
api.cache(true);
return {
presets: [
["babel-preset-expo", { jsxImportSource: "nativewind" }],
"nativewind/babel", ],
};
};
Create metro.config.js file
const { getDefaultConfig } = require("expo/metro-config");
const { withNativeWind } = require('nativewind/metro');
const config = getDefaultConfig(__dirname)
module.exports = withNativeWind(config, { input: './global.css' })
If you encounter any issues, make sure to check your configuration files and verify that all paths and file names are correct.
Import your css file
import "./global.css"
export default App() {
/* Your App */
}
Modify your app.json
{
"expo": {
"web": {
"bundler": "metro"
}}}
Troubleshooting
If NativeWind is not working as expected or styles are not being applied, the issue is usually caused by a configuration problem rather than installation. Check the following common setup issues:
➤ Verify that your tailwind.config.js content paths match your project's folder structure.
➤ Ensure global.css is imported in the correct entry file (such as app/_layout.tsx when using Expo Router).
➤ Clear the Metro cache and restart the development server after changing configuration files.
➤ Confirm that your Babel and Metro configurations match the NativeWind version you're using.
➤ Make sure TypeScript is properly configured and recognizes the className prop.
➤ Verify compatibility between your Expo SDK, React Native version, and NativeWind version.
➤ Avoid copying configuration files from outdated tutorials without checking version differences.
➤ Ensure all directories containing styled components are included in the Tailwind content paths.
➤ Restart the bundler after modifying tailwind.config.js, Metro, or Babel configuration files.
Warning messages can sometimes be misleading, so make sure to carefully review each setup step when troubleshooting.
NativeWind styles not applied (without warning message)
➤Use className instead of class in JSX elements.
➤Check that your tailwind.config.js content paths are correct.
➤Ensure your CSS file is properly imported in the project entry file.
➤Clear the Metro cache if styles are not updating correctly.
Restart the development server after making configuration changes.
Conclusion
Setting up NativeWind with Expo in 2026 is usually straightforward, but small configuration details can make a big difference. Most issues developers encounter are not caused by NativeWind itself, but by mismatched Expo SDK versions, incorrect project structures, or missing configuration in files like tailwind.config.js, global.css, and Metro settings. Once these parts are correctly configured, NativeWind provides a smooth and efficient way to style React Native applications using a familiar Tailwind CSS workflow. In the next article, we'll move beyond setup and explore how to use NativeWind in real-world projects, including layout patterns, reusable components, theming, dark mode support, and best practices for building scalable applications.