NativeWind Patterns Skill

This skill covers NativeWind styling for React Native applications.

When to Use

Use this skill when:

• Styling React Native components
• Converting Tailwind patterns to mobile
• Implementing dark mode
• Responsive mobile design

Core Principle

UTILITY FIRST - Use className with Tailwind utilities adapted for mobile.

Installation

npx expo install nativewind
npm install --dev tailwindcss
npx tailwindcss init

Configuration

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

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

Basic Usage

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

export function Card(): React.ReactElement {
  return (
    <View className="bg-white rounded-lg p-4 shadow-md">
      <Text className="text-lg font-bold text-gray-900">
        Card Title
      </Text>
      <Text className="text-sm text-gray-600 mt-2">
        Card description
      </Text>
    </View>
  );
}

Flexbox Layouts

// Center content
<View className="flex-1 items-center justify-center">
  <Text>Centered</Text>
</View>

// Space between
<View className="flex-row items-center justify-between">
  <Text>Left</Text>
  <Text>Right</Text>
</View>

// Vertical stack with gap
<View className="flex-col gap-4">
  <Text>Item 1</Text>
  <Text>Item 2</Text>
</View>

// Horizontal stack
<View className="flex-row items-center gap-2">
  <Icon />
  <Text>With Icon</Text>
</View>

Dark Mode

<View className="bg-white dark:bg-gray-900">
  <Text className="text-gray-900 dark:text-white">
    Adaptive text
  </Text>
</View>

// Check dark mode status
import { useColorScheme } from 'nativewind';

function Component(): React.ReactElement {
  const { colorScheme, toggleColorScheme } = useColorScheme();

  return (
    <TouchableOpacity onPress={toggleColorScheme}>
      <Text>{colorScheme === 'dark' ? 'Light Mode' : 'Dark Mode'}</Text>
    </TouchableOpacity>
  );
}

Platform-Specific Styles

import { Platform } from 'react-native';

<View className={Platform.select({
  ios: 'pt-12',      // iOS status bar
  android: 'pt-6',   // Android status bar
  default: 'pt-8'
})}>
  <Text>Platform-adaptive padding</Text>
</View>

Common Mobile Patterns

Safe Touch Targets

// Minimum 44x44 points for accessibility
<TouchableOpacity className="min-h-[44] min-w-[44] items-center justify-center">
  <Text>Tap Me</Text>
</TouchableOpacity>

Card Component

<View className="bg-white rounded-xl p-4 shadow-sm border border-gray-100">
  <Text className="text-lg font-semibold">Title</Text>
  <Text className="text-gray-600 mt-1">Description</Text>
</View>

Button Variants

// Primary Button
<TouchableOpacity className="bg-blue-600 py-3 px-6 rounded-lg active:bg-blue-700">
  <Text className="text-white font-semibold text-center">Primary</Text>
</TouchableOpacity>

// Secondary Button
<TouchableOpacity className="bg-gray-100 py-3 px-6 rounded-lg active:bg-gray-200">
  <Text className="text-gray-900 font-semibold text-center">Secondary</Text>
</TouchableOpacity>

// Outline Button
<TouchableOpacity className="border border-blue-600 py-3 px-6 rounded-lg">
  <Text className="text-blue-600 font-semibold text-center">Outline</Text>
</TouchableOpacity>

Input Fields

<View className="mb-4">
  <Text className="text-gray-700 mb-1 font-medium">Label</Text>
  <TextInput
    className="bg-gray-50 border border-gray-300 rounded-lg px-4 py-3 text-gray-900"
    placeholder="Enter text..."
    placeholderTextColor="#9CA3AF"
  />
</View>

Spacing Scale

// Padding
<View className="p-0">   {/* 0 */}
<View className="p-1">   {/* 4px */}
<View className="p-2">   {/* 8px */}
<View className="p-4">   {/* 16px */}
<View className="p-6">   {/* 24px */}
<View className="p-8">   {/* 32px */}

// Margin
<View className="m-4">   {/* All sides */}
<View className="mx-4">  {/* Horizontal */}
<View className="my-4">  {/* Vertical */}
<View className="mt-4">  {/* Top only */}

Colors

// Text colors
<Text className="text-gray-900">   {/* Primary text */}
<Text className="text-gray-600">   {/* Secondary text */}
<Text className="text-gray-400">   {/* Muted text */}
<Text className="text-blue-600">   {/* Link/accent */}
<Text className="text-red-500">    {/* Error */}
<Text className="text-green-500">  {/* Success */}

// Background colors
<View className="bg-white">        {/* Surface */}
<View className="bg-gray-50">      {/* Background */}
<View className="bg-gray-100">     {/* Muted background */}
<View className="bg-blue-600">     {/* Primary */}

Limitations

Not all Tailwind classes work on React Native:

• No hover: (use active: instead)
• No grid (use flexbox)
• No cursor-pointer
• No CSS filters
• Limited box-shadow (use shadow-sm, shadow-md, etc.)

Notes

• Always test on both iOS and Android
• Use active: instead of hover: for touch feedback
• Keep styles consistent with platform conventions
• Use NativeWind's useColorScheme for dark mode