States & Pseudo-classes

Hover, Focus, and Active

Nativewind supports the :hover, :focus, and :active pseudo-classes. These work by mapping to the corresponding React Native event props on the component.

Pseudo-class	Tailwind Modifier	Activating Event	Deactivating Event
`:hover`	`hover:`	`onHoverIn`	`onHoverOut`
`:active`	`active:`	`onPressIn`	`onPressOut`
`:focus`	`focus:`	`onFocus`	`onBlur`

import { Pressable, Text } from "react-native";
 
function MyButton() {
  return (
    <Pressable className="bg-blue-500 active:bg-blue-700">
      <Text className="text-white">Press Me</Text>
    </Pressable>
  );
}

The component must support the relevant event prop for the modifier to work. For example, hover: requires onHoverIn/onHoverOut, which is available on Pressable and TextInput but not View or Text.

Combining Pseudo-classes

Multiple pseudo-classes can be combined. All conditions must be met for the styles to apply:

<TextInput className="hover:active:focus:border-blue-500" />

Disabled and Empty

Nativewind supports the :disabled and :empty pseudo-classes.

Pseudo-class	Tailwind Modifier	Condition
`:disabled`	`disabled:`	Component has `disabled={true}` prop
`:empty`	`empty:`	Component has no children

import { TextInput } from "react-native";
 
function MyInput({ disabled }) {
  return (
    <TextInput
      className="border disabled:opacity-50 disabled:bg-gray-200"
      disabled={disabled}
    />
  );
}

Selection and Placeholder

The selection: and placeholder: modifiers style text selection and placeholder text respectively:

<TextInput
  className="selection:text-black placeholder:text-gray-400"
  placeholder="Enter text..."
/>

Data Attribute Selectors

Nativewind supports [data-*] attribute selectors, allowing you to style components based on data attributes:

import { View, Text } from "react-native";
 
function StatusBadge({ active }) {
  return (
    <View
      className="[&[data-active]]:bg-green-500 [&[data-active='false']]:bg-gray-500"
      {...{ dataSet: { active: active } }}
    >
      <Text>Status</Text>
    </View>
  );
}

Styling Based on Parent State

You can style child components based on the state of a parent using the group utility. Add group/{name} to the parent and use group-hover/{name}:, group-active/{name}:, or group-focus/{name}: modifiers on children.

import { Pressable, Text, View } from "react-native";
 
function Card() {
  return (
    <Pressable className="group/card">
      <View className="group-active/card:bg-blue-100">
        <Text className="group-active/card:text-blue-700">
          Press the card to see child styles change
        </Text>
      </View>
    </Pressable>
  );
}

How it works

The parent component is tagged with group/{name} (e.g. group/item)
Children use group-{modifier}/{name}: to react to the parent's state
When the parent's state changes (e.g. pressed), child styles update automatically

Arbitrary Group Selectors

You can use arbitrary values with groups to match specific class names or props:

<View className="group-[.test]:text-white" />
<View className="group-[[accessibilityLabel=works]]:text-white" />

LTR and RTL

Use ltr: and rtl: to apply styles based on the text direction:

<Text className="ltr:text-left rtl:text-right">
  Direction-aware text
</Text>

States & Pseudo-classes

On this page