Skip to main content

​
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.
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.
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.
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:
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.