Skip to main content
Version: v2

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

note

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:

VariantEvent Listeners
hoveronHoverIn, onHoverOut
focusonBlur, onFocus
activeonPressIn, 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