Nativewind Tailwind 不渲染 css 效果

Question

我正在使用 React Native 创建一个使用 NativeWind 的应用程序，但是，我似乎无法让顺风正确显示。我使用 Nativewind 指南通过 React Native cli 设置 Tailwind。

babel.config.js

module.exports = {
  presets: ['module:metro-react-native-babel-preset'],
  plugins: ["nativewind/babel"],
};

tailwind.config.js

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

package.json

{
  "name": "investanapp",
  "version": "0.0.1",
  "private": true,
  "scripts": {
    "android": "react-native run-android",
    "ios": "react-native run-ios",
    "lint": "eslint .",
    "start": "react-native start",
    "test": "jest"
  },
  "dependencies": {
    "nativewind": "^2.0.11",
    "react": "18.2.0",
    "react-native": "0.72.4"
    
  },
  "devDependencies": {
    "@babel/core": "^7.20.0",
    "@babel/preset-env": "^7.20.0",
    "@babel/runtime": "^7.20.0",
    "@react-native/eslint-config": "^0.72.2",
    "@react-native/metro-config": "^0.72.11",
    "@tsconfig/react-native": "^3.0.0",
    "@types/react": "^18.0.24",
    "@types/react-test-renderer": "^18.0.0",
    "babel-jest": "^29.2.1",
    "eslint": "^8.19.0",
    "jest": "^29.2.1",
    "metro-react-native-babel-preset": "0.76.8",
    "prettier": "^2.4.1",
    "react-test-renderer": "18.2.0",
    "typescript": "4.8.4",
    "tailwindcss": "^3.3.3"
  },
  "engines": {
    "node": ">=16"
  }
}

Answer 1

创建名为nativewind-env.d.ts的文件并在其中放入以下代码以获取className

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