如何在 react native 应用程序中添加 tailwind CSS？

这个例子是一个在react native框架中添加tailwind CSS的分步指导教程。

Tailwind CSS是一个实用的CSS框架，它提供了大量的CSS类在你的网络或移动应用程序中重复使用。

这个框架是为响应式Web应用创建的，而不是为移动应用创建的。

React Native是一个移动的框架，它使用样式来设计UI元素。

编写自己的样式是一项繁琐的工作，我们可以重用tailwind CSS提供的预定义类。 另一个优点是，与其他框架相比，tailwind CSS包的大小非常小。

有多个为 react-native 编写的 npm 包。

以下的包在受欢迎程度上排名靠前。

• tailwind-rn
• tailwind-react-native-classnames

在本教程中，在react native应用程序中使用tailwind-rn npm包。

请查看文档，因为一些原始的tailwind类在这些包中有支持。

在 react native 应用程序中添加 tailwind CSS npm 包

在命令中打开你的 react native 项目，运行以下命令

npm install tailwind-rn 
(or)
yarn add tailwind-rn

它会在package.json中添加依赖关系，如下所示

{
  "dependencies": {
    "tailwind-rn":"1.5.1"
  }
}

React native tailwind CSS 示例

让我们创建一个 react native 组件 -TailwindComponent 。接下来，将useTailwind 导入到组件中。

import {useTailwind} from 'tailwind-rn';

useTailwind 是一个反应钩子，返回 函数。tailwind

这个函数接受类名并返回一个样式对象。

这些样式的输出适用于 react-native UI 组件，如text,view 。

下面是一个示例代码。

import React from 'react';
import {SafeAreaView, View, Text} from 'react-native';
import {useTailwind} from 'tailwind-rn';

const TailwindComponent = () => {
    const tailwind = useTailwind();

    return (
        <SafeAreaView style={tailwind('h-full')}>
            <View style={tailwind('pt-12 items-center')}>
                <View style={tailwind('bg-blue-200 px-3 py-1 rounded-full')}>
                    <Text style={tailwind('text-blue-700 font-semibold')}>
                        React native Tailwind CSS example
                    </Text>
                </View>
            </View>
        </SafeAreaView>
    );
};

export default TailwindComponent;

结论

这是一个基本的 react native 示例，用于添加 tailwind CSS 样式。