文章/答案/技术大牛

发布

社区首页 >问答首页 >为什么我的尾风CSS什么都不做？

问为什么我的尾风CSS什么都不做？
EN

Stack Overflow用户

提问于 2022-07-16 05:32:24

回答 2查看 395关注 0票数 2

由于某些原因，我不能让顺风rn真正的风格我的程序。当我运行expo时，这些项目没有对齐到中心，即使我把它放在代码中。

import { StyleSheet, Text, View, Button } from 'react-native';
import {TailwindProvider} from 'tailwind-rn';
import utilities from './tailwind.json';
import {useTailwind} from 'tailwind-rn';

export default function App() {

  const tailwind = useTailwind();
  return (
    <TailwindProvider utilities={utilities}>
      <View style={tailwind('flex-1 items-center justify-center')}>
        <Text>Hello</Text>
        <StatusBar style="auto" />
    </View>
   </TailwindProvider>
    
  );
}

这是我的package.json文件：

{
  "name": "mari-application",
  "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",
    "eject": "expo eject",
    "build:tailwind": "tailwindcss --input input.css --output tailwind.css --no-autoprefixer && tailwind-rn",
    "dev:tailwind": "concurrently \"tailwindcss --input input.css --output tailwind.css --no-autoprefixer --watch\" \"tailwind-rn --watch\""
  },
  "dependencies": {
    "expo": "~45.0.0",
    "expo-status-bar": "~1.3.0",
    "react": "17.0.2",
    "react-dom": "17.0.2",
    "react-native": "0.68.2",
    "react-native-web": "0.17.7",
    "tailwind-rn": "^4.2.0"
  },
  "devDependencies": {
    "@babel/core": "^7.12.9",
    "concurrently": "^7.2.2",
    "postcss": "^8.4.14",
    "tailwindcss": "^3.1.6"
  },
  "private": true
}

react-native

tailwind-css

回答 2

Stack Overflow用户

发布于 2022-07-16 10:14:59

遵循以下步骤：

install npm i tailwind-rn

npx setup-tailwind-rn

然后用TailwindProvider包装根组件，如：

import {TailwindProvider} from 'tailwind-rn';
import utilities from './tailwind.json';
import { StyleSheet, Text, View, Button} from 'react-native';
import {useTailwind} from 'tailwind-rn';

const App = () => (
const tailwind = useTailwind();
return(
    <TailwindProvider utilities={utilities}>
      <View style={tailwind("flex-1 justify-center items-center")}>
         <Text>wwww</Text>
         <Button title='click me'  /> 
      </View>   
    </TailwindProvider>
 );
)

学分：@Aniket：https://stackoverflow.com/a/71122844/13431819

或

将tailwind版本降级为version-2

票数 0

Stack Overflow用户

发布于 2022-07-17 08:01:39

最后，我只下载了一个旧版本的顺风，效果很好。

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/73001769

复制

相似问题

问为什么我的尾风CSS什么都不做？
EN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问为什么我的尾风CSS什么都不做？EN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问为什么我的尾风CSS什么都不做？
EN