@@ -68,30 +68,6 @@ button({ w: 350 });
6868button ({ w: " w-full" });
6969```
7070
71- ## Merging External ` className ` Safely (wcn)
72-
73- WindCtrl resolves Tailwind class conflicts ** inside** ` windctrl() ` using ` tailwind-merge ` .
74- However, in real applications you often need to merge ** additional ` className ` values** at the component boundary.
75-
76- A simple string concat can reintroduce conflicts:
77-
78- ``` tsx
79- // ⚠️ Can cause subtle Tailwind conflicts (e.g. p-2 vs p-4)
80- className = {` ${result .className } ${className } ` }
81- ```
82-
83- WindCtrl exports a small helper for this use case:
84-
85- ``` tsx
86- import { wcn } from " windctrl" ;
87-
88- // ✅ Conflict-safe merge
89- className = {wcn(result.className, className )}
90- ```
91-
92- ` wcn() ` is equivalent to ` twMerge(clsx(...)) ` and matches WindCtrl’s internal conflict resolution behavior.
93- This keeps the “last one wins” behavior consistent across both generated and user-supplied classes.
94-
9571## Core Concepts
9672
9773### Variants
@@ -281,6 +257,30 @@ const button = windctrl({
281257
282258The scope classes are automatically prefixed with ` group-data-[windctrl-scope=...]/windctrl-scope: ` to target the parent's data attribute.
283259
260+ ## Merging External ` className ` Safely (` wcn() ` )
261+
262+ WindCtrl resolves Tailwind class conflicts ** inside** ` windctrl() ` using ` tailwind-merge ` .
263+ However, in real applications you often need to merge ** additional ` className ` values** at the component boundary.
264+
265+ A simple string concat can reintroduce conflicts:
266+
267+ ``` tsx
268+ // ⚠️ Can cause subtle Tailwind conflicts (e.g. p-2 vs p-4)
269+ className = {` ${result .className } ${className } ` }
270+ ```
271+
272+ WindCtrl exports a small helper for this use case:
273+
274+ ``` tsx
275+ import { wcn } from " windctrl" ;
276+
277+ // ✅ Conflict-safe merge
278+ className = {wcn(result.className, className )}
279+ ```
280+
281+ ` wcn() ` is equivalent to ` twMerge(clsx(...)) ` and matches WindCtrl’s internal conflict resolution behavior.
282+ This keeps the “last one wins” behavior consistent across both generated and user-supplied classes.
283+
284284## Type Helpers (` StyleProps ` )
285285
286286When building reusable components, you often want to expose the exact style-related props inferred from a ` windctrl() ` definition.
0 commit comments