Tailwind 断点未正确应用

Question

我已经使用 tailwind 和 scss 构建了一个列系统（我也在使用 Nuxt 3）。我想在每列之间添加间隙，为此我在子元素的右侧添加边距。当我位于行的末尾时，最后一个元素不应该有任何边距。这是我的 scss ：

.content-container {
    display: flex;
    flex-wrap: wrap;

    width: 1400px;
    max-width: calc(100% - 80px);

    margin: 0 auto;

    $col-width: calc((100% - 11 * 40px) / 12);

    @for $i from 1 through 12 {
        .col-#{$i} {
            width: calc(#{$i} * #{$col-width} + (#{$i} - 1) * 40px);
            margin-right: 40px;
        }
    }

    .col-1:nth-child(12n + 12) {
        margin-right: 0;
    }

    .col-2:nth-child(6n + 6) {
        margin-right: 0;
    }

    .col-3:nth-child(4n + 4) {
        margin-right: 0;
    }

    .col-4:nth-child(3n + 3) {
        margin-right: 0;
    }

    .col-5:nth-child(2n + 2) {
        margin-right: 0;
    }

    .col-6:nth-child(2n + 2) {
        margin-right: 0;
    }

    .col-12 {
        margin-right: 0;
    }
}

这是我的html代码

<section class="image-background mb-1 lg:mb-2">
    <div class="content-container py-10 md:py-15">
        <h1 class="col-12 md:col-10 lg:col-8 mb-1 md:mb-2">{{ service?.data.title }}</h1>
        <p class="col-12 md:col-10 lg:col-8 highlight">{{ service?.data.highlight }}</p>
    </div>
</section>
<section class="py-2 lg:py-4">
    <div class="content-container">
        <PrismicRichText :field="service?.data.description" class="col-12 md:col-10 lg:col-8" />
    </div>
</section>
<section class="py-2 lg:py-4">
    <div class="content-container">
        <div class="columns-1 gap-gallery md:gap-gallery-md md:columns-2 lg:columns-3">
            <PrismicImage v-for="image of service?.data.gallery" :field="image.image" class="w-full mb-1/2 md:mb-1" />
        </div>
    </div>
</section>
<section class="py-4 lg:py-8">
    <div class="content-container">
        <h2 class="col-12">Services</h2>
        <DetailedService v-for="i of 4" class="col-12 md:col-6 lg:col-4" />
    </div>
</section>

如您所见，我有多个部分包含一个“内容容器”，每个部分包含多个子项。

我的问题出在“服务”容器中。我的中断点 nth-child 应用于大断点。另外，我的第 n 个子级没有针对正确的元素（就像没有为每个容器重置计数器一样）。

以下是情况截图：

我们可以在这里看到，甚至不是每一个第二个孩子：

Answer 1

您尝试过使用

gap

吗？您可以使用它在 Flex 父元素之间设置固定的“边距”