React Native with NativeWind Project Structure

NativeWind (Tailwind CSS) styling. Use className instead of StyleSheet objects.

#react-native #expo #nativewind #tailwind #css #styling

PNG PDF

Project Directory

my-app/

app.json

package.json

tsconfig.json

babel.config.js

NativeWind preset

tailwind.config.js

Tailwind configuration

metro.config.js

CSS support

global.css

@tailwind directives

nativewind-env.d.ts

Type declarations

.gitignore

app/

_layout.tsx

Import global.css here

index.tsx

(tabs)/

_layout.tsx

index.tsx

profile.tsx

components/

Button.tsx

className-styled

Card.tsx

Avatar.tsx

lib/

utils.ts

cn() helper for classnames

hooks/

useColorScheme.ts

constants/

theme.ts

assets/

images/

Why This Structure?

NativeWind v4 brings Tailwind CSS to React Native. Write className="flex-1 bg-blue-500 p-4" instead of StyleSheet objects. Same mental model as Tailwind web. Supports dark mode, arbitrary values, and most Tailwind utilities.

Key Directories

tailwind.config.js-Standard Tailwind config, custom colors/spacing
global.css-@tailwind base/components/utilities directives
app/_layout.tsx-Import global.css at root
lib/utils.ts-cn() helper for conditional classes

NativeWind Component

// components/Button.tsx
import { Pressable, Text } from 'react-native';

export function Button({ title, onPress }) {
  return (
    
      
        {title}
      
    
  );
}

Getting Started

npx create-expo-app@latest my-app
npx expo install nativewind tailwindcss
Create tailwind.config.js and global.css
Configure babel.config.js with NativeWind preset
Import global.css in root _layout.tsx

When To Use This

Team knows Tailwind from web development
Want consistent styling between web and mobile
Prefer utility classes over StyleSheet
Building design systems with Tailwind patterns
Rapid UI development with familiar utilities

Trade-offs

Setup complexity-Babel/Metro config required
Not all utilities-Some web-only Tailwind features unavailable
Bundle size-CSS processing adds overhead