Tailwind+Laravel开发：如何让div内表单文本框随屏幕尺寸自适应扩展？

我正在开发一个网站，需要实现一个表单，目前表单逻辑已正常运行，现在想要优化它的显示样式。

当前效果如下：

当前设计 #

小屏幕下显示效果非常理想，每个文本框都占满右侧全部可用空间，但当我在32英寸显示器上打开页面时，就会出现截图中的问题。我花了2小时搜索相关解决方案，但始终调试不成功。

请问有没有办法可以让文本框在有足够可用空间时自动向右延伸占满宽度？

我的HTML代码如下：

@extends('layouts.app')

@section('content')

    <div class="flex justify-center">
        <div class="bg-white p-6 rounded-lg font-serif text-2xl font-bold w-6/12">


            <form class="w-full max-w-lg" action="{{ route('dashboard') }}" method="post">
                @csrf
                <div class="flex flex-wrap -mx-3 mb-6 mt-3">
                    <div class="w-full md:max-w-2xl px-3 mb-6 md:mb-0">
                        <p class="mb-4">Stellenanzeigen erstellen:</p>
                        <label class="block uppercase tracking-wide text-gray-700 text-xs font-bold mb-2 text-base" for="titel">
                            Titel:
                        </label>
                        <input class="block w-full bg-gray-200 text-gray-700 border rounded py-3 px-4 mb-3
                        leading-tight focus:outline-none focus:bg-white @error('titel') border-red-500 @enderror" id="titel" name="titel" type="text" placeholder="Titel">
                        @error('titel')
                        <div class="text-red-500 mt-2 text-sm">
                            {{ $message }}
                        </div>
                        @enderror
                    </div>
                </div>


                <div class="flex flex-wrap -mx-3 mb-6 mt-6">
                    <div class="w-full px-3">
                        <label class="block uppercase tracking-wide text-gray-700 text-xs font-bold mb-2 text-base" for="standort">
                            Standort
                        </label>
                        <input class="appearance-none block w-full bg-gray-200 text-gray-700 border border-gray-200 rounded
                        py-3 px-4 mb-3 leading-tight focus:outline-none focus:bg-white
                        focus:border-gray-500 @error('standort') border-red-500 @enderror" id="standort" name="standort" type="text" placeholder="Standort">
                        @error('standort')
                        <div class="text-red-500 mt-2 text-sm">
                            {{ $message }}
                        </div>
                        @enderror
                    </div>
                </div>


                <div class="flex flex-wrap -mx-3 mb-6">
                    <div class="w-full px-3">
                        <label class="block uppercase tracking-wide text-gray-700 text-xs font-bold mb-2 text-base" for="kontakt">
                            Kontakt
                        </label>
                        <input class="appearance-none block w-full bg-gray-200 text-gray-700 border border-gray-200 rounded
                        py-3 px-4 mb-3 leading-tight focus:outline-none focus:bg-white
                        focus:border-gray-500 @error('kontakt') border-red-500 @enderror" id="kontakt" name="kontakt" type="email" placeholder="Email">
                        @error('kontakt')
                        <div class="text-red-500 mt-2 text-sm">
                            {{ $message }}
                        </div>
                        @enderror
                    </div>
                </div>


                <div class="flex flex-wrap -mx-3 mb-6">
                    <div class="w-full px-3">
                        <label class="block uppercase tracking-wide text-gray-700 text-xs font-bold mb-2 text-base" for="startdatum">
                            Startdatum
                        </label>
                        <input class="appearance-none block w-full bg-gray-200 text-gray-700 border border-gray-200 rounded
                        py-3 px-4 mb-3 leading-tight focus:outline-none focus:bg-white
                        focus:border-gray-500 @error('startdatum') border-red-500 @enderror" id="startdatum" name="startdatum" type="date" placeholder="Startdatum">
                        @error('startdatum')
                        <div class="text-red-500 mt-2 text-sm">
                            {{ $message }}
                        </div>
                        @enderror
                    </div>
                </div>


                <div class="flex flex-wrap -mx-3 mb-6">
                    <div class="w-full px-3">
                        <label class="block uppercase tracking-wide text-gray-700 text-xs font-bold mb-2 text-base" for="enddatum">
                            Enddatum
                        </label>
                        <input class="appearance-none block w-full bg-gray-200 text-gray-700 border border-gray-200 rounded
                        py-3 px-4 mb-3 leading-tight focus:outline-none focus:bg-white
                        focus:border-gray-500 @error('titel') border-red-500 @enderror" id="enddatum" name="enddatum" type="date" placeholder="Enddatum">
                        @error('enddatum')
                        <div class="text-red-500 mt-2 text-sm">
                            {{ $message }}
                        </div>
                        @enderror
                    </div>
                </div>


                <div class="flex flex-wrap -mx-3 mb-6 pl-2">
                    <div class="w-full px-3">
                        <label class="block uppercase tracking-wide text-gray-700 text-xs font-bold mb-2" for="lebenslauf">
                        <input type="checkbox" class="" name="lebenslauf" value="">
                            <span class="ml-2 text-base">Lebenslauf</span>
                        </label>

                    </div>
                </div>


                <div class="flex flex-wrap -mx-3 mb-6 pl-2">
                    <div class="w-full px-3">
                        <label class="block uppercase tracking-wide text-gray-700 text-xs font-bold mb-2" for="anschreiben">
                            <input type="checkbox" class="" name="anschreiben" value="">
                            <span class="ml-2 text-base">Anschreiben</span>
                        </label>
                    </div>
                </div>


                <div class="flex flex-wrap -mx-3 mb-6 pl-2">
                    <div class="w-full px-3">
                        <label class="block uppercase tracking-wide text-gray-700 text-xs font-bold mb-2" for="zeugnisse">
                            <input type="checkbox" class="" name="zeugnisse" value="">
                            <span class="ml-2 text-base">Zeugnisse</span>
                        </label>
                    </div>
                </div>


                <div class="flex flex-wrap -mx-3 mb-6 pl-4">
                    <div class="form-textarea mt-1 block w-full">
                        <label class="block uppercase tracking-wide text-gray-700 text-xs font-bold mb-2 text-base" for="beschreibung">
                            Beschreibung
                        </label>
                        <textarea class="w-full px-3 py-2 bg-gray-200 border rounded-lg focus:outline-none @error('beschreibung') border-red-500 @enderror"
                                  name="beschreibung" id="beschreibung" rows="8" ></textarea>
                        @error('beschreibung')
                        <div class="text-red-500 mt-2 text-sm">
                            {{ $message }}
                        </div>
                        @enderror
                    </div>
                </div>

                <div>
                    <button type="submit" class="bg-blue-500 text-white px-4 py-3 rounded font-medium w-full">Abschicken</button>
                </div>
            </form>

        </div>
    </div>



@endsection

我使用的是Laravel框架，引入的是PhpStorm导入Tailwind时自带的标准CSS样式表。

问题由两个宽度限制属性导致：

• form标签上设置了max-w-lg，这个属性会强制表单的最大宽度为Tailwind预设的lg尺寸（默认32rem），哪怕外层容器宽度更大，表单也不会继续延伸
• 第一个输入项的外层div设置了md:max-w-2xl，中等以上屏幕下这个元素最大宽度被限制为2xl尺寸（默认42rem），也会导致输入框无法占满容器

修复步骤 #

1. 删除form标签的max-w-lg类，保留w-full即可让表单占满外层白色容器的全部可用宽度
2. 删除第一个表单组外层div的md:max-w-2xl类，保证第一个输入项和其他输入项宽度一致

可选优化 #

如果你觉得32英寸屏幕下表单全宽会导致输入框过长影响使用，可以调整外层白色容器的宽度属性，比如把w-6/12替换为w-11/12 max-w-4xl，这样小屏占满90%宽度，大屏最大宽度限制为4xl（默认56rem），兼顾大小屏的使用体验。

内容的提问来源于stack exchange，提问作者Frevelman