[ReactNative] Tailwind React Native Classnames 사용법

1. Install

npm: tailwind-react-native-classnames

npm i tailwind-react-native-classnames

2. 사용법

Educative Answers - Trusted Answers to Developer Questions

import tw from 'tailwind-react-native-classnames'

// tailwind & style
<View style={[tw`flex flex-row justify-between items-center p-1 h-1/6 w-full -bottom-5`,{position: 'absolute',}]}>

// tailwind & StyleSheet
<Text numberOfLines={1} style={[tw`px-5 text-lg font-extrabold text-white w-2/5`, styles.text]}>

const styles = StyleSheet.create({  
text: {      
  width: 120,      
  paddingTop: 10,      
  paddingRight: 10,      
  paddingBottom: 10,      
  paddingLeft: 0,           
  color: '#424242',  
 },
});

// 조건부 Style
<Text
  style={[
    tw`border-2 border-red-900  ${
      state === 'disabled' ? 'text-gray-300' : ''
    }`,
    {
      textAlign: 'center',
      color: state === 'disabled' ? 'gray' : 'black',
    },
  ]}
>