Skip to main content
Version: v2

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