Style Specificity

Learn how Uniwind resolves conflicting class names, important utilities, and inline styles.

Class Name Conflicts

Uniwind does not automatically deduplicate classNames. If you pass conflicting utilities for the same style property, both classes are applied and the result depends on style priority rules.

import { View } from 'react-native'

<View className="bg-red-500 bg-blue-500" />

Result: The background depends on the generated style priority. Use tailwind-merge when building className strings that may contain conflicts.

Use tailwind-merge for reusable components where consumer-provided classNames should override base styles predictably.

Important Utilities

Use Tailwind’s important modifier (!) when a utility must override another utility for the same property.

import { View } from 'react-native'

<View className="bg-blue-500 !bg-red-500" />

Result: The background will be red.

This works the same as Tailwind CSS: !bg-red-500 is generated with higher priority than bg-blue-500.

Inline Styles

Inline styles always have higher priority than className styles in Uniwind.

import { View } from 'react-native'

<View
  className="!bg-red-500"
  style={{ backgroundColor: 'blue' }}
/>

Result: The background will be blue.

Inline styles always have higher priority than className styles, even when the class uses the important modifier.

Platform-Specific Behavior

Specificity rules work consistently across platforms and variants:

import { View } from 'react-native'

<View
  className="bg-red-500 ios:!bg-blue-500 android:!bg-green-500"
  style={{ backgroundColor: 'purple' }}
/>

Result on all platforms: Purple background because inline style always wins.

Best Practices

Use className for static styles and inline styles only for truly dynamic values that can’t be represented as classes, such as API values or animation interpolations.

Use cn from tailwind-merge when building component libraries to ensure predictable className overrides.

Avoid mixing className and inline styles for the same property. Choose one approach for consistency and maintainability.