Skip to main content

Space between

Usage​

Please refer to the documentation on the Tailwind CSS website

How it works​

React Native does not have support child selectors, however styled components are context aware and can pass down information.

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

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

Compatibility​

ClassNative (StyleSheet)Web (CSS)
space-{n}✅✅
space-[n]✅✅
space-x-{n}✅✅
space-x-[n]✅✅
space-y-{n}✅✅
space-y-[n]✅✅
space-x-reverse❌✅
space-y-reverse❌✅
Legend

Class​

-{n} Supports values from theme

-[n] Supports arbitrary values

Icon​

✅ Full support

✔️ Partial support

❌ Not supported