타입스크립트 - React Native 프로젝트에서 TailwindCSS가 작동하지 않음

저는 Expo를 사용하여 React Native 앱을 만들었고 NativeWind의 도움으로 Tailwind CSS를 사용하려고 했습니다. 저는 다음 문서를 따라 했습니다:

여기에서 문서를 읽으세요...

버전 :

• react-native : 0.74.3
• nativewind: 2.0.11
• 타입스크립트: 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"}]
    ],
  };
};

이후, className을 사용하는 동안 코드에 빨간 줄이 생겼는데, 이는 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>
    )
}

<View>의 Tailwind 클래스가 작동하지 않습니다.

나는 시도했다:

1. 서버를 다시 시작하고 있습니다.
2. --clear npm run start --clear 사용 시작

답변 #1

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>
    )
}

답변 #2

저도 같은 문제를 겪었고, nativewind 버전 2.0.0을 설치했더니 문제가 해결되었습니다

행운을 빌어요