您可以按照本机风文档中给出的指南进行操作。
https://www.nativewind.dev/guides/troubleshooting
https://www.nativewind.dev/guides/cli-native#native
按照下面给出的步骤
将NativeWind插件添加到tailwind.config.js
我的tailwind.config.js在下面
const nativewind = require('nativewind/tailwind/native');
module.exports = {
content: [
'./App.{js,jsx,ts,tsx}',
'./screens/**/*.{js,jsx,ts,tsx}',
'./pages/**/*.{js,jsx,ts,tsx}',
'./components/**/*.{js,jsx,ts,tsx}',
],
theme: {
extend: {},
},
plugins: [nativewind()],
};
将tailwinds添加到postcss.config.js中,它看起来像这样
module.exports = {
plugins: {
'nativewind/postcss': {
output: 'nativewind-output.js',
},
},
};
创建一个PostCSS配置文件,就像这样
// postcss.config.js
module.exports = {
plugins: {
'nativewind/postcss': {
output: 'nativewind-output.js',
},
},
};
将NativeWind插件添加到您的tailwind.config.js中,并根据您的矿井添加文件夹,分别是组件,页面和屏幕以及app.js
/** @type {import('tailwindcss').Config} */
const nativewind = require('nativewind/tailwind/native');
module.exports = {
content: [
'./App.{js,jsx,ts,tsx}',
'./screens/**/*.{js,jsx,ts,tsx}',
'./pages/**/*.{js,jsx,ts,tsx}',
'./components/**/*.{js,jsx,ts,tsx}',
],
theme: {
extend: {},
},
plugins: [nativewind()],
};
运行Tailwind CLI将生成nativewind-output.js。在此之前,您应该创建output.css
并运行给定的命令
npx tailwindcss -i input.css --postcss postcss.config.js
通过在app.js中添加以下行将样式导入App.jsx
import "./nativewind-output"
然后在package.json中,您必须通过添加以下行来对脚本进行小的更改,将"start": "expo start"
替换为下面的行
// package.json
{
"scripts": {
// Change
"start": "concurrently \"tailwindcss -i input.css --postcss postcss.config.js --watch\" \"expo start\""
},
//
}
最后重新启动开发服务器,并开始在react native cli应用程序中编写tailwinds
2条答案
按热度按时间j8yoct9x1#
我试过了,似乎不起作用,你写的是React Native CLI,但你的最后一行是:
你能澄清一下吗。
u4dcyp6a2#
这是使用Native wind(Tailwind css)设置的React native Cli项目的GitHub存储库的链接
https://github.com/noman2233/React-native-cli-template-with-native-wind-tailwind-css-Setup.git