Skip to content

Commit f83eb78

Browse files
committed
docs: tweak
1 parent c577d19 commit f83eb78

File tree

1 file changed

+24
-24
lines changed

1 file changed

+24
-24
lines changed

README.md

Lines changed: 24 additions & 24 deletions
Original file line numberDiff line numberDiff line change
@@ -68,30 +68,6 @@ button({ w: 350 });
6868
button({ 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

282258
The 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

286286
When building reusable components, you often want to expose the exact style-related props inferred from a `windctrl()` definition.

0 commit comments

Comments
 (0)