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
Class | Native (StyleSheet) | Web (CSS) |
---|---|---|
divide-x-{n} | ✅ | ✅ |
divide-x-[n] | ✅ | ✅ |
divide-y-{n} | ✅ | ✅ |
divide-y-[n] | ✅ | ✅ |