typescript - TailwindCSS nie działa w projekcie React Native

Stworzyłem aplikację React Native używając Expo i próbowałem użyć Tailwind CSS z pomocą NativeWind. Postępowałem zgodnie z tymi dokumentami:

Przeczytaj dokumentację tutaj...

Wersje :

• 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"}]
    ],
  };
};

Po tym dostałem czerwoną linię w moim kodzie podczas używania className, wskazującą na błąd, który został rozwiązany poprzez utworzenie pliku o nazwie 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>
    )
}

Klasy Tailwind w <View> nie działają.

Próbowałem:

1. Ponowne uruchamianie serwera.
2. Zacznij używać --clear npm run start --clear

Odpowiedź #1

zainstaluj i używaj 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>
    )
}

Odpowiedź #2

Napotykałem ten sam problem, zainstalowałem nativewind w wersji 2.0.0 i problem został rozwiązany

Powodzenia