NativeWind (Tailwind CSS for React Native) styling patterns. Use when styling mobile components.
This skill inherits all available tools. When active, it can use any tool Claude has access to.
This skill covers NativeWind styling for React Native applications.
Use this skill when:
UTILITY FIRST - Use className with Tailwind utilities adapted for mobile.
npx expo install nativewind
npm install --dev tailwindcss
npx tailwindcss init
// 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"],
};
};
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>
);
}
// 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>
<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>
);
}
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>
// Minimum 44x44 points for accessibility
<TouchableOpacity className="min-h-[44] min-w-[44] items-center justify-center">
<Text>Tap Me</Text>
</TouchableOpacity>
<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>
// 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>
<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>
// 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 */}
// 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 */}
Not all Tailwind classes work on React Native:
hover: (use active: instead)grid (use flexbox)cursor-pointershadow-sm, shadow-md, etc.)active: instead of hover: for touch feedback