在Tailwind CSS/NativeWind中实现可变宽度进度条

要实现仅用Tailwind工具类设置子View宽度为父View的百分比，你需要把百分比符号正确包含在Tailwind的自定义宽度类中，以下是两种可行方式：

方式一：直接拼接百分比符号到自定义类 #

将%符号和动态值一起放入方括号内，Tailwind就能识别这是百分比宽度：

<View className='w-full h-10 bg-blue-500'>
    <View className={`w-[${percentage}%] h-10 bg-blue-300`}/>
</View>

比如当percentage为60时，生成的类是w-[60%]，Tailwind会正确解析这个百分比宽度。

方式二：使用CSS变量（更适合动态更新场景） #

如果百分比需要频繁更新，用CSS变量结合Tailwind自定义类更灵活：

<View className='w-full h-10 bg-blue-500' style={{ '--progress-width': `${percentage}%` }}>
    <View className='w-[var(--progress-width)] h-10 bg-blue-300'/>
</View>

父元素通过style设置CSS变量，子元素用Tailwind的w-[var(--xxx)]语法引用变量，既满足仅用子元素className的需求，又能灵活控制宽度。

注意：确保你的Tailwind配置启用了JIT模式（Tailwind v3及以上默认启用），这样自定义的宽度类才能被正确生成。

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