为什么我的Tailwind CSS没有任何作用？

Question

由于某些原因，我无法使tailwind rn实际上为我的程序设置样式。当我运行expo start时，即使我在代码中设置了居中排列，项目也没有对齐到中心。

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
}

- airjlee

---

你是否按照以下步骤进行操作：npm install tailwind-rn，然后运行 npx setup-tailwind-rn？ - Rahman Haroon

尝试在 <Text> 中使用其他类，如 text-red-500，看看是否起作用。 - MagnusEffect

@RahmanHaroon 是的，我有。 - airjlee

@RosePark仍然无法工作。 - airjlee

你是否从 https://www.npmjs.com/package/tailwind-rn 正确导入/安装了它？能否展示一下你的 package.json 文件？ - MagnusEffect

@RosePark 我提供了我的 package.json 文件，我完全按照那些指示操作了。 - airjlee

Answer 1

对于任何查看此内容但不想下载旧版本的人来说，过去几个月发生了很多变化 - Tailwind现在被称为"NativeWind"。

yarn add nativewind
yarn add --dev tailwindcss

设置与常规的TailWindCSS非常相似，您只需要将文件类添加到tailwind配置中即可。

// tailwind.config.js

module.exports = {
content: ["./App.{js,jsx,ts,tsx}", "./<custom directory>/**/*.{js,jsx,ts,tsx}"],
  theme: {
    extend: {},
  },
  plugins: [],
}

然后将插件添加到您的 Babel 配置中：

// babel.config.js

module.exports = function (api) {
  api.cache(true);
  return {
    presets: ["babel-preset-expo"],
    plugins: ["nativewind/babel"],
  };
};

然后你可以像平常一样使用Tailwind样式，同时也可以删除StyleSheet的导入和提供者代码：

import { Text, View, Button } from 'react-native';

export default function App() {

  return (
      <View className='flex-1 items-center justify-center'>
        <Text>Hello</Text>
        <StatusBar style="auto" />
    </View>
    
  );
}

- GH0xSTED

Answer 2

请按照以下步骤操作：

1. 安装 npm i tailwind-rn

2. 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://dev59.com/e28NtIcB2Jgan1znpedh#71122844

或者

将tailwind版本降级至version-2

- Agni Gari

---

我已经做了，但它仍然没有居中调整。 - airjlee

尝试在新项目中执行以下步骤。可能某些包被错误地安装了。 - Agni Gari

仍然没有效果，也没有错误；我的文本只是停留在左上角而不是中心。 - airjlee

尝试降级到tailwind-css的第二个版本。 - Agni Gari

Answer 3

最终我只是下载了一个旧版本的Tailwind，它可以正常工作。

- airjlee

---

你能提供你降级的版本吗？ - David Leuliette