Trusted answers to developer questions
Trusted Answers to Developer Questions

Related Tags

tailwind
react native
javascript
communitycreator

How to use Tailwind CSS in React Native

Chibuike Nwachukwu

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 style={styles.body}>
    <Text style={styles.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 style={[tw`flex flex-row justify-between items-center p-1 h-1/6 w-full -bottom-5`,{
      position: 'absolute',
   }]}>
     
     <View style={[tw`flex-1 flex-row bg-white rounded-full ml-2 justify-between`]}>
     
       <TextInput
           style={[tw`rounded-full ml-2 justify-between`]}
           placeholder="Type a message"
        />
   </View>

   </View>
  )
}

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:

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

const Header = () => {
  return (
    <View style={[tw`flex flex-row items-center h-8 bg-red-900 `,{
      position: "fixed"
    }]}>

    <View style={[tw`flex flex-row justify-between items-center h-8 p-2 w-full bg-red-900 `,{
      position: "absolute"
    }]}>
   
      <Text numberOfLines={1} style={[tw`px-5 text-lg font-extrabold text-white w-2/5`, styles.text]}>
        Hello
      </Text>
     </View>
    </View>
  )
}


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

RELATED TAGS

tailwind
react native
javascript
communitycreator
RELATED COURSES

View all Courses

Keep Exploring