Problem: Search-style inline forms.
Solution#
<form class="flex gap-2">
<input class="flex-1 rounded-lg border px-3 py-2" placeholder="Search…" />
<button class="rounded-lg bg-blue-600 px-4 text-white">Go</button>
</form>Why this works#
flex + flex-1 input.
Variants#
- Responsive: add screen prefixes to the core classes
- Dark: pair each color utility with its dark: twin
- Animated: add
transition+ a state variant for motion
Related recipes#
cookbook/index|Cookbook index · utilities/index|Utilities reference · patterns/index|Layout patterns
