typescript - TailwindCSS tidak bekerja di proyek React Native

Saya membuat aplikasi React Native menggunakan Expo dan mencoba menggunakan Tailwind CSS dengan bantuan NativeWind. Saya mengikuti dokumentasi ini:

Baca dokumennya di sini...

Versi :

• react-native : 0.74.3
• nativewind: 2.0.11
• typescript: 5.3.3
• tailwindcss: 3.3.2

tailwind.config.js:

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: ["./app/**/*.{js,jsx,ts,tsx}", "./components/**/*.{js,jsx,ts,tsx}"],
  theme: {
    extend: {
    },
  },
  plugins: [],
};

babel.config.js:

module.exports = function (api) {
  api.cache(true);
  return {
    presets: ['babel-preset-expo'],
    plugins: [
      ["nativewind/babel",{mode : "compileOnly"}]
    ],
  };
};

Setelah ini, saya mendapatkan garis merah di kode saya saat menggunakan className yang menunjukkan adanya kesalahan yang diselesaikan dengan membuat file bernama my-app.d.ts.

/// <reference types="nativewind/types" />

index.tsx:

import { StatusBar } from 'expo-status-bar';
import { Text, View } from "react-native";
import { Link } from 'expo-router'

export default function App() {
    return (
        <View className="flex-1 items-center justify-center bg-white">
            <Text className="text-3xl">Hello! I am starting from Home</Text>
            <StatusBar style='auto' />
            <Link href="/profile" style={{color : 'blue'}}>Go To Profile</Link>
        </View>
    )
}

Kelas Tailwind di <View> tidak berfungsi.

Saya mencoba:

1. Memulai ulang server lagi.
2. Mulai menggunakan --clear npm run start --clear

Jawaban #1

pasang dan gunakan twrnc

import tw from 'twrnc';
import { StatusBar } from 'expo-status-bar';
import { Text, View } from "react-native";
import { Link } from 'expo-router'

export default function App() {
    return (
        <View style={tw`flex-1 items-center justify-center bg-white`}>
            <Text style={tw`text-3xl`}>Hello! I am starting from Home</Text>
            <StatusBar style='auto' />
            <Link href="/profile" style={{color : 'blue'}}>Go To Profile</Link>
        </View>
    )
}

Jawaban #2

Saya mengalami masalah yang sama, saya menginstal nativewind versi 2.0.0, dan masalah itu teratasi

Semoga berhasil