TWRNC Library Cheatsheet
I gave Nativewind 4 a try but had to abandon it after it rudely broke existing StyleSheet-based components from my design system library. Hot reloading broke too. twrnc is a much better approach. It just converts Tailwind class strings to Style objects without touching anything else in your app.
Karl
Published July 27, 2025
Basic Usage - `tw` Tagged Template
import tw from 'twrnc';
// ✅ Simple classes
<View style={tw`bg-blue-500 p-4 flex-row`}>
<Text style={tw`text-white font-bold`}>Hello</Text>
// ✅ Platform-specific
<View style={tw`ios:pt-4 android:pt-2`}>
// ✅ Dark mode
<Text style={tw`text-black dark:text-white`}>
// ✅ Breakpoints
<View style={tw`flex-col lg:flex-row`}>
Conditional Classes - Use `tw.style()`
// ❌ DON'T use template literal interpolation
<View style={tw`bg-blue-500 ${isActive && 'bg-red-500'}`}> // Won't work!
✅ DO use tw.style() for conditionals
<View style={tw.style(
'bg-blue-500 p-4',
isActive && 'bg-red-500',
isDisabled && 'opacity-50'
)}>
// ✅ Object syntax
<View style={tw.style({
'bg-blue-500': !isActive,
'bg-red-500': isActive,
'opacity-50': isDisabled
})}>
// ✅ Mix with RN styles
<View style={tw.style('mt-4', { width: `${progress}%` })}>
Key Rule
- Template literals (`tw``) = static classes only
- Dynamic/conditional = use
tw.style()
That's it! For anything beyond simple static classes, reach for tw.style().