react native - Expo-ReactNative-NativeWind: className effects not working - Stack Overflow

admin管理员组

文章数量:1332345

Just starting off working on a React Native project, when installing packages, I couldn't get the effects to work... not sure if it's a problem with my configs or setup.

Here is my code:

Inside app file:

index.tsx 

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


export default function Index() {
  return (
    <View className="items-center">
      <Text className="text-10xl font-bold text-red-500">
        Hello, TailwindCSS with NativeWind! weofijweojweoifjwaiojfaoifjaew
      </Text>
    </View>
  );
}

---
_layout.tsx

import { Text, View } from 'react-native';
import { Slot, Stack } from 'expo-router';
import { StackActions } from '@react-navigation/native';

import React from 'react';

import "./global.css";

const RootLayout = () => {
  return (
  <Stack>
    <Stack.Screen name="index" options = {{ headerShown: false }} />

  </Stack>

  )
}

export default RootLayout

---
global.css

@tailwind base;
@tailwind components;
@tailwind utilities;

Outside of app file:

tailwind.config.js

    /** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    "./App.{js,jsx,ts,tsx}",
    "./screens/**/*.{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", { jsxImportSource: "nativewind" }],
        "nativewind/babel",
      ],
    };
  };

---
metro.config.js

const { getDefaultConfig } = require("expo/metro-config");
const { withNativeWind } = require('nativewind/metro');

const config = getDefaultConfig(__dirname);

module.exports = withNativeWind(config, { input: './global.css' });

---
nativewind-env.d.ts

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

I followed a few utube vids and the dos from native wind, can only display the text in index.tsx without any styles.

I've also tried

1. to clear the cache
2. to check if packages are installed

本文标签： react nativeExpoReactNativeNativeWind className effects not workingStack Overflow