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
npm react-native start
8.使用
import tw from 'twrnc';
<View style={tw`bg-blue-500`}>
<Text>Hello, World!11111111111111111111111111111111111</Text>
</View>