React Native ↔ Tailwind Converter

NativeWind is a library that brings Tailwind CSS utility classes to React Native. It uses the Tailwind CSS compiler to generate styles at build time, then applies them via React Native's StyleSheet API. This means you can write className='text-lg font-bold text-blue-500' in your RN components just like in web development, rather than using StyleSheet.create() objects.

Not all Tailwind classes have RN equivalents. Supported: text size/color/weight, background color, margin, padding, flex, border radius, width, height, opacity. Unsupported: box shadows (limited), some pseudo-classes (:hover works on some platforms), CSS grid (use flex instead), transition animations (use Animated API or Reanimated). NativeWind v4 improved coverage significantly.

In React Native, margin and padding work the same as CSS but with shorthand differences. RN accepts individual sides (marginTop, paddingLeft) and uses camelCase. There's no shorthand like margin: '8px 16px' — you must set each side separately or use marginVertical/marginHorizontal. Tailwind shorthand like m-2 (margin on all sides) translates to margin: 8 in RN.

React Native accepts hex (#333333), rgb(), rgba(), and named colors. Tailwind color classes like text-blue-500 map to specific hex values (e.g., #3b82f6). When converting, the tool maps Tailwind color names to their hex values. In NativeWind, you can use Tailwind color utilities directly. Custom colors defined in tailwind.config.js work the same in both environments.

React Native doesn't have CSS media queries. Common approaches: 1) Dimensions API — get screen width/height and compute styles. 2) useWindowDimensions hook for reactive updates. 3) Platform.select() for iOS vs Android differences. 4) NativeWind's breakpoint system (sm:, md:, lg:) maps to device width breakpoints. For most cases, flexbox with flex-wrap handles responsive layouts without explicit breakpoints.