Hướng dẫn cài đặt tailwindCSS cho project react native (expo)
Bước 1:
yarn add nativewind
Bước 2:
yarn add --dev tailwindcss@3.3.2
Bước 3:
npx tailwindcss init
Bước 4:
- mở file
tailwind.config.js
- sửa
content: [],
thànhcontent: ["./App.{js,jsx,ts,tsx}", "./<custom directory>/**/*.{js,jsx,ts,tsx}"],
Bước 5:
- mở file
babel.config.js
module.exports = function(api) {
api.cache(true);
return {
presets: ['babel-preset-expo'],
plugins: ["nativewind/babel"], // <========== thêm dòng này
};
};
Bước 6:
Test thử với
import { StatusBar } from 'expo-status-bar';
import React from 'react';
import { Text, View } from 'react-native';
export default function App() {
return (
<View className="flex-1 items-center justify-center bg-white">
<Text>Open up App.js to start working on your app!</Text>
<StatusBar style="auto" />
</View>
);
}
All Rights Reserved