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ành content: ["./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>
  );
}