How to use Tailwind CSS in React Native

Tailwind CSS has brought lots of flexibility in the way we style web components. This has led to its wide acceptance by developers, industry players, and companies.

Tailwind CSS is a highly customizable, low-level, utility-first CSS framework for rapidly building custom user interfaces.

React Native, on the other hand, allows us to build cross-platform apps using JavaScript.

Styling in React Native

There are many ways styling can be done:

• CSS module
• Stylesheet
• UI libraries

Now, lets look at an example that uses StyleSheet.

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

const Header = () => {
  return (
    <View>
    <Text> Welcome to Educative</Text>
   
  </View>
)}

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

Styling with TailwindCss

There are some useful packages that bring the Power of Tailwind into React Native.

Here, we would use the tailwind-react-native-classnames package.

import React from 'react'
import {TextInput, View } from 'react-native'
import tw from 'tailwind-react-native-classnames'

const Container = () => {
  return (
    <View      position: 'absolute',
   }]}>
     
     <View>
     
       <TextInput
                     placeholder="Type a message"
        />
   </View>

   </View>
  )
}

`flex flex-row justify-between items-center p-1 h-1/6 w-full -bottom-5``

Here, we see how we can get the beauty of Tailwind into React Native. We can also combine it with StyleSheet and inline styling.

Have a look: 

`flex-1 flex-row bg-white rounded-full ml-2 justify-between``
import React from 'react'
import { StyleSheet, Text, View } from 'react-native'
import tw from 'tailwind-react-native-classnames'

const Header = () => {
  return (
    <View      position: "fixed"
    }]}>

    <View      position: "absolute"
    }]}>
   
      <Text numberOfLines={1} styles.text]}>
        Hello
      </Text>
     </View>
    </View>
  )
}


const styles = StyleSheet.create({  
text: {      
  width: 120,      
  paddingTop: 10,      
  paddingRight: 10,      
  paddingBottom: 10,      
  paddingLeft: 0,           
  color: '#424242',  
 },
});
`rounded-full ml-2 justify-between``