hipowered.dev/basecoat
1
0
Fork 0
mirror of https://github.com/hunvreus/basecoat.git synced 2026-11-11 04:38:18 +00:00
Code Issues Packages Projects Releases Wiki Activity

Replace the .form migration snippet that fails in Tailwind v4

Browse Source 
Tailwind v4 can't @apply Basecoat's component classes, so the 1.0.0 migration snippet failed with "Cannot apply unknown utility class". Show the .field wrapper and the per-element classes instead.
This commit is contained in:
grugbraindev
2026-10-23 09:30:06 +08:00
parent b7d33eee04
commit b74987150d
1 changed files with 8 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files
CHANGELOG.md
+8 -6
View File
@@ -156,15 +156,17 @@
### Migration Notes
To keep the previous `.form` wrapper behavior, define it in your own Tailwind CSS:
The `.form` wrapper can't be recreated with `@apply`: Tailwind v4 only applies utilities, not Basecoat's component classes. Wrap each label and control in a `.field` instead:
```css
.form label { @apply label; }
.form input { @apply input; }
.form textarea { @apply textarea; }
.form select { @apply select; }
```html
<div class="field">
<label for="email">Email</label>
<input id="email" type="email">
</div>
```
Or add the component class to each element: `class="label"`, `class="input"`, `class="textarea"`, or `class="select"` on a native `<select>`.
To keep the previous document-event command APIs, add bridge listeners in your app:
```js