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