xxxxxxxxxx
//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`}>
xxxxxxxxxx
# Using npm
npm install react-native-tailwindcss
# Using Yarn
yarn add react-native-tailwindcss
xxxxxxxxxx
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>
);
}
xxxxxxxxxx
// this also work with npm install
yarn add nativewind
yarn add --dev tailwindcss
// then initialize tailwind
npx tailwindcss init
// set the content line in your newly created tailwind.config.js
content: ["./App.{js,jsx,ts,tsx}", "./<yourSrcDir>/**/*.{js,jsx,ts,tsx}"]
// if you are using babel, add the plugin in your babel.config.js
// like this :
module.exports = function (api) {
api.cache(true);
return {
presets: ["babel-preset-expo"],
plugins: ["nativewind/babel"],
};
};
// now you should be able to use tailwind in your react-native app,
// check the source for more info
xxxxxxxxxx
// tailwind.config.js
module.exports = {
- content: [],
+ content: ["./App.{js,jsx,ts,tsx}", "./src/**/*.{js,jsx,ts,tsx}"],
theme: {
extend: {},
},
plugins: [],
}
xxxxxxxxxx
cd my-tailwind-native-app
yarn add tailwindcss-react-native
yarn add --dev tailwindcss