Hover, Focus and Other States

Please refer to the documentation on the Tailwind CSS website for more information.

Pseudo-classes

tip

If a <View /> has a class which requires an event listener, it will be automatically upgraded to <Pressable />.

Hover, focus, and active

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,

Opt in Pointer Events

React Native 0.71 supports opt-in Pointer Events. If enabled NativeWind will use these instead, allowing for hover support on native when used with a pointer device.

Variant	Event Listeners
hover	onPointerOver, onPointerOut
focus	onBlur, onFocus
active	onPressIn, onPressOut,

First, last, odd, and even

Class	Support
first:	🌐 Web only
last:	🌐 Web only
odd:	🌐 Web only
even:	🌐 Web only

Form States

Class	Support
disabled:	✔️ Partial Support
required:	🌐 Web only
invalid:	🌐 Web only

caution

On native, "disabled:" is only available for components with a disabled prop.

Unfortunately <TextInput> uses enabled={false} instead of disabled={true}, so it will not work with "disabled:".

info

We are looking for contributors to add more support for "disabled:".

Styling based on parent state

Styling based on parent state (group-{modifier})

NativeWind supports the group class name and it can be used with any supported modifier.

Differentiating nested groups

NativeWind supports the group/{name} class name and it can be used with any supported modifier

Arbitrary groups

Class	Support
Class selectors	✅ Full Support
Attribute selectors	✅ Full Support
Pseudo-classes selectors	🌐 Web only
Pseudo-elements selectors	🌐 Web only
Elements selectors	🌐 Web only
Moving group via `&`	🌐 Web only

tip

Native supports multiple selectors, e.g group-[.classOne.classTwo[attribute=value]]

Styling based on sibling state

Styling based on parent state (peer-{modifier})

Class	Support
peer	🌐 Web only
peer-*	🌐 Web only
peer-invalid	🌐 Web only

Styling direct children

Styling based on parent state (*-)

Class	Support
*-	🌐 Web only

Styling based on descendants

Styling based on descendants (has-{modifier})

Class	Support
has-	🌐 Web only

info

We are looking for contributors to add more support for has-.

Pseudo-elements

Placeholder text

tip

On native, placeholder: only supports the text-* or color-* classes. It will map to the placeholderTextColor on native.

We are looking for contributors to add more support for placeholder:.

Class	Support
placeholder:	✔️ Partial Support

Media and feature queries

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

Please read the Dark Mode documentation for an in-depth look at how this feature works.

Class	Support
dark:	✅ Full Support

Prefers reduced motion

Class	Support
motion-reduce:	✅ Full Support

Viewport orientation

Use the portrait and landscape modifiers to conditionally add styles when the viewport is in a specific orientation.

Class	Support
portrait:	✅ Full Support
landscape:	✅ Full Support

Print styles

Use the print modifier to conditionally add styles that only apply when the document is being printed:

Class	Support
print:	🌐 Web only

Supports rules

Use the supports-[...] modifier to style things based on whether a certain feature is supported in the user’s browser.

Class	Support
supports-[n]:	🌐 Web only

Attribute selectors

Use the aria-* modifier to conditionally style things based on ARIA attributes.

Class	Support
aria-[n]:	🌐 Web only

Data selectors

Use the data-* modifier to conditionally style things based on data attributes.

Class	Support
data-[n]:	🌐 Web only

RTL support

Use the rtl and ltr modifiers to conditionally add styles in right-to-left and left-to-right modes respectively when building multi-directional layouts:

Class	Support
ltr:	✅ Full Support
rtl:	✅ Full Support

Open/closed state

Use the open modifier to conditionally add styles when a <details/> or <dialog/> element is in an open state:

Class	Support
open:	🌐 Web only

Custom modifiers

Custom modifiers are possible, but are not yet documented. More information to come.