如何在React Native中为NativeWind元素添加自定义类样式？

在React Native的Tailwind实现（如NativeWind）中，无法像Web端那样通过App.css添加自定义类，但可以通过修改tailwind.config.js配置文件来实现，具体有两种常用方式：

方式一：通过Tailwind配置添加自定义工具类 #

在项目根目录的tailwind.config.js中，利用plugins字段添加自定义类：

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    "./App.{js,jsx,ts,tsx}",
    "./src/**/*.{js,jsx,ts,tsx}" // 确保包含所有需要编译的文件路径
  ],
  theme: {
    extend: {},
  },
  plugins: [
    function({ addUtilities }) {
      // 添加自定义.title类
      addUtilities({
        '.title': {
          fontSize: '24px',
          fontWeight: 800,
        }
      })
    }
  ]
}

配置完成后，直接在组件中使用自定义类：

<Text className="title">Title Text!</Text>

方式二：封装自定义样式组件 #

如果需要重复使用这类样式，也可以封装一个专属的Text组件，避免每次都写className：

import { Text } from 'react-native';
import { styled } from 'nativewind';

// 用styled工具将样式绑定到组件上
const TitleText = styled(Text, 'text-[24px] font-[800]');

// 使用时直接调用组件
<TitleText>Title Text!</TitleText>

内容的提问来源于stack exchange，提问作者jNiuk