Expo and NativeWind

Managing styles in React Native gets harder as projects grow: StyleSheet.create blocks pile up, values drift, and consistency erodes. NativeWind brings Tailwind CSS’s utility-first model to React Native, so styling lives next to markup and design tokens stay centralized.

It integrates cleanly with Expo and has become a popular choice for modern mobile projects.

Setup

Install NativeWind and point your Tailwind config at the app files:

npx expo install nativewind tailwindcss

// tailwind.config.js
module.exports = {
  content: ['./app/**/*.{js,jsx,ts,tsx}', './components/**/*.{ts,tsx}'],
  presets: [require('nativewind/preset')],
  theme: { extend: {} },
};

After that, the className prop works on React Native components.

Utility-first styling

Instead of maintaining a separate StyleSheet, you compose small utilities inline:

import { View, Text } from 'react-native';

export function Card() {
  return (
    <View className="rounded-2xl bg-white p-4 shadow-sm">
      <Text className="text-lg font-semibold text-gray-900">Title</Text>
      <Text className="mt-1 text-sm text-gray-500">Supporting text</Text>
    </View>
  );
}

This keeps styles readable and encourages reuse — a card looks the same everywhere because it uses the same classes.

Centralized theming and dark mode

Color palettes, spacing, and dark mode are defined once in the config and used everywhere:

// tailwind.config.js
theme: {
  extend: {
    colors: { brand: { DEFAULT: '#9ac917', dark: '#6f9410' } },
  },
}

<View className="bg-white dark:bg-black">
  <Text className="text-brand">Branded</Text>
</View>

Changing the brand color is a one-line edit instead of a find-and-replace across StyleSheets.

Conclusion

Expo and NativeWind are a productive combination for modern React Native development. Utilities keep components readable, the Tailwind config keeps the design system in one place, and styles are resolved at build time where possible — a cleaner architecture that scales as the app grows.