Available in Uniwind 1.3.0+
Overview
Data selectors let you conditionally apply styles based on a component’s props using Tailwind-style variants. This mirrors the familiar data-[state=open]:... pattern from Tailwind v4 and allows React Native components to react to their own prop values.
Basic Usage
Use the data-[prop=value] variant with your classes. The name inside the brackets maps to a data-<prop> prop on the same component.
import { View } from 'react-native'
// Use your own data-* props on React Native components
<View
data-state={isOpen ? 'open' : 'closed'}
className="p-4 rounded border data-[state=open]:bg-muted/50 data-[state=closed]:bg-transparent"
/>
- Inside brackets, use the name without the
data- prefix (e.g., state targets the data-state prop)
- The utility applies only when the prop equals the given value
Boolean Props
For boolean props, compare to true or false:
import { View } from 'react-native'
<View
data-selected={isSelected}
className="border border-input rounded px-3 py-2 data-[selected=true]:ring-2 data-[selected=true]:ring-ring"
/>
Booleans match both the boolean and string forms. For example, data-[selected=true] matches data-selected={true} and data-selected="true".
String Props
You can match arbitrary string values:
import { View } from 'react-native'
// Match a specific value on your own data-* prop
<View
data-state={isOpen ? 'open' : 'closed'}
className="data-[state=open]:bg-muted/50 data-[state=closed]:bg-transparent"
/>
Multiple Variants
Chain multiple data selectors to target different prop states:
import { View } from 'react-native'
<View
data-status={status} // 'success' | 'warning' | 'error'
data-size={size} // 'sm' | 'md' | 'lg'
className="
data-[status=success]:bg-green-500 data-[status=success]:text-white
data-[status=warning]:bg-yellow-500 data-[status=warning]:text-black
data-[status=error]:bg-red-500 data-[status=error]:text-white
data-[size=sm]:px-2 data-[size=sm]:py-0.5
data-[size=md]:px-3 data-[size=md]:py-1
data-[size=lg]:px-4 data-[size=lg]:py-1.5
"
/>
How It Works
- During build, Uniwind recognizes attribute selectors generated by variants like
data-[prop=value]:... and records them as data constraints for the corresponding class
- At runtime, when resolving a component’s
className, Uniwind compares the component’s props against those constraints and only applies the matching styles
- Styles that depend on data selectors are evaluated against props and are not cached across prop changes
Supported Syntax
- Equality checks:
data-[prop=value]:utility
- Boolean checks:
data-[prop=true] and data-[prop=false]
- Multiple different data selectors can be used on the same className string
Only equality selectors are supported (e.g., data-[prop=value]). Presence-only selectors like data-[prop] or other operators are not supported.
Best Practices
- Prefer semantic prop names (e.g.,
state, status, variant, disabled) to keep selectors readable
- Keep variant logic close to the component whose props drive the state
- Use data selectors for prop-driven state; use interactive variants for interaction states when available
Examples
Tabs
import { Pressable, Text } from 'react-native'
<Pressable
data-selected={route.key === current}
className="
px-4 py-2 rounded-md text-foreground/60
data-[selected=true]:bg-accent data-[selected=true]:text-accent-foreground
"
>
<Text>{route.title}</Text>
</Pressable>
Toggle
import { Pressable, View } from 'react-native'
<Pressable
data-checked={enabled}
className="
h-6 w-10 rounded-full bg-muted
data-[checked=true]:bg-primary
"
>
<View
className="h-5 w-5 rounded-full bg-background translate-x-0 data-[checked=true]:translate-x-4"
/>
</Pressable>
