> ## Documentation Index
> Fetch the complete documentation index at: https://docs.uniwind.dev/llms.txt
> Use this file to discover all available pages before exploring further.

# 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.

```tsx theme={null}
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`](https://github.com/dcastil/tailwind-merge) when building className strings that may contain conflicts.

<Tip>
  Use `tailwind-merge` for reusable components where consumer-provided classNames should override base styles predictably.
</Tip>

## Important Utilities

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

```tsx theme={null}
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.

```tsx theme={null}
import { View } from 'react-native'

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

**Result:** The background will be blue.

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

## Platform-Specific Behavior

Specificity rules work consistently across platforms and variants:

```tsx theme={null}
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

<Tip>
  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.
</Tip>

<Tip>
  Use `cn` from `tailwind-merge` when building component libraries to ensure predictable className overrides.
</Tip>

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