Skip to main content
Version: v2

Divide Width

Usage

Please refer to the documentation on the Tailwind CSS website

How it works

React Native does not have support child selectors, so the styled components clones its children and appends the child styles.

// With this code
<View className="divide-x-2">
<Text>0</Text>
<Text>1</Text>
<Text>2</Text>
</View>

// It will output as this
<View>
<Text>0</Text>
<Text style={{ borderLeft: 2 }}>1</Text>
<Text style={{ borderLeft: 2 }}>2</Text>
</View>

Compatibility

ClassNative (StyleSheet)Web (CSS)
divide-x-{n}
divide-x-[n]
divide-y-{n}
divide-y-[n]
Legend

Class

-{n} Supports values from theme

-[n] Supports arbitrary values

Icon

✅ Full support

✔️ Partial support

❌ Not supported