如何在Tailwind CSS移动端sm:flex-col布局中添加div垂直间距

问题场景 #

使用Tailwind CSS开发表单时，两个嵌套InputText的容器div在平板及以上设备有正常水平间距，但切换到移动端（sm:flex-col布局）时，垂直方向没有间距。

原始代码 #

<FormSection
            title="Basic Details"
            description="Fill in the basic details of your business."
        >

            <div
                class="md:flex justify-between space-between lg:flex-row lg:space-y-0 sm:space-x-0 sm:flex-col sm:space-y-5 lg:space-x-10 align-content-center align-middle">

                <div class="w-full">
                    <InputText
                        id="name"
                        label="Business Name"
                        description="Legally registered name."
                        v-model="form.name"
                        required
                    />
                </div>

                <div class="w-full">
                    <InputText
                        id="registration_number"
                        label="Registration Number"
                        description="Legal registration number."
                        v-model="form.registration_number"
                    />
                </div>

            </div>

   </FormSection>

问题原因 #

你给容器加了sm:space-y-5，但Tailwind默认是移动优先的响应式规则——如果测试设备宽度小于sm断点（默认640px），sm:前缀的类不会生效。另外原代码的类顺序和断点逻辑混乱，导致移动端垂直间距未正确应用。

两种修复方案 #

方案1：遵循移动优先原则（推荐）

先给容器设置移动端默认的垂直间距，再在平板及以上设备切换为水平布局并移除垂直间距：

<div
    class="flex flex-col space-y-5 md:flex-row md:space-y-0 md:space-x-10 justify-between align-content-center align-middle">

• 移动端默认flex-col+space-y-5，保证垂直间距
• md:及以上切换为flex-row，移除垂直间距（md:space-y-0），添加水平间距（md:space-x-10）

方案2：直接给子元素加margin（简单粗暴）

给第二个容器div添加移动端的上margin，无需依赖flex容器的space类：

<div class="w-full sm:mt-5">
    <InputText
        id="registration_number"
        label="Registration Number"
        description="Legal registration number."
        v-model="form.registration_number"
    />
</div>

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