I’d like to fit form items to their display width.
Each form is nested within li element.
And, I could manage to fit li elements to display width.
but their child elements (which are form elements ) do not stretch to the li element.
I understand form elements (eg. input, textarea) are inline so that they should fit as wide as their parent.
Would you help me out with this?
Just give w-full for child elements of the li and remove m-3. Instead of m-3 in childs, give p-3 in li elements
<!doctype html>
<html class="h-full">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="https://cdn.tailwindcss.com"></script>
</head>
<form class="bg-blue-100" action="/events" accept-charset="UTF-8" method="post">
<input type="hidden" name="authenticity_token" value="Wn6NqXmIH7TeOeRE4XU28HGJfRwsUwJq1ykMHqza1v6aiKmoQCgKMi_j0TG5SLwMXGTeyudhcjk4UY2aeI_i_w" autocomplete="off" />
<ul class="flex flex-wrap">
<li class="w-screen p-3">
<input placeholder="Event Name" class="w-full rounded border-transparent text-gray-700" type="text" name="event[name]" id="event_name" />
</li>
<li class="w-screen p-3 bg-red-500">
<input value="2022-04-23" class="w-full rounded border-transparent text-gray-700" type="date" name="event[event_date]" id="event_event_date" />
</li>
<li class="w-screen p-3 bg-red-50">
<textarea placeholder="Memo" class="w-full rounded border-transparent text-gray-700" name="event[memo]" id="event_memo"></textarea>
</li>
<li class="w-screen">
<input type="submit" name="commit" value="Submit" class="ml-auto block" data-disable-with="Submit" />
</li>
</ul>
</form>You don't actually need to nest the elements inside li but whatever you see
the only thing you need to add to the child element is w-full
have a look: https://play.tailwindcss.com/pEY3BsH3qv