I recently created a React Native app using the command:

npx create-expo-app@latest

After the project was generated, I noticed the folder structure like this:

Folder Structure Image

My main question is:

1. How can I add Tailwind CSS or Nativewind CSS to a React Native app created using Expo?

2. Does npx create-expo-app@latest include babel.config.js by default?

• If not, how can I create one and configure it correctly for Tailwind CSS / Nativewind CSS?

Steps I Tried So Far:

I checked for babel.config.js but it was not present.

I tried reinstalling with npx create-expo-app@latest multiple times but still no babel.config.js.

Any guidance on properly integrating Tailwind CSS / Nativewind CSS into my React Native app would be greatly appreciated!

I recently created a React Native app using the command:

npx create-expo-app@latest

After the project was generated, I noticed the folder structure like this:

Folder Structure Image

My main question is:

1. How can I add Tailwind CSS or Nativewind CSS to a React Native app created using Expo?

2. Does npx create-expo-app@latest include babel.config.js by default?

• If not, how can I create one and configure it correctly for Tailwind CSS / Nativewind CSS?

Steps I Tried So Far:

I checked for babel.config.js but it was not present.

I tried reinstalling with npx create-expo-app@latest multiple times but still no babel.config.js.

Any guidance on properly integrating Tailwind CSS / Nativewind CSS into my React Native app would be greatly appreciated!

• react-native
• expo
• tailwind-css
• babeljs
• nativewind

1 Answer 1

Question 1:

There are starters with NativeWind installed:

• npx create-expo-app@latest --example with-nativewind or
• npx create-expo-stack@latest --nativewind

Question 2.

Yes, you are correct: Expo handles the babel.config.js behind the scenes. Opt-out by simply creating your own file in the root of your app which will be necessary sooner or later:

// babel.config.js (default)
module.exports = function (api) {
  api.cache(true);
  return {
    presets: ['babel-preset-expo'],
  };
};

// babel.config.js (nativewind)
module.exports = function (api) {
  api.cache(true);
  return {
    presets: [
      ["babel-preset-expo", { jsxImportSource: "nativewind" }],
      "nativewind/babel",
    ],
  };
};

→ You need also to create a metro.config.js if deciding to manually install NativeWind, this file is also handled by Expo behind the scenes and you can opt-out by creating your own file.

NativeWind: Manual installation guide