nativewind 中的 Tailwind css 未应用于屏幕组件答案

【问题标题】：Tailwaind css in nativewind is not beign applied on Screen componentsnativewind 中的 Tailwind css 未应用于屏幕组件
【发布时间】：2023-01-11 05:34:29
【问题描述】：

原生风中的 Tailwind CSS 未应用于屏幕组件。我的项目中是否缺少任何包或依赖项。

这是一个 package.json

{
  "name": "first-app",
  "version": "1.0.0",
  "main": "node_modules/expo/AppEntry.js",
  "scripts": {
    "start": "expo start",
    "android": "expo start --android",
    "ios": "expo start --ios",
    "web": "expo start --web"
  },
  "dependencies": {
    "@react-navigation/native": "^6.0.13",
    "@react-navigation/native-stack": "^6.9.1",
    "expo": "~46.0.13",
    "expo-status-bar": "~1.4.0",
    "nativewind": "^2.0.11",
    "react": "18.0.0",
    "react-native": "0.69.6",
    "react-native-safe-area-context": "4.3.1",
    "react-native-screens": "~3.15.0"
  },
  "devDependencies": {
    "@babel/core": "^7.12.9",
    "tailwindcss": "^3.2.0"
  },
  "private": true
}

Tailwind CSS 应用于 App.js 但应用于屏幕组件


import { StatusBar } from 'expo-status-bar';
import { NavigationContainer } from '@react-navigation/native';
import { createNativeStackNavigator } from '@react-navigation/native-stack';
import HomeScreen from './screens/HomeScreen';

export default function App() {
  const Stack = createNativeStackNavigator();
  return (
    <NavigationContainer>
    <Stack.Navigator>
      <Stack.Screen name="Home" component={HomeScreen} />
    </Stack.Navigator>
  </NavigationContainer>
  );
}

这是未应用原生风（ tailwind ）的屏幕组件

import { View, Text } from 'react-native'
import React from 'react'

const HomeScreen = () => {
  return (
    <View className="flex-1 text-center align-middle justify-center">
    <Text className="bg-black text-white">App</Text>
    </View>
  )
}

export default HomeScreen

【问题讨论】：

这回答了你的问题了吗？ TailWindCSS not working on React Native Navigation

标签： react-native tailwind-css

【解决方案1】：

首先我的tailwind.config.js 看起来像这样

module.exports = {
 
  content: ["./App.{js,jsx,ts,tsx}", "./components/**/*.{js,jsx,ts,tsx}", "./screens/**/*.{js,jsx,ts,tsx}"],
   theme: {
     extend: {},
    },
    plugins: [],
  }

然后我用下面的代码改变了它。主要变化在content部分。通过应用上述更改，tailwindcss 开始在屏幕和组件中应用。这对我有用

module.exports = {
    content:[
    "./screens/**/*.{js,jsx,ts,tsx}",
    "./pages/**/*.{js,jsx,ts,tsx}",
    "./components/**/*.{js,jsx,ts,tsx}",
  ],
  theme: {
    extend: {},
  },
  plugins: [],
};

【讨论】：