react Native 使用 react-native-tailwindcss

1.安装postcss 和 tailwindcss

        npm install -D react-native-tailwindcss postcss autoprefixer

2.创建tailwind.config.js 和postcss.config.js

        npx tailwindcss init -p

3.在项目的tailwind.config.js文件中配置purge选项，以仅包含您正在使用的Utility Classes：

// tailwind.config.js
module.exports = {
  purge: ['./index.js', './src/**/*.{js,jsx,ts,tsx}'], // 根据实际情况配置路径
  darkMode: false, // or 'media' or 'class'
  theme: {
    extend: {},
  },
  variants: {
    extend: {},
  },
  plugins: [],
};

4.安装在React Native项目中安装twrnc 

npm install twrnc

5.在React Native项目中创建或更新rn-cli.config.js文件，以使用twrnc与Tailwind CSS集成：

module.exports = {
  getTransformModulePath() {
    return require.resolve('twrnc/index.js');
  },
  getSourceExts() {
    return ['ts', 'tsx', 'js', 'jsx', 'json', 'css'];
  },
};

6.最后，确保在项目的package.json文件中添加必要的脚本：

"scripts": {

        build:css": "postcss ./index.css -o ./dist/index.css"

}

7.在index.js中引用

import 'react-native-tailwindcss'

运行构建CSS的脚本，并启动React Native应用程序：

npm run build:css

 如果构建运行失败，安装postcss-cli，再试试上一步
npm react-native start

 8.使用

import tw from 'twrnc';

<View style={tw`bg-blue-500`}>

      <Text>Hello, World!11111111111111111111111111111111111</Text>

  </View>