Hover, Focus and Other States
When compiling for React Native, NativeWind emulates CSS states .
Please refer to the documentation on the Tailwind CSS website for more information.
Hover, focus, and active
This documentation only applies when compiling for StyleSheet.create
NativeWind implements a subset of the Tailwind pseudo-classes by adding event listeners on your components, hence they will only work on components that can accept the listener.
The supported pseudo-classes and their related listeners are:
| Variant | Event Listeners |
|---|---|
hover | onHoverIn, onHoverOut |
focus | onBlur, onFocus |
active | onPressIn, onPressOut |
Styling based on parent state
NativeWind supports the group parent state and a new group-isolate class.
The group classes creates an unbounded scope, while group-isolate creates a bounded scope. The primary purpose of group-isolate is for state styling on components which do not accept the needed state listeners.
group and group-isolate both work with the hover/active/focus pseudo-classes.
Responsive breakpoints
To style an element at a specific breakpoint, use responsive modifiers like md and lg.
Check out the Responsive Design documentation for an in-depth look at how these features work.
Prefers color scheme
Check out the Dark Mode documentation for an in-depth look at how this feature works.
Viewport orientation
Use the portrait and landscape modifiers to conditionally add styles when the viewport is in a specific orientation