Breaking News: Grepper is joining You.com. Read the official announcement!

install tailwind css in react native

Add Answer

Shirshak Kandel answered on July 11, 2022 Popularity 10/10 Helpfulness 5/10

answer install tailwind css in react native

related npmj tailwind css react native

related Setup Tailwind CSS in react-native or react

related npmj tailwind css react native

related Install tailwindcss-react-native in native app

related how to use tailwind css in react native

install tailwind css in react native

Comment

1)install tailwindcss-react-native as dependencies and tailwindcss and devDependecies
yarn add tailwindcss-react-native
yarn add --dev tailwindcss

2)Setup tailwind css creating tailwind.config.js
// tailwind.config.js
module.exports = {
 content: ["./App.{js,jsx,ts,tsx}", "./src/**/*.{js,jsx,ts,tsx}"],
  theme: {
    extend: {},
  },
  plugins: [],
}

3)Add babel plugin 
// babel.config.js
module.exports = {
plugins: ["tailwindcss-react-native/babel"],
};

4)add tailwind Provider in App.js
// App.js
import React from 'react';
import { StyleSheet, Text, View } from 'react-native';
import { TailwindProvider } from 'tailwindcss-react-native';

export default function App() {
  return (
   <TailwindProvider>
      <View style={styles.container}>
        <Text>Open up App.js to start working on your app!</Text>
      </View>
  </TailwindProvider>
  );
}

Popularity 10/10 Helpfulness 5/10 Language shell

Source: tailwindcss-react-native.vercel.app

Tags: react-native shell tailwind-css

Link to this answer
Share Copy Link

Contributed on Aug 16 2022

Shirshak Kandel

0 Answers Avg Quality 2/10

Closely Related Answers

npmj tailwind css react native

Comment

# Using npm
npm install react-native-tailwindcss

# Using Yarn
yarn add react-native-tailwindcss

Popularity 9/10 Helpfulness 5/10 Language css

Source: www.npmjs.com

Tags: css react-native react-nati

Link to this answer
Share Copy Link

Contributed on Sep 01 2023

Wicked Wryneck

0 Answers Avg Quality 2/10

Setup Tailwind CSS in react-native or react

Comment

// tailwind.config.js
module.exports = {
- content: [],
+ content: ["./App.{js,jsx,ts,tsx}", "./src/**/*.{js,jsx,ts,tsx}"],
  theme: {
    extend: {},
  },
  plugins: [],
}

Popularity 10/10 Helpfulness 3/10 Language whatever

Source: tailwindcss-react-native.vercel.app

Tags: react-native react-nati

Link to this answer
Share Copy Link

Contributed on Jul 11 2022

Fragile Finch

0 Answers Avg Quality 2/10

npmj tailwind css react native

Comment

npx RNtailwindcss

Popularity 7/10 Helpfulness 2/10 Language css

Source: www.npmjs.com

Tags: css react-native react-n

Link to this answer
Share Copy Link

Contributed on Sep 01 2023

Wicked Wryneck

0 Answers Avg Quality 2/10

Install tailwindcss-react-native in native app

Comment

-1

cd my-tailwind-native-app
yarn add tailwindcss-react-native
yarn add --dev tailwindcss

Popularity 10/10 Helpfulness 2/10 Language whatever

Source: tailwindcss-react-native.vercel.app

Tags: native na

Link to this answer
Share Copy Link

Contributed on Jul 11 2022

Fragile Finch

0 Answers Avg Quality 2/10

how to use tailwind css in react native

Comment

-1

//Use TailwindCss in ReactNative 
Install twrnc: npm install twrnc
import tw from "twrnc";
Be sure to install the TailWind CSS Intellisense extension in VS code
Go to the extension settings and add 'style' in Class Attributes
Go to your project root folder and manually create a file named 'tailwind.js' or 'tailwind.config.js'
Start using TWCSS as in the docs: eg; <View style={tw`bg-gray-300 flex flex-1 px-5 pt-20`}>

Popularity 10/10 Helpfulness 1/10 Language javascript

Source: Grepper

Tags: javascript j

Link to this answer
Share Copy Link

Contributed on Oct 06 2022

Anatu Green

0 Answers Avg Quality 2/10

install tailwind css in react native

Contents

More Related Answers

install tailwind css in react native

Closely Related Answers

npmj tailwind css react native

Setup Tailwind CSS in react-native or react

npmj tailwind css react native

Install tailwindcss-react-native in native app

how to use tailwind css in react native

Grepper

Documentation

Social

Legal

Contact

Oops, You will need to install Grepper and log-in to perform this action.