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:
Styling based on parent state
NativeWind supports the
group parent state and a new
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-isolate both work with the
To style an element at a specific breakpoint, use responsive modifiers like
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.
Use the portrait and landscape modifiers to conditionally add styles when the viewport is in a specific orientation