Hover, Focus and Other States
Please refer to the documentation on the Tailwind CSS website for more information.
Pseudo-classes
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, |
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
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 |
|---|---|
| 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.
Contributors
We are looking for contributors for the following:
Responsive breakpoints
What are good responsive breakpoints for mobile devices?
Add placeholder:
placeholder:text-color should support mapping to placeholderTextColor
Add selection:
NativeWind could export a custom <em> component. selection: will style this component.
Add first-line:
first-line: should map to <Text numberOfLines={1} style={styles}>{letter}</Text>
Add first-letter:
first-letter: should map to <Text style={styles}>{letter}</Text>
Explore backdrop:
Could this be used with <Modal />?
Explore aria-[n]:
Could this be used with the accessibility props?
Explore data-[n]:
Could this be used with the data props? Should we auto strip these props on native?